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

Refactor #5592 - For DataTable

pull/5677/head
tugcekucukoglu 2024-05-02 12:58:00 +03:00
parent 3596026387
commit c2d1c57edf
8 changed files with 139 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,13 +139,13 @@ export interface ColumnPassThroughOptions {
*/ */
columnResizer?: ColumnPassThroughOptionType; columnResizer?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the header content's DOM element. * Used to pass attributes to the column header content's DOM element.
*/ */
headerContent?: ColumnPassThroughOptionType; columnHeaderContent?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the header title's DOM element. * Used to pass attributes to the header title's DOM element.
*/ */
headerTitle?: ColumnPassThroughOptionType; columnTitle?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the sort's DOM element. * Used to pass attributes to the sort's DOM element.
*/ */
@ -165,23 +165,23 @@ export interface ColumnPassThroughOptions {
/** /**
* Used to pass attributes to the column filter's DOM element. * Used to pass attributes to the column filter's DOM element.
*/ */
columnFilter?: ColumnPassThroughOptionType; filter?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter input's DOM element. * Used to pass attributes to the filter element container's DOM element.
*/ */
filterInput?: ColumnPassThroughOptionType; filterElementContainer?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter menu button's DOM element. * Used to pass attributes to the column filter button's DOM element.
*/ */
filterMenuButton?: ColumnPassThroughOptionType; columnFilterButton?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter menu icon's DOM element. * Used to pass attributes to the filter menu icon's DOM element.
*/ */
filterMenuIcon?: ColumnPassThroughOptionType; filterMenuIcon?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the header filter clear button's DOM element. * Used to pass attributes to the column filter clear button's DOM element.
*/ */
headerFilterClearButton?: ColumnPassThroughOptionType; columnFilterClearButton?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter clear icon's DOM element. * Used to pass attributes to the filter clear icon's DOM element.
*/ */
@ -191,17 +191,17 @@ export interface ColumnPassThroughOptions {
*/ */
filterOverlay?: ColumnPassThroughOptionType; filterOverlay?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter row items' DOM element. * Used to pass attributes to the filter constraint list's DOM element.
*/ */
filterRowItems?: ColumnPassThroughOptionType; filterConstraintList?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter row item's DOM element. * Used to pass attributes to the filter constraint's DOM element.
*/ */
filterRowItem?: ColumnPassThroughOptionType; filterConstraint?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter separator's DOM element. * Used to pass attributes to the filter constraint separator's DOM element.
*/ */
filterSeparator?: ColumnPassThroughOptionType; filterConstraintSeparator?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter operator's DOM element. * Used to pass attributes to the filter operator's DOM element.
*/ */
@ -212,18 +212,18 @@ export interface ColumnPassThroughOptions {
*/ */
filterOperatorDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>; filterOperatorDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter constraints' DOM element. * Used to pass attributes to the filter rule list' DOM element.
*/ */
filterConstraints?: ColumnPassThroughOptionType; filterRuleList?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter constraint's DOM element. * Used to pass attributes to the filter rule's DOM element.
*/ */
filterConstraint?: ColumnPassThroughOptionType; filterRule?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the Select component. * Used to pass attributes to the Select component.
* @see {@link SelectPassThroughOptionType} * @see {@link SelectPassThroughOptionType}
*/ */
filterMatchModeDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>; filterConstraintDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter remove button container's DOM element. * Used to pass attributes to the filter remove button container's DOM element.
*/ */
@ -232,16 +232,16 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
filterRemoveButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>; filterRemoveRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter add rule's DOM element. * Used to pass attributes to the filter add button container's DOM element.
*/ */
filterAddRule?: ColumnPassThroughOptionType; filterAddButtonContainer?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
filterAddRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>; filterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter buttonbar's DOM element. * Used to pass attributes to the filter buttonbar's DOM element.
*/ */
@ -256,22 +256,22 @@ export interface ColumnPassThroughOptions {
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
filterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>; filterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the row toggler button's DOM element.
*/
rowToggleButton?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the row toggler icon's DOM element.
*/
rowToggleIcon?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the body cell's DOM element. * Used to pass attributes to the body cell's DOM element.
*/ */
bodyCell?: ColumnPassThroughOptionType; bodyCell?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the rowgroup toggler's DOM element. * Used to pass attributes to the reorderable row handle's DOM element.
*/ */
rowGroupToggler?: ColumnPassThroughOptionType; reorderableRowHandle?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the rowgroup toggler icon's DOM element.
*/
rowGroupTogglerIcon?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the column title's DOM element.
*/
columnTitle?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the radiobutton's DOM element. * Used to pass attributes to the radiobutton's DOM element.
*/ */
@ -280,38 +280,18 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the checkbox's DOM element. * Used to pass attributes to the checkbox's DOM element.
*/ */
rowCheckbox?: CheckboxPassThroughOptionType; rowCheckbox?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the rowtoggler's DOM element.
*/
rowToggler?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the rowtoggler icon's DOM element.
*/
rowTogglerIcon?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the row editor init button's DOM element. * Used to pass attributes to the row editor init button's DOM element.
*/ */
rowEditorInitButton?: ColumnPassThroughOptionType; rowEditorInit?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the row editor init icon's DOM element.
*/
rowEditorInitIcon?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the row editor save button's DOM element. * Used to pass attributes to the row editor save button's DOM element.
*/ */
rowEditorSaveButton?: ColumnPassThroughOptionType; rowEditorSave?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the row editor save icon's DOM element.
*/
rowEditorSaveIcon?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the row editor cancel button's DOM element. * Used to pass attributes to the row editor cancel button's DOM element.
*/ */
rowEditorCancelButton?: ColumnPassThroughOptionType; rowEditorCancel?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the row editor cancel icon's DOM element.
*/
rowEditorCancelIcon?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the footer cell's DOM element. * Used to pass attributes to the footer cell's DOM element.
*/ */

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

@ -57,9 +57,9 @@
/> />
</template> </template>
<template v-else-if="columnProp('rowReorder')"> <template v-else-if="columnProp('rowReorder')">
<component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('rowReorderIcon')" /> <component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('reorderableRowHandle')" />
<i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" v-bind="getColumnPT('rowReorderIcon')" /> <i v-else-if="columnProp('rowReorderIcon')" :class="[cx('reorderableRowHandle'), columnProp('rowReorderIcon')]" v-bind="getColumnPT('reorderableRowHandle')" />
<BarsIcon v-else :class="cx('rowReorderIcon')" v-bind="getColumnPT('rowReorderIcon')" /> <BarsIcon v-else :class="cx('reorderableRowHandle')" v-bind="getColumnPT('reorderableRowHandle')" />
</template> </template>
<template v-else-if="columnProp('expander')"> <template v-else-if="columnProp('expander')">
<button <button
@ -85,41 +85,41 @@
<template v-else-if="editMode === 'row' && columnProp('rowEditor')"> <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
<Button <Button
v-if="!d_editing" v-if="!d_editing"
:class="cx('rowEditorInitButton')" :class="cx('rowEditorInit')"
:aria-label="initButtonAriaLabel" :aria-label="initButtonAriaLabel"
:unstyled="unstyled" :unstyled="unstyled"
@click="onRowEditInit" @click="onRowEditInit"
v-bind="{ ...getColumnPT('rowEditorInitButton'), ...editButtonProps.init }" v-bind="{ ...getColumnPT('rowEditorInit'), ...editButtonProps.init }"
data-pc-group-section="rowactionbutton" data-pc-group-section="rowactionbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="[cx('rowEditorInitIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorInitIcon')" /> <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorInit')['icon']" />
</template> </template>
</Button> </Button>
<Button <Button
v-if="d_editing" v-if="d_editing"
:class="cx('rowEditorSaveButton')" :class="cx('rowEditorSave')"
:aria-label="saveButtonAriaLabel" :aria-label="saveButtonAriaLabel"
:unstyled="unstyled" :unstyled="unstyled"
@click="onRowEditSave" @click="onRowEditSave"
v-bind="{ ...getColumnPT('rowEditorSaveButton'), ...editButtonProps.save }" v-bind="{ ...getColumnPT('rowEditorSave'), ...editButtonProps.save }"
data-pc-group-section="rowactionbutton" data-pc-group-section="rowactionbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="[cx('rowEditorSaveIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorSaveIcon')" /> <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorSave')['icon']" />
</template> </template>
</Button> </Button>
<Button <Button
v-if="d_editing" v-if="d_editing"
:class="cx('rowEditorCancelButton')" :class="cx('rowEditorCancel')"
:aria-label="cancelButtonAriaLabel" :aria-label="cancelButtonAriaLabel"
:unstyled="unstyled" :unstyled="unstyled"
@click="onRowEditCancel" @click="onRowEditCancel"
v-bind="{ ...getColumnPT('rowEditorCancelButton'), ...editButtonProps.cancel }" v-bind="{ ...getColumnPT('rowEditorCancel'), ...editButtonProps.cancel }"
data-pc-group-section="rowactionbutton" data-pc-group-section="rowactionbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="[cx('rowEditorCancelIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorCancelIcon')" /> <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorCancel')['icon']" />
</template> </template>
</Button> </Button>
</template> </template>

10
components/lib/datatable/BodyRow.vue
View File

@ -2,13 +2,13 @@
<template v-if="!empty"> <template v-if="!empty">
<tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader" :class="cx('rowGroupHeader')" :style="rowGroupHeaderStyle" role="row" v-bind="ptm('rowGroupHeader')"> <tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader" :class="cx('rowGroupHeader')" :style="rowGroupHeaderStyle" role="row" v-bind="ptm('rowGroupHeader')">
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }"> <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }">
<button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle" type="button" v-bind="ptm('rowGroupToggler')"> <button v-if="expandableRowGroups" :class="cx('rowToggleButton')" @click="onRowGroupToggle" type="button" v-bind="ptm('rowToggleButton')">
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded" /> <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded" />
<template v-else> <template v-else>
<span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" /> <span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowToggleIcon'), expandedRowIcon]" v-bind="ptm('rowToggleIcon')" />
<ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" /> <ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowToggleIcon')" v-bind="ptm('rowToggleIcon')" />
<span v-else-if="!isRowGroupExpanded && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" /> <span v-else-if="!isRowGroupExpanded && collapsedRowIcon" :class="[cx('rowToggleIcon'), collapsedRowIcon]" v-bind="ptm('rowToggleIcon')" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" /> <ChevronRightIcon v-else-if="!isRowGroupExpanded && !collapsedRowIcon" :class="cx('rowToggleIcon')" v-bind="ptm('rowToggleIcon')" />
</template> </template>
</button> </button>
<component :is="templates['groupheader']" :data="rowData" :index="rowIndex" /> <component :is="templates['groupheader']" :data="rowData" :index="rowIndex" />

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

@ -1,20 +1,20 @@
<template> <template>
<div :class="cx('columnFilter')" v-bind="getColumnPT('columnFilter')"> <div :class="cx('filter')" v-bind="getColumnPT('filter')">
<div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPT('filterInput') }"> <div v-if="display === 'row'" :class="cx('filterElementContainer')" v-bind="{ ...filterInputProps, ...getColumnPT('filterElementContainer') }">
<component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" /> <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
</div> </div>
<Button <Button
v-if="showMenuButton" v-if="showMenuButton"
ref="icon" ref="icon"
:aria-label="filterMenuButtonAriaLabel" :aria-label="columnFilterButtonAriaLabel"
aria-haspopup="true" aria-haspopup="true"
:aria-expanded="overlayVisible" :aria-expanded="overlayVisible"
:aria-controls="overlayId" :aria-controls="overlayId"
:class="cx('filterMenuButton')" :class="cx('columnFilterButton')"
:unstyled="unstyled" :unstyled="unstyled"
@click="toggleMenu($event)" @click="toggleMenu($event)"
@keydown="onToggleButtonKeyDown($event)" @keydown="onToggleButtonKeyDown($event)"
v-bind="{ ...getColumnPT('filterMenuButton', ptmFilterMenuParams), ...filterButtonProps.filter }" v-bind="{ ...getColumnPT('columnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" /> <component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
@ -22,10 +22,10 @@
</Button> </Button>
<Button <Button
v-if="showClearButton && display === 'row' && hasRowFilter()" v-if="showClearButton && display === 'row' && hasRowFilter()"
:class="cx('headerFilterClearButton')" :class="cx('columnFilterClearButton')"
:unstyled="unstyled" :unstyled="unstyled"
@click="clearFilter()" @click="clearFilter()"
v-bind="{ ...getColumnPT('headerFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }" v-bind="{ ...getColumnPT('columnFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" :class="slotProps.class" v-bind="getColumnPT('filterClearIcon')" /> <component :is="filterClearIconTemplate || 'FilterSlashIcon'" :class="slotProps.class" v-bind="getColumnPT('filterClearIcon')" />
@ -48,21 +48,21 @@
> >
<component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" /> <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
<template v-if="display === 'row'"> <template v-if="display === 'row'">
<ul :class="cx('filterRowItems')" v-bind="getColumnPT('filterRowItems')"> <ul :class="cx('filterConstraintList')" v-bind="getColumnPT('filterConstraintList')">
<li <li
v-for="(matchMode, i) of matchModes" v-for="(matchMode, i) of matchModes"
:key="matchMode.label" :key="matchMode.label"
:class="cx('filterRowItem', { matchMode })" :class="cx('filterConstraint', { matchMode })"
@click="onRowMatchModeChange(matchMode.value)" @click="onRowMatchModeChange(matchMode.value)"
@keydown="onRowMatchModeKeyDown($event)" @keydown="onRowMatchModeKeyDown($event)"
@keydown.enter.prevent="onRowMatchModeChange(matchMode.value)" @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
:tabindex="i === 0 ? '0' : null" :tabindex="i === 0 ? '0' : null"
v-bind="getColumnPT('filterRowItem', ptmFilterRowItemOptions(matchMode))" v-bind="getColumnPT('filterConstraint', ptmFilterConstraintOptions(matchMode))"
> >
{{ matchMode.label }} {{ matchMode.label }}
</li> </li>
<li :class="cx('filterSeparator')" v-bind="getColumnPT('filterSeparator')"></li> <li :class="cx('filterConstraintSeparator')" v-bind="getColumnPT('filterConstraintSeparator')"></li>
<li :class="cx('filterRowItem')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPT('filterRowItem')"> <li :class="cx('filterConstraint')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPT('filterConstraint')">
{{ noFilterLabel }} {{ noFilterLabel }}
</li> </li>
</ul> </ul>
@ -81,52 +81,43 @@
:pt="getColumnPT('filterOperatorDropdown')" :pt="getColumnPT('filterOperatorDropdown')"
></Select> ></Select>
</div> </div>
<div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')"> <div :class="cx('filterRuleList')" v-bind="getColumnPT('filterRuleList')">
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPT('filterConstraint')"> <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterRule')" v-bind="getColumnPT('filterRule')">
<Select <Select
v-if="isShowMatchModes" v-if="isShowMatchModes"
:options="matchModes" :options="matchModes"
:modelValue="fieldConstraint.matchMode" :modelValue="fieldConstraint.matchMode"
:class="cx('filterMatchModeDropdown')" :class="cx('filterConstraintDropdown')"
optionLabel="label" optionLabel="label"
optionValue="value" optionValue="value"
:aria-label="filterConstraintAriaLabel" :aria-label="filterRuleAriaLabel"
@update:modelValue="onMenuMatchModeChange($event, i)" @update:modelValue="onMenuMatchModeChange($event, i)"
:unstyled="unstyled" :unstyled="unstyled"
:pt="getColumnPT('filterMatchModeDropdown')" :pt="getColumnPT('filterConstraintDropdown')"
></Select> ></Select>
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" /> <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
<div v-bind="getColumnPT('filterRemove')"> <div v-bind="getColumnPT('filterRemove')">
<Button <Button
v-if="showRemoveIcon" v-if="showRemoveIcon"
type="button" type="button"
:class="cx('filterRemoveButton')" :class="cx('filterRemoveRuleButton')"
@click="removeConstraint(i)" @click="removeConstraint(i)"
:label="removeRuleButtonLabel" :label="removeRuleButtonLabel"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="filterButtonProps.popover.removeRule" v-bind="filterButtonProps.popover.removeRule"
:pt="getColumnPT('filterRemoveButton')" :pt="getColumnPT('filterRemoveRuleButton')"
> >
<template #icon="iconProps"> <template #icon="iconProps">
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveButton')['icon']" /> <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveRuleButton')['icon']" />
</template> </template>
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
<div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPT('filterAddRule')"> <div v-if="isShowAddConstraint" v-bind="getColumnPT('filterAddButtonContainer')">
<Button <Button type="button" :label="addRuleButtonLabel" iconPos="left" :class="cx('filterAddButton')" @click="addConstraint()" :unstyled="unstyled" v-bind="filterButtonProps.popover.addRule" :pt="getColumnPT('filterAddButton')">
type="button"
:label="addRuleButtonLabel"
iconPos="left"
:class="cx('filterAddRuleButton')"
@click="addConstraint()"
:unstyled="unstyled"
v-bind="filterButtonProps.popover.addRule"
:pt="getColumnPT('filterAddRuleButton')"
>
<template #icon="iconProps"> <template #icon="iconProps">
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddRuleButton')['icon']" /> <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddButton')['icon']" />
</template> </template>
</Button> </Button>
</div> </div>
@ -353,7 +344,7 @@ export default {
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
}, },
ptmFilterRowItemOptions(matchMode) { ptmFilterConstraintOptions(matchMode) {
return { return {
context: { context: {
highlighted: matchMode && this.isRowMatchModeSelected(matchMode.value) highlighted: matchMode && this.isRowMatchModeSelected(matchMode.value)
@ -516,19 +507,19 @@ export default {
findNextItem(item) { findNextItem(item) {
let nextItem = item.nextElementSibling; let nextItem = item.nextElementSibling;
if (nextItem) return DomHandler.getAttribute(nextItem, 'data-pc-section') === 'filterseparator' ? this.findNextItem(nextItem) : nextItem; if (nextItem) return DomHandler.getAttribute(nextItem, 'data-pc-section') === 'filterconstraintseparator' ? this.findNextItem(nextItem) : nextItem;
else return item.parentElement.firstElementChild; else return item.parentElement.firstElementChild;
}, },
findPrevItem(item) { findPrevItem(item) {
let prevItem = item.previousElementSibling; let prevItem = item.previousElementSibling;
if (prevItem) return DomHandler.getAttribute(prevItem, 'data-pc-section') === 'filterseparator' ? this.findPrevItem(prevItem) : prevItem; if (prevItem) return DomHandler.getAttribute(prevItem, 'data-pc-section') === 'filterconstraintseparator' ? this.findPrevItem(prevItem) : prevItem;
else return item.parentElement.lastElementChild; else return item.parentElement.lastElementChild;
}, },
hide() { hide() {
this.overlayVisible = false; this.overlayVisible = false;
DomHandler.focus(this.$refs.icon.$el); this.showMenuButton && DomHandler.focus(this.$refs.icon.$el);
}, },
onContentClick(event) { onContentClick(event) {
this.selfClick = true; this.selfClick = true;
@ -695,13 +686,13 @@ export default {
applyButtonLabel() { applyButtonLabel() {
return this.$primevue.config.locale ? this.$primevue.config.locale.apply : undefined; return this.$primevue.config.locale ? this.$primevue.config.locale.apply : undefined;
}, },
filterMenuButtonAriaLabel() { columnFilterButtonAriaLabel() {
return this.$primevue.config.locale ? (this.overlayVisible ? this.$primevue.config.locale.showFilterMenu : this.$primevue.config.locale.hideFilterMenu) : undefined; return this.$primevue.config.locale ? (this.overlayVisible ? this.$primevue.config.locale.showFilterMenu : this.$primevue.config.locale.hideFilterMenu) : undefined;
}, },
filterOperatorAriaLabel() { filterOperatorAriaLabel() {
return this.$primevue.config.locale ? this.$primevue.config.locale.filterOperator : undefined; return this.$primevue.config.locale ? this.$primevue.config.locale.filterOperator : undefined;
}, },
filterConstraintAriaLabel() { filterRuleAriaLabel() {
return this.$primevue.config.locale ? this.$primevue.config.locale.filterConstraint : undefined; return this.$primevue.config.locale ? this.$primevue.config.locale.filterConstraint : undefined;
}, },
ptmHeaderFilterClearParams() { ptmHeaderFilterClearParams() {

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

@ -658,9 +658,9 @@ export interface DataTablePassThroughOptions {
*/ */
root?: DataTablePassThroughOptionType; root?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the loading overlay's DOM element. * Used to pass attributes to the overlay's DOM element.
*/ */
loadingOverlay?: DataTablePassThroughOptionType; overlay?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the loading icon's DOM element. * Used to pass attributes to the loading icon's DOM element.
*/ */
@ -675,9 +675,9 @@ export interface DataTablePassThroughOptions {
*/ */
paginator?: PaginatorPassThroughOptionType<DataTableSharedPassThroughMethodOptions>; paginator?: PaginatorPassThroughOptionType<DataTableSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the wrapper's DOM element. * Used to pass attributes to the table container's DOM element.
*/ */
wrapper?: DataTablePassThroughOptionType; tableContainer?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the VirtualScroller component. * Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType} * @see {@link VirtualScrollerPassThroughOptionType}
@ -708,11 +708,11 @@ export interface DataTablePassThroughOptions {
*/ */
tbody?: DataTablePassThroughOptionType; tbody?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the rowgroup header's DOM element. * Used to pass attributes to the rowg roup header's DOM element.
*/ */
rowGroupHeader?: DataTablePassThroughOptionType; rowGroupHeader?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the rowgroup header cell's DOM element. * Used to pass attributes to the row group header cell's DOM element.
*/ */
rowGroupHeaderCell?: DataTablePassThroughOptionType; rowGroupHeaderCell?: DataTablePassThroughOptionType;
/** /**
@ -728,11 +728,11 @@ export interface DataTablePassThroughOptions {
*/ */
rowExpansionCell?: DataTablePassThroughOptionType; rowExpansionCell?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the rowgroup footer's DOM element. * Used to pass attributes to the row group footer's DOM element.
*/ */
rowGroupFooter?: DataTablePassThroughOptionType; rowGroupFooter?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the rowgroup footer cell's DOM element. * Used to pass attributes to the row group footer cell's DOM element.
*/ */
rowGroupFooterCell?: DataTablePassThroughOptionType; rowGroupFooterCell?: DataTablePassThroughOptionType;
/** /**
@ -752,17 +752,17 @@ export interface DataTablePassThroughOptions {
*/ */
footerRow?: DataTablePassThroughOptionType; footerRow?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the resize helper's DOM element. * Used to pass attributes to the column resize indicator's DOM element.
*/ */
resizeHelper?: DataTablePassThroughOptionType; columnResizeIndicator?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the reorder indicator up's DOM element. * Used to pass attributes to the row reorder indicator up's DOM element.
*/ */
reorderIndicatorUp?: DataTablePassThroughOptionType; rowReorderIndicatorUp?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the reorder indicator down's DOM element. * Used to pass attributes to the row reorder indicator down's DOM element.
*/ */
reorderIndicatorDown?: DataTablePassThroughOptionType; rowReorderIndicatorDown?: DataTablePassThroughOptionType;
/** /**
* Used to pass attributes to the ColumnGroup helper components. * Used to pass attributes to the ColumnGroup helper components.
*/ */

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

@ -1,7 +1,7 @@
<template> <template>
<div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptmi('root')"> <div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptmi('root')">
<slot></slot> <slot></slot>
<div v-if="loading" :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')"> <div v-if="loading" :class="cx('overlay')" v-bind="ptm('overlay')">
<slot v-if="$slots.loading" name="loading"></slot> <slot v-if="$slots.loading" name="loading"></slot>
<template v-else> <template v-else>
<component v-if="$slots.loadingicon" :is="$slots.loadingicon" :class="cx('loadingIcon')" /> <component v-if="$slots.loadingicon" :is="$slots.loadingicon" :class="cx('loadingIcon')" />
@ -52,7 +52,7 @@
<slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot> <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
</template> </template>
</DTPaginator> </DTPaginator>
<div :class="cx('wrapper')" :style="[sx('wrapper'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('wrapper')"> <div :class="cx('tableContainer')" :style="[sx('tableContainer'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('tableContainer')">
<DTVirtualScroller <DTVirtualScroller
ref="virtualScroller" ref="virtualScroller"
v-bind="virtualScrollerOptions" v-bind="virtualScrollerOptions"
@ -271,11 +271,11 @@
<slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot> <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
</template> </template>
</DTPaginator> </DTPaginator>
<div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div> <div ref="resizeHelper" :class="cx('columnResizeIndicator')" style="display: none" v-bind="ptm('columnResizeIndicator')"></div>
<span v-if="reorderableColumns" ref="reorderIndicatorUp" :class="cx('reorderIndicatorUp')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorUp')"> <span v-if="reorderableColumns" ref="reorderIndicatorUp" :class="cx('rowReorderIndicatorUp')" style="position: absolute; display: none" v-bind="ptm('rowReorderIndicatorUp')">
<component :is="$slots.reorderindicatorupicon || 'ArrowDownIcon'" /> <component :is="$slots.reorderindicatorupicon || 'ArrowDownIcon'" />
</span> </span>
<span v-if="reorderableColumns" ref="reorderIndicatorDown" :class="cx('reorderIndicatorDown')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorDown')"> <span v-if="reorderableColumns" ref="reorderIndicatorDown" :class="cx('rowReorderIndicatorDown')" style="position: absolute; display: none" v-bind="ptm('rowReorderIndicatorDown')">
<component :is="$slots.reorderindicatordownicon || 'ArrowUpIcon'" /> <component :is="$slots.reorderindicatordownicon || 'ArrowUpIcon'" />
</span> </span>
</div> </div>
@ -488,12 +488,12 @@ export default {
if ( if (
DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'columntitle' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'columnheadercontent' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' ||
(targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]') && !DomHandler.isClickable(event.target)) (targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="columnfilterbutton"]') && !DomHandler.isClickable(event.target))
) { ) {
DomHandler.clearSelection(); DomHandler.clearSelection();
@ -1307,7 +1307,7 @@ export default {
this.createStyleElement(); this.createStyleElement();
let innerHTML = ''; let innerHTML = '';
let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="wrapper"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`; let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="tablecontainer"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`;
widths.forEach((width, index) => { widths.forEach((width, index) => {
let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width; let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
@ -1501,7 +1501,7 @@ export default {
return null; return null;
}, },
onRowMouseDown(event) { onRowMouseDown(event) {
if (DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || DomHandler.getAttribute(event.target.parentElement, 'data-pc-section') === 'rowreordericon') event.currentTarget.draggable = true; if (DomHandler.getAttribute(event.target, 'data-pc-section') === 'reorderablerowhandle' || DomHandler.getAttribute(event.target.parentElement, 'data-pc-section') === 'reorderablerowhandle') event.currentTarget.draggable = true;
else event.currentTarget.draggable = false; else event.currentTarget.draggable = false;
}, },
onRowDragStart(e) { onRowDragStart(e) {
@ -1774,7 +1774,7 @@ export default {
this.createStyleElement(); this.createStyleElement();
let innerHTML = ''; let innerHTML = '';
let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="wrapper"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`; let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="tablecontainer"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]'} > table[data-pc-section="table"]`;
widths.forEach((width, index) => { widths.forEach((width, index) => {
let style = `width: ${width}px !important; max-width: ${width}px !important`; let style = `width: ${width}px !important; max-width: ${width}px !important`;
@ -1918,7 +1918,7 @@ export default {
DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce); DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.responsiveStyleElement); document.head.appendChild(this.responsiveStyleElement);
let tableSelector = `.p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`; let tableSelector = `.p-datatable-table-container ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
let selector = `.p-datatable[${this.attributeSelector}] > ${tableSelector}`; let selector = `.p-datatable[${this.attributeSelector}] > ${tableSelector}`;
let gridLinesSelector = `.p-datatable[${this.attributeSelector}].p-datatable-gridlines > ${tableSelector}`; let gridLinesSelector = `.p-datatable[${this.attributeSelector}].p-datatable-gridlines > ${tableSelector}`;
let innerHTML = ` let innerHTML = `

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

@ -23,9 +23,9 @@
:data-p-reorderable-column="reorderableColumns" :data-p-reorderable-column="reorderableColumns"
> >
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span> <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<div :class="cx('headerContent')" v-bind="getColumnPT('headerContent')"> <div :class="cx('columnHeaderContent')" v-bind="getColumnPT('columnHeaderContent')">
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" /> <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span> <span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')"> <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" /> <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
</span> </span>

61
components/lib/datatable/style/DataTableStyle.js
View File

@ -595,11 +595,11 @@ const classes = {
'p-datatable-lg': props.size === 'large' 'p-datatable-lg': props.size === 'large'
} }
], ],
loadingOverlay: 'p-datatable-mask p-component-overlay', overlay: 'p-datatable-mask p-component-overlay',
loadingIcon: 'p-datatable-loading-icon', loadingIcon: 'p-datatable-loading-icon',
header: 'p-datatable-header', header: 'p-datatable-header',
paginator: ({ position }) => 'p-datatable-paginator-' + position, paginator: ({ position }) => 'p-datatable-paginator-' + position,
wrapper: 'p-datatable-table-container', tableContainer: 'p-datatable-table-container',
table: ({ props }) => [ table: ({ props }) => [
'p-datatable-table', 'p-datatable-table',
{ {
@ -626,20 +626,20 @@ const classes = {
} }
], ],
columnResizer: 'p-datatable-column-resizer', columnResizer: 'p-datatable-column-resizer',
headerContent: 'p-datatable-column-header-content', columnHeaderContent: 'p-datatable-column-header-content',
headerTitle: 'p-datatable-column-title', columnTitle: 'p-datatable-column-title',
sortIcon: 'p-datatable-sort-icon', sortIcon: 'p-datatable-sort-icon',
sortBadge: 'p-datatable-sort-badge', sortBadge: 'p-datatable-sort-badge',
columnFilter: ({ props }) => [ filter: ({ props }) => [
'p-datatable-filter', 'p-datatable-filter',
{ {
'p-datatable-inline-filter': props.display === 'row', 'p-datatable-inline-filter': props.display === 'row',
'p-datatable-popover-filter': props.display === 'menu' 'p-datatable-popover-filter': props.display === 'menu'
} }
], ],
filterInput: 'p-datatable-filter-element-container', filterElementContainer: 'p-datatable-filter-element-container',
filterMenuButton: 'p-datatable-column-filter-button', columnFilterButton: 'p-datatable-column-filter-button',
headerFilterClearButton: 'p-datatable-column-filter-clear-button', columnFilterClearButton: 'p-datatable-column-filter-clear-button',
filterOverlay: ({ instance, props }) => [ filterOverlay: ({ instance, props }) => [
'p-datatable-filter-overlay p-component', 'p-datatable-filter-overlay p-component',
{ {
@ -647,29 +647,28 @@ const classes = {
'p-ripple-disabled': instance.$primevue.config.ripple === false 'p-ripple-disabled': instance.$primevue.config.ripple === false
} }
], ],
filterRowItems: 'p-datatable-filter-constraint-list', filterConstraintList: 'p-datatable-filter-constraint-list',
filterRowItem: ({ instance, matchMode }) => [ filterConstraint: ({ instance, matchMode }) => [
'p-datatable-filter-constraint', 'p-datatable-filter-constraint',
{ {
'p-datatable-filter-constraint-selected': matchMode && instance.isRowMatchModeSelected(matchMode.value) 'p-datatable-filter-constraint-selected': matchMode && instance.isRowMatchModeSelected(matchMode.value)
} }
], ],
filterSeparator: 'p-datatable-filter-constraint-separator', filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
filterOperator: 'p-datatable-filter-operator', filterOperator: 'p-datatable-filter-operator',
filterOperatorDropdown: 'p-datatable-filter-operator-dropdown', filterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
filterConstraints: 'p-datatable-filter-rule-list', filterConstraints: 'p-datatable-filter-rule-list',
filterConstraint: 'p-datatable-filter-rule', filterRule: 'p-datatable-filter-rule',
filterMatchModeDropdown: 'p-datatable-filter-constraint-dropdown', filterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
filterRemoveButton: 'p-datatable-filter-remove-rule-button', filterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
filterAddRule: 'p-datatable-filter-add-rule-button', //TODO: Remove filterAddButton: 'p-column-filter-add-button',
filterAddRuleButton: 'p-column-filter-add-button',
filterButtonbar: 'p-datatable-filter-buttonbar', filterButtonbar: 'p-datatable-filter-buttonbar',
filterClearButton: 'p-datatable-filter-clear-button', filterClearButton: 'p-datatable-filter-clear-button',
filterApplyButton: 'p-datatable-filter-apply-button', filterApplyButton: 'p-datatable-filter-apply-button',
tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'), tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
rowgroupHeader: 'p-datatable-row-group-header', rowGroupHeader: 'p-datatable-row-group-header',
rowGroupToggler: 'p-datatable-row-toggle-button', rowToggleButton: 'p-datatable-row-toggle-button',
rowGroupTogglerIcon: 'p-datatable-row-toggle-icon', rowToggleIcon: 'p-datatable-row-toggle-icon',
row: ({ instance, props, index, columnSelectionMode }) => { row: ({ instance, props, index, columnSelectionMode }) => {
let rowStyleClass = []; let rowStyleClass = [];
@ -694,23 +693,17 @@ const classes = {
return rowStyleClass; return rowStyleClass;
}, },
rowExpansion: 'p-datatable-row-expansion', rowExpansion: 'p-datatable-row-expansion',
rowgroupFooter: 'p-datatable-row-group-footer', rowGroupFooter: 'p-datatable-row-group-footer',
emptyMessage: 'p-datatable-empty-message', emptyMessage: 'p-datatable-empty-message',
bodyCell: ({ instance }) => [ bodyCell: ({ instance }) => [
{ {
'p-datatable-frozen-column': instance.columnProp('frozen') 'p-datatable-frozen-column': instance.columnProp('frozen')
} }
], ],
columnTitle: 'p-column-title', //TODO: Remove due to stacked mode reorderableRowHandle: 'p-datatable-reorderable-row-handle',
rowReorderIcon: 'p-datatable-reorderable-row-handle', rowEditorInit: 'p-datatable-row-editor-init',
rowToggler: 'p-datatable-row-toggle-button', rowEditorSave: 'p-datatable-row-editor-save',
rowTogglerIcon: 'p-datatable-row-toggle-icon', rowEditorCancel: 'p-datatable-row-editor-cancel',
rowEditorInitButton: 'p-datatable-row-editor-init',
rowEditorInitIcon: 'p-row-editor-init-icon', //TODO: Remove
rowEditorSaveButton: 'p-datatable-row-editor-save',
rowEditorSaveIcon: 'p-row-editor-save-icon', //TODO: Remove
rowEditorCancelButton: 'p-datatable-row-editor-cancel',
rowEditorCancelIcon: 'p-row-editor-cancel-icon', //TODO: Remove
tfoot: 'p-datatable-tfoot', tfoot: 'p-datatable-tfoot',
footerCell: ({ instance }) => [ footerCell: ({ instance }) => [
{ {
@ -719,13 +712,13 @@ const classes = {
], ],
virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer', virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
footer: 'p-datatable-footer', footer: 'p-datatable-footer',
resizeHelper: 'p-datatable-column-resize-indicator', columnResizeIndicator: 'p-datatable-column-resize-indicator',
reorderIndicatorUp: 'p-datatable-row-reorder-indicator-up', rowReorderIndicatorUp: 'p-datatable-row-reorder-indicator-up',
reorderIndicatorDown: 'p-datatable-row-reorder-indicator-down' rowReorderIndicatorDown: 'p-datatable-row-reorder-indicator-down'
}; };
const inlineStyles = { const inlineStyles = {
wrapper: { overflow: 'auto' }, tableContainer: { overflow: 'auto' },
thead: { position: 'sticky' }, thead: { position: 'sticky' },
tfoot: { position: 'sticky' } tfoot: { position: 'sticky' }
}; };