vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3924 - For DataTable & Column

pull/3950/head
Tuğçe Küçükoğlu 2023-05-09 17:57:31 +03:00
parent 65275ff32a
commit 2b77647880
13 changed files with 500 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

303
components/lib/column/Column.d.ts vendored
View File

@ -10,9 +10,22 @@
*/
import { VNode } from 'vue';
import { ButtonPassThroughOptionType } from '../button';
import { DropdownPassThroughOptionType } from '../dropdown';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { VirtualScrollerLoaderOptions } from '../virtualscroller';
export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes | ((options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ColumnPassThroughMethodOptions {
props: ColumnProps;
state: ColumnState;
context: ColumnContext;
}
/**
* Filter model metadata.
*/
@ -68,6 +81,292 @@ export interface ColumnLoadingOptions extends VirtualScrollerLoaderOptions {
field: string;
}
/**
* Custom passthrough(pt) options.
* @see {@link ColumnProps.pt}
*/
export interface ColumnPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header cell's DOM element.
*/
headerCell?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the column resizer's DOM element.
*/
columnResizer?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header content's DOM element.
*/
headerContent?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header title's DOM element.
*/
headerTitle?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the sort's DOM element.
*/
sort?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the sort badge's DOM element.
*/
sortBadge?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the checkbox wrapper's DOM element.
*/
headerCheckboxWrapper?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header checkbox's DOM element.
*/
headerCheckbox?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header checkbox icon's DOM element.
*/
headerCheckboxIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the column filter's DOM element.
*/
columnFilter?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter input's DOM element.
*/
filterInput?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter menu button's DOM element.
*/
filterMenuButton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header filter clear button's DOM element.
*/
headerFilterClearButton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter clear icon's DOM element.
*/
filterClearIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter overlay's DOM element.
*/
filterOverlay?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter row items' DOM element.
*/
filterRowItems?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter row item's DOM element.
*/
filterRowItem?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter separator's DOM element.
*/
filterSeparator?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter operator's DOM element.
*/
filterOperator?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptionType}
*/
filterOperatorDropdown?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the filter constraints' DOM element.
*/
filterConstraints?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter constraint's DOM element.
*/
filterConstraint?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptionType}
*/
filterMatchModeDropdown?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the filter remove button container's DOM element.
*/
filterRemove?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterRemoveButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the filter add rule's DOM element.
*/
filterAddRule?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterAddRuleButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the filter buttonbar's DOM element.
*/
filterButtonbar?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterClearButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterApplyButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the body cell's DOM element.
*/
bodyCell?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the rowgroup toggler's DOM element.
*/
rowGroupToggler?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the rowgroup toggler icon's DOM element.
*/
rowGroupTogglerIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the column title's DOM element.
*/
columnTitle?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the radiobutton wrapper's DOM element.
*/
radiobuttonWrapper?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the radiobutton's DOM element.
*/
radiobutton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the radiobutton icon's DOM element.
*/
radiobuttonIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the checkbox wrapper's DOM element.
*/
checkboxWrapper?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the checkbox's DOM element.
*/
checkbox?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the checkbox icon's DOM element.
*/
checkboxIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the rowtoggler's DOM element.
*/
rowToggler?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the rowtoggler icon's DOM element.
*/
rowTogglerIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor init button's DOM element.
*/
rowEditorInitButton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor init icon's DOM element.
*/
rowEditorInitIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor edit button's DOM element.
*/
rowEditorEditButton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor edit icon's DOM element.
*/
rowEditorEditIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor cancel button's DOM element.
*/
rowEditorCancelButton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor cancel icon's DOM element.
*/
rowEditorCancelIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenHeaderInputWrapper?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the hidden input's DOM element.
*/
hiddenHeaderInput?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: ColumnPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface ColumnPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in Column component.
*/
export interface ColumnState {
d_editing: boolean;
/**
* Current style of the body cell.
*/
styleObject: object;
/**
* Current filter overlay visible as a boolean.
*/
overlayVisible: boolean;
/**
* Current filter match mode.
*/
defaultMatchMode: string;
/**
* Current filter operator.
*/
defaultOperator: string;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current style of the rowgroup header.
*/
rowGroupHeaderStyleObject: object;
}
/**
* Defines current options in Column component.
*/
export interface ColumnContext {
/**
* Current checked state of row as a boolean.
* @defaultValue false
*/
checked: boolean;
/**
* Current focused state of row as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current disabled state of row as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
/**
* Defines valid properties in Column component.
*/
@ -569,9 +868,9 @@ export interface ColumnEmits {}
/**
* **PrimeVue - Column**
*
* _Column is a helper component for DataTable and TreeTable._
* _Column is a helper component for Column and TreeTable._
*
* [Live Demo](https://www.primevue.org/datatable/)
* [Live Demo](https://www.primevue.org/Column/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*

3
components/lib/column/Column.vue
View File

@ -1,6 +1,9 @@
<script>
import BaseComponent from 'primevue/basecomponent';
export default {
name: 'Column',
extends: BaseComponent,
props: {
columnKey: {
type: null,

39
components/lib/datatable/BodyCell.vue
View File

@ -1,9 +1,9 @@
<template>
<td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="ptm('bodyCell')">
<td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
<component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions" />
</td>
<td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell" v-bind="ptm('bodyCell')">
<span v-if="responsiveLayout === 'stack'" class="p-column-title" v-bind="ptm('columnTitle')">{{ columnProp('header') }}</span>
<td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
<span v-if="responsiveLayout === 'stack'" class="p-column-title" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
<component v-if="column.children && column.children.body && !d_editing" :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" />
<component
v-else-if="column.children && column.children.editor && d_editing"
@ -18,7 +18,7 @@
/>
<component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" />
<template v-else-if="columnProp('selectionMode')">
<DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :pt="pt" />
<DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :column="column" :pt="pt" />
<DTCheckbox
v-else-if="columnProp('selectionMode') === 'multiple'"
:value="rowData"
@ -26,6 +26,7 @@
:rowCheckboxIconTemplate="column.children && column.children.rowcheckboxicon"
:aria-selected="selected ? true : undefined"
@change="toggleRowWithCheckbox($event, rowIndex)"
:column="column"
:pt="pt"
/>
</template>
@ -33,25 +34,25 @@
<component :is="column.children && column.children.rowreordericon ? column.children.rowreordericon : columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'" :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon')]" />
</template>
<template v-else-if="columnProp('expander')">
<button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="ptm('rowToggler')">
<button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPTOptions(column, 'rowToggler')">
<component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
<template v-else>
<span v-if="isRowExpanded && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" v-bind="ptm('rowTogglerIcon')" />
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
<span v-else-if="!isRowExpanded && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
<ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="ptm('rowTogglerIcon')" />
<ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
</template>
</button>
</template>
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
<button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="ptm('rowEditorInitButton')">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon" v-bind="ptm('rowEditorInitIcon')" />
<button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPTOptions(column, 'rowEditorInitButton')">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
</button>
<button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="ptm('rowEditorEditButton')">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon" v-bind="ptm('rowEditorEditIcon')" />
<button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorEditButton')">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon" v-bind="getColumnPTOptions(column, 'rowEditorEditIcon')" />
</button>
<button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="ptm('rowEditorCancelButton')">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon" v-bind="ptm('rowEditorCancelIcon')" />
<button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon" v-bind="getColumnPTOptions(column, 'rowEditorCancelIcon')" />
</button>
</template>
<template v-else>{{ resolveFieldData() }}</template>
@ -187,6 +188,18 @@ export default {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPTOptions(column, key) {
return this.ptmo(this.getColumnProp(column), key, {
props: column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
},
resolveFieldData() {
return ObjectUtils.resolveFieldData(this.rowData, this.field);
},

65
components/lib/datatable/ColumnFilter.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="containerClass" v-bind="ptm('columnFilter')">
<div v-if="display === 'row'" class="p-fluid p-column-filter-element" v-bind="{ ...filterInputProps, ...ptm('filterInput') }">
<div :class="containerClass" v-bind="getColumnPTOptions('columnFilter')">
<div v-if="display === 'row'" class="p-fluid p-column-filter-element" v-bind="{ ...filterInputProps, ...getColumnPTOptions('filterInput') }">
<component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
</div>
<button
@ -15,12 +15,12 @@
:class="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
@click="toggleMenu()"
@keydown="onToggleButtonKeyDown($event)"
v-bind="ptm('filterMenuButton')"
v-bind="getColumnPTOptions('filterMenuButton')"
>
<component :is="filterIconTemplate || 'FilterIcon'" />
</button>
<button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()" v-bind="ptm('headerFilterClearButton')">
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="ptm('filterClearIcon')" />
<button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()" v-bind="getColumnPTOptions('headerFilterClearButton')">
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPTOptions('filterClearIcon')" />
</button>
<Portal>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@ -35,11 +35,11 @@
@keydown.escape="hide"
@click="onContentClick"
@mousedown="onContentMouseDown"
v-bind="ptm('filterOverlay')"
v-bind="getColumnPTOptions('filterOverlay')"
>
<component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
<template v-if="display === 'row'">
<ul class="p-column-filter-row-items" v-bind="ptm('filterRowItems')">
<ul class="p-column-filter-row-items" v-bind="getColumnPTOptions('filterRowItems')">
<li
v-for="(matchMode, i) of matchModes"
:key="matchMode.label"
@ -49,16 +49,18 @@
@keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
:class="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
:tabindex="i === 0 ? '0' : null"
v-bind="ptm('filterRowItem')"
v-bind="getColumnPTOptions('filterRowItem')"
>
{{ matchMode.label }}
</li>
<li class="p-column-filter-separator" v-bind="ptm('filterSeparator')"></li>
<li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="ptm('filterRowItem')">{{ noFilterLabel }}</li>
<li class="p-column-filter-separator" v-bind="getColumnPTOptions('filterInput')"></li>
<li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPTOptions('filterRowItem')">
{{ noFilterLabel }}
</li>
</ul>
</template>
<template v-else>
<div v-if="isShowOperator" class="p-column-filter-operator" v-bind="ptm('filterOperator')">
<div v-if="isShowOperator" class="p-column-filter-operator" v-bind="getColumnPTOptions('filterOperator')">
<CFDropdown
:options="operatorOptions"
:modelValue="operator"
@ -67,11 +69,11 @@
optionLabel="label"
optionValue="value"
@update:modelValue="onOperatorChange($event)"
:pt="ptm('filterOperatorDropdown')"
:pt="getColumnPTOptions('filterOperatorDropdown')"
></CFDropdown>
</div>
<div class="p-column-filter-constraints" v-bind="ptm('filterConstraints')">
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint" v-bind="ptm('filterConstraint')">
<div class="p-column-filter-constraints" v-bind="getColumnPTOptions('filterConstraints')">
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint" v-bind="getColumnPTOptions('filterConstraint')">
<CFDropdown
v-if="isShowMatchModes"
:options="matchModes"
@ -81,37 +83,37 @@
optionValue="value"
:aria-label="filterConstraintAriaLabel"
@update:modelValue="onMenuMatchModeChange($event, i)"
:pt="ptm('filterMatchModeDropdown')"
:pt="getColumnPTOptions('filterMatchModeDropdown')"
></CFDropdown>
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
<div v-bind="ptm('filterRemove')">
<div v-bind="getColumnPTOptions('filterRemove')">
<CFButton
v-if="showRemoveIcon"
type="button"
class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
@click="removeConstraint(i)"
:label="removeRuleButtonLabel"
:pt="ptm('filterRemoveButton')"
:pt="getColumnPTOptions('filterRemoveButton')"
>
<template #icon="iconProps">
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="ptm('filterRemoveButton')['icon']" />
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterRemoveButton')['icon']" />
</template>
</CFButton>
</div>
</div>
</div>
<div v-if="isShowAddConstraint" class="p-column-filter-add-rule" v-bind="ptm('filterAddRule')">
<CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()" :pt="ptm('filterAddRuleButton')">
<div v-if="isShowAddConstraint" class="p-column-filter-add-rule" v-bind="getColumnPTOptions('filterAddRule')">
<CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()" :pt="getColumnPTOptions('filterAddRuleButton')">
<template #icon="iconProps">
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="ptm('filterAddRuleButton')['icon']" />
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterAddRuleButton')['icon']" />
</template>
</CFButton>
</div>
<div class="p-column-filter-buttonbar" v-bind="ptm('filterButtonbar')">
<CFButton v-if="!filterClearTemplate && showClearButton" type="button" class="p-button-outlined p-button-sm" :label="clearButtonLabel" @click="clearFilter" :pt="ptm('filterClearButton')"></CFButton>
<div class="p-column-filter-buttonbar" v-bind="getColumnPTOptions('filterButtonbar')">
<CFButton v-if="!filterClearTemplate && showClearButton" type="button" class="p-button-outlined p-button-sm" :label="clearButtonLabel" @click="clearFilter" :pt="getColumnPTOptions('filterClearButton')"></CFButton>
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
<template v-if="showApplyButton">
<CFButton v-if="!filterApplyTemplate" type="button" class="p-button-sm" :label="applyButtonLabel" @click="applyFilter()" v-bind="ptm('filterApplyButton')"></CFButton>
<CFButton v-if="!filterApplyTemplate" type="button" class="p-button-sm" :label="applyButtonLabel" @click="applyFilter()" v-bind="getColumnPTOptions('filterApplyButton')"></CFButton>
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
</template>
</div>
@ -245,7 +247,8 @@ export default {
filterInputProps: {
type: null,
default: null
}
},
column: null
},
data() {
return {
@ -281,6 +284,18 @@ export default {
}
},
methods: {
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
},
clearFilter() {
let _filters = { ...this.filters };

259
components/lib/datatable/DataTable.d.ts vendored
View File

@ -8,8 +8,6 @@
*
*/
import { InputHTMLAttributes, TableHTMLAttributes, VNode } from 'vue';
import { ButtonPassThroughOptionType } from '../button';
import { DropdownPassThroughOptionType } from '../dropdown';
import { PaginatorPassThroughOptionType } from '../paginator';
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
import { VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
@ -22,7 +20,6 @@ export declare type DataTablePassThroughOptionType = DataTablePassThroughAttribu
export interface DataTablePassThroughMethodOptions {
props: DataTableProps;
state: DataTableState;
context: DataTableContext;
}
/**
@ -590,128 +587,6 @@ export interface DataTablePassThroughOptions {
* Uses to pass attributes to the header row's DOM element.
*/
headerRow?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the header cell's DOM element.
*/
headerCell?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the column resizer's DOM element.
*/
columnResizer?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the header content's DOM element.
*/
headerContent?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the header title's DOM element.
*/
headerTitle?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the sort's DOM element.
*/
sort?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the sort badge's DOM element.
*/
sortBadge?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the header checkbox's DOM element.
*/
headerCheckbox?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the header checkbox icon's DOM element.
*/
headerCheckboxIcon?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the column filter's DOM element.
*/
columnFilter?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the filter input's DOM element.
*/
filterInput?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the filter menu button's DOM element.
*/
filterMenuButton?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the header filter clear button's DOM element.
*/
headerFilterClearButton?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the filter clear icon's DOM element.
*/
filterClearIcon?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the filter overlay's DOM element.
*/
filterOverlay?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the filter row items' DOM element.
*/
filterRowItems?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the filter row item's DOM element.
*/
filterRowItem?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the filter separator's DOM element.
*/
filterSeparator?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the filter operator's DOM element.
*/
filterOperator?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptionType}
*/
filterOperatorDropdown?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the filter constraints' DOM element.
*/
filterConstraints?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the filter constraint's DOM element.
*/
filterConstraint?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptionType}
*/
filterMatchModeDropdown?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the filter remove button container's DOM element.
*/
filterRemove?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterRemoveButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the filter add rule's DOM element.
*/
filterAddRule?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterAddRuleButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the filter buttonbar's DOM element.
*/
filterButtonbar?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterClearButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterApplyButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the tbody's DOM element.
*/
@ -720,18 +595,6 @@ export interface DataTablePassThroughOptions {
* Uses to pass attributes to the rowgroup header's DOM element.
*/
rowgroupHeader?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the body cell's DOM element.
*/
bodyCell?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the rowgroup toggler's DOM element.
*/
rowGroupToggler?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the rowgroup toggler icon's DOM element.
*/
rowGroupTogglerIcon?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the row's DOM element.
*/
@ -748,66 +611,6 @@ export interface DataTablePassThroughOptions {
* Uses to pass attributes to the empty message's DOM element.
*/
emptyMessage?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the column title's DOM element.
*/
columnTitle?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the radiobutton wrapper's DOM element.
*/
radiobuttonWrapper?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the radiobutton's DOM element.
*/
radiobutton?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the radiobutton icon's DOM element.
*/
radiobuttonIcon?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the checkbox wrapper's DOM element.
*/
checkboxWrapper?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the checkbox's DOM element.
*/
checkbox?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the checkbox icon's DOM element.
*/
checkboxIcon?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the rowtoggler's DOM element.
*/
rowToggler?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the rowtoggler icon's DOM element.
*/
rowTogglerIcon?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the row editor init button's DOM element.
*/
rowEditorInitButton?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the row editor init icon's DOM element.
*/
rowEditorInitIcon?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the row editor edit button's DOM element.
*/
rowEditorEditButton?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the row editor edit icon's DOM element.
*/
rowEditorEditIcon?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the row editor cancel button's DOM element.
*/
rowEditorCancelButton?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the row editor cancel icon's DOM element.
*/
rowEditorCancelIcon?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the tfoot's DOM element.
*/
@ -832,22 +635,6 @@ export interface DataTablePassThroughOptions {
* Uses to pass attributes to the reorder indicator down's DOM element.
*/
reorderIndicatorDown?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenHeaderInputWrapper?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the hidden input's DOM element.
*/
hiddenHeaderInput?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: DataTablePassThroughOptionType;
}
/**
@ -914,52 +701,6 @@ export interface DataTableState {
* @defaultValue false
*/
d_editing: boolean;
/**
* Current style of the body cell.
*/
styleObject: object;
/**
* Current filter overlay visible as a boolean.
*/
overlayVisible: boolean;
/**
* Current filter match mode.
*/
defaultMatchMode: string;
/**
* Current filter operator.
*/
defaultOperator: string;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current style of the rowgroup header.
*/
rowGroupHeaderStyleObject: object;
}
/**
* Defines current options in DataTable component.
*/
export interface DataTableContext {
/**
* Current checked state of row as a boolean.
* @defaultValue false
*/
checked: boolean;
/**
* Current focused state of row as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current disabled state of row as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
/**

2
components/lib/datatable/DataTable.vue
View File

@ -231,7 +231,7 @@
class="p-paginator-bottom"
@page="onPage($event)"
:alwaysShow="alwaysShowPaginator"
v-bind="ptm('paginator')"
:pt="ptm('paginator')"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>

14
components/lib/datatable/FooterCell.vue
View File

@ -1,5 +1,5 @@
<template>
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="ptm('footerCell')">
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('footerCell') }">
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
{{ columnProp('footer') }}
</td>
@ -37,6 +37,18 @@ export default {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');

26
components/lib/datatable/HeaderCell.vue
View File

@ -14,22 +14,23 @@
@dragover="onDragOver"
@dragleave="onDragLeave"
@drop="onDrop"
v-bind="ptm('headerCell')"
v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
>
<span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="ptm('columnResizer')"></span>
<div class="p-column-header-content" v-bind="ptm('headerContent')">
<span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
<div class="p-column-header-content" v-bind="getColumnPTOptions('headerContent')">
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" class="p-column-title" v-bind="ptm('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="ptm('sort')">
<span v-if="columnProp('header')" class="p-column-title" v-bind="{ ...getColumnPTOptions('headerTitle') }">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="{ ...getColumnPTOptions('sort') }">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
</span>
<span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="ptm('sortBadge')">{{ getBadgeValue() }}</span>
<span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="{ ...getColumnPTOptions('sortBadge') }">{{ getBadgeValue() }}</span>
<DTHeaderCheckbox
v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
:checked="allRowsSelected"
@change="onHeaderCheckboxChange"
:disabled="empty"
:headerCheckboxIconTemplate="headerCheckboxIconTemplate"
:column="column"
:pt="pt"
/>
<DTColumnFilter
@ -67,6 +68,7 @@
@constraint-remove="$emit('constraint-remove', $event)"
@apply-click="$emit('apply-click', $event)"
:pt="pt"
:column="column"
/>
</div>
</th>
@ -191,6 +193,18 @@ export default {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick(event) {
this.$emit('column-click', { originalEvent: event, column: this.column });
},

33
components/lib/datatable/HeaderCheckbox.vue
View File

@ -1,11 +1,21 @@
<template>
<div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': disabled }]" @click="onClick" @keydown.space.prevent="onClick" v-bind="ptm('headerCheckbox')">
<div class="p-hidden-accessible" v-bind="ptm('hiddenHeaderInputWrapper')">
<input ref="input" type="checkbox" :checked="checked" :disabled="disabled" :tabindex="disabled ? null : '0'" :aria-label="headerCheckboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" v-bind="ptm('hiddenHeaderInput')" />
<div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': disabled }]" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('headerCheckboxWrapper')">
<div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenHeaderInputWrapper')">
<input
ref="input"
type="checkbox"
:checked="checked"
:disabled="disabled"
:tabindex="disabled ? null : '0'"
:aria-label="headerCheckboxAriaLabel"
@focus="onFocus($event)"
@blur="onBlur($event)"
v-bind="getColumnPTOptions('hiddenHeaderInput')"
/>
</div>
<div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="getPTOptions('checkbox')">
<div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('headerCheckbox')">
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
<CheckIcon v-else class="p-checkbox-icon" v-bind="getPTOptions('headerCheckboxIcon')" />
<CheckIcon v-else class="p-checkbox-icon" v-bind="getColumnPTOptions('headerCheckboxIcon')" />
</div>
</div>
</template>
@ -22,6 +32,7 @@ export default {
props: {
checked: null,
disabled: null,
column: null,
headerCheckboxIconTemplate: {
type: Function,
default: null
@ -33,8 +44,13 @@ export default {
};
},
methods: {
getPTOptions(key) {
return this.ptm(key, {
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
checked: this.checked,
focused: this.focused,
@ -42,6 +58,9 @@ export default {
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick(event) {
if (!this.disabled) {
this.$emit('change', {

21
components/lib/datatable/RowCheckbox.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click="onClick" v-bind="ptm('checkboxWrapper')">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
<div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click="onClick" v-bind="getColumnPTOptions('checkboxWrapper')">
<div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenInputWrapper')">
<input
ref="input"
type="checkbox"
@ -14,9 +14,9 @@
v-bind="ptm('hiddenInput')"
/>
</div>
<div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getPTOptions('checkbox')">
<div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('checkbox')">
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
<CheckIcon v-else class="p-checkbox-icon" v-bind="getPTOptions('checkboxIcon')" />
<CheckIcon v-else class="p-checkbox-icon" v-bind="getColumnPTOptions('checkboxIcon')" />
</div>
</div>
</template>
@ -33,6 +33,7 @@ export default {
props: {
value: null,
checked: null,
column: null,
rowCheckboxIconTemplate: {
type: Function,
default: null
@ -44,8 +45,13 @@ export default {
};
},
methods: {
getPTOptions(key) {
return this.ptm(key, {
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
checked: this.checked,
focused: this.focused,
@ -53,6 +59,9 @@ export default {
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick(event) {
if (!this.$attrs.disabled) {
this.$emit('change', {

23
components/lib/datatable/RowRadioButton.vue
View File

@ -1,10 +1,10 @@
<template>
<div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick" v-bind="ptm('radiobuttonWrapper')">
<div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick" v-bind="getColumnPTOptions('radiobuttonWrapper')">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
<input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="ptm('hiddenInput')" />
<input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('hiddenInput')" />
</div>
<div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="ptm('radiobutton')">
<div class="p-radiobutton-icon" v-bind="ptm('radiobuttonIcon')"></div>
<div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('radiobutton')">
<div class="p-radiobutton-icon" v-bind="getColumnPTOptions('radiobuttonIcon')"></div>
</div>
</div>
</template>
@ -21,7 +21,8 @@ export default {
props: {
value: null,
checked: null,
name: null
name: null,
column: null
},
data() {
return {
@ -29,8 +30,13 @@ export default {
};
},
methods: {
getPTOptions(key) {
return this.ptm(key, {
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
checked: this.checked,
focused: this.focused,
@ -38,6 +44,9 @@ export default {
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick(event) {
if (!this.disabled) {
if (!this.checked) {

26
components/lib/datatable/TableBody.vue
View File

@ -10,14 +10,14 @@
role="row"
v-bind="ptm('rowgroupHeader')"
>
<td :colspan="columnsLength - 1" v-bind="ptm('bodyCell')">
<button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="ptm('rowGroupToggler')">
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
<button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPTOptions('rowGroupToggler')">
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
<template v-else>
<span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" class="p-row-toggler-icon" v-bind="ptm('rowGroupTogglerIcon')" />
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="ptm('rowGroupTogglerIcon')" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
</template>
</button>
<component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
@ -87,7 +87,7 @@
role="row"
v-bind="ptm('rowExpansion')"
>
<td :colspan="columnsLength">
<td :colspan="columnsLength" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
<component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
</td>
</tr>
@ -98,14 +98,14 @@
role="row"
v-bind="ptm('rowgroupFooter')"
>
<td :colspan="columnsLength - 1">
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
<component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
</td>
</tr>
</template>
</template>
<tr v-else class="p-datatable-emptymessage" role="row" v-bind="ptm('emptyMessage')">
<td :colspan="columnsLength">
<td :colspan="columnsLength" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
<component v-if="templates.empty" :is="templates.empty" />
</td>
</tr>
@ -301,6 +301,18 @@ export default {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
getColumnPTOptions(column, key) {
return this.ptmo(this.getColumnProp(column), key, {
props: column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
},
shouldRenderRowGroupHeader(value, rowData, i) {
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
let prevRowData = value[i - 1];

22
components/lib/datatable/TableHeader.vue
View File

@ -42,8 +42,13 @@
</tr>
<tr v-if="filterDisplay === 'row'" role="row" v-bind="ptm('headerRow')">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<th v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))" :style="getFilterColumnHeaderStyle(col)" :class="getFilterColumnHeaderClass(col)" v-bind="ptm('headerCell')">
<DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :pt="pt" />
<th
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
:style="getFilterColumnHeaderStyle(col)"
:class="getFilterColumnHeaderClass(col)"
v-bind="{ ...getColumnPTOptions(col, 'root'), ...getColumnPTOptions(col, 'headerCell') }"
>
<DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :pt="pt" />
<DTColumnFilter
v-if="col.children && col.children.filter"
:field="columnProp(col, 'filterField') || columnProp(col, 'field')"
@ -79,6 +84,7 @@
@constraint-remove="$emit('constraint-remove', $event)"
@apply-click="$emit('apply-click', $event)"
:pt="pt"
:column="col"
/>
</th>
</template>
@ -226,6 +232,18 @@ export default {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
getColumnPTOptions(column, key) {
return this.ptmo(this.getColumnProp(column), key, {
props: column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
},
getFilterColumnHeaderClass(column) {
return [
'p-filter-column',