primevue 3.29.2 → 3.30.0

package/datatable/BodyCell.vue

@@ -1,9 +1,21 @@
 <template>
-    <td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
+    <td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('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="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
-        <span v-if="responsiveLayout === 'stack'" class="p-column-title" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
+    <td
+        v-else
+        :style="containerStyle"
+        :class="containerClass"
+        @click="onClick"
+        @keydown="onKeyDown"
+        role="cell"
+        v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }"
+        :data-p-selection-column="columnProp('selectionMode') != null"
+        :data-p-editable-column="isEditable()"
+        :data-p-cell-editing="d_editing"
+        :data-p-frozen-column="columnProp('frozen')"
+    >
+        <span v-if="responsiveLayout === 'stack'" :class="cx('columnTitle')" v-bind="getColumnPT('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 +30,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)" :column="column" :pt="pt" />
+            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :column="column" :index="index" :unstyled="unstyled" :pt="pt" />
             <DTCheckbox
                 v-else-if="columnProp('selectionMode') === 'multiple'"
                 :value="rowData"
@@ -27,32 +39,36 @@
                 :aria-selected="selected ? true : undefined"
                 @change="toggleRowWithCheckbox($event, rowIndex)"
                 :column="column"
+                :index="index"
+                :unstyled="unstyled"
                 :pt="pt"
             />
         </template>
         <template v-else-if="columnProp('rowReorder')">
-            <component :is="column.children && column.children.rowreordericon ? column.children.rowreordericon : columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'" :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon')]" />
+            <component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('rowReorderIcon')" />
+            <i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" />
+            <BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="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="getColumnPTOptions(column, 'rowToggler')">
+            <button v-ripple :class="cx('rowToggler')" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPT('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="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="getColumnPTOptions(column, 'rowTogglerIcon')" />
+                    <span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
+                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
+                    <span v-else-if="!isRowExpanded && collapsedRowIcon" :class="[cx('rowTogglerIcon'), collapsedRowIcon]" />
+                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('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="getColumnPTOptions(column, 'rowEditorInitButton')">
-                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
+            <button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPT('rowEditorInitButton')">
+                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPT('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="getColumnPTOptions(column, 'rowEditorEditButton')">
-                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon" v-bind="getColumnPTOptions(column, 'rowEditorEditIcon')" />
+            <button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPT('rowEditorSaveButton')">
+                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPT('rowEditorSaveIcon')" />
             </button>
-            <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 v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPT('rowEditorCancelButton')">
+                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPT('rowEditorCancelIcon')" />
             </button>
         </template>
         <template v-else>{{ resolveFieldData() }}</template>
@@ -75,6 +91,7 @@ import RowRadioButton from './RowRadioButton.vue';
 
 export default {
     name: 'BodyCell',
+    hostName: 'DataTable',
     extends: BaseComponent,
     emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
     props: {
@@ -188,17 +205,22 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
-        getColumnPTOptions(column, key) {
-            return this.ptmo(this.getColumnProp(column), key, {
-                props: column.props,
+        getColumnPT(key) {
+            const columnMetaData = {
+                props: this.column.props,
                 parent: {
                     props: this.$props,
                     state: this.$data
+                },
+                context: {
+                    index: this.index
                 }
-            });
+            };
+
+            return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
         },
-        getColumnProp(column) {
-            return column.props && column.props.pt ? column.props.pt : undefined; //@todo
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
         },
         resolveFieldData() {
             return ObjectUtils.resolveFieldData(this.rowData, this.field);
@@ -331,7 +353,7 @@ export default {
             if (element) {
                 let cell = element;
 
-                while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) {
+                while (cell && !DomHandler.getAttribute(cell, 'data-p-cell-editing')) {
                     cell = cell.parentElement;
                 }
 
@@ -352,7 +374,7 @@ export default {
             }
 
             if (prevCell) {
-                if (DomHandler.hasClass(prevCell, 'p-editable-column')) return prevCell;
+                if (DomHandler.getAttribute(prevCell, 'data-p-editable-column')) return prevCell;
                 else return this.findPreviousEditableColumn(prevCell);
             } else {
                 return null;
@@ -370,7 +392,7 @@ export default {
             }
 
             if (nextCell) {
-                if (DomHandler.hasClass(nextCell, 'p-editable-column')) return nextCell;
+                if (DomHandler.getAttribute(nextCell, 'data-p-editable-column')) return nextCell;
                 else return this.findNextEditableColumn(nextCell);
             } else {
                 return null;
@@ -443,16 +465,7 @@ export default {
             return this.columnProp('field');
         },
         containerClass() {
-            return [
-                this.columnProp('bodyClass'),
-                this.columnProp('class'),
-                {
-                    'p-selection-column': this.columnProp('selectionMode') != null,
-                    'p-editable-column': this.isEditable(),
-                    'p-cell-editing': this.d_editing,
-                    'p-frozen-column': this.columnProp('frozen')
-                }
-            ];
+            return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('bodyStyle');

package/datatable/ColumnFilter.vue

@@ -1,26 +1,25 @@
 <template>
-    <div :class="containerClass" v-bind="getColumnPTOptions('columnFilter')">
-        <div v-if="display === 'row'" class="p-fluid p-column-filter-element" v-bind="{ ...filterInputProps, ...getColumnPTOptions('filterInput') }">
+    <div :class="cx('columnFilter')" v-bind="getColumnPT('columnFilter')">
+        <div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPT('filterInput') }">
             <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
         </div>
         <button
             v-if="showMenuButton"
             ref="icon"
             type="button"
-            class="p-column-filter-menu-button p-link"
             :aria-label="filterMenuButtonAriaLabel"
             aria-haspopup="true"
             :aria-expanded="overlayVisible"
             :aria-controls="overlayId"
-            :class="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
-            @click="toggleMenu()"
+            :class="cx('filterMenuButton')"
+            @click="toggleMenu($event)"
             @keydown="onToggleButtonKeyDown($event)"
-            v-bind="getColumnPTOptions('filterMenuButton')"
+            v-bind="getColumnPT('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="getColumnPTOptions('headerFilterClearButton')">
-            <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPTOptions('filterClearIcon')" />
+        <button v-if="showClearButton && display === 'row'" :class="cx('headerFilterClearButton')" type="button" @click="clearFilter()" v-bind="getColumnPT('headerFilterClearButton')">
+            <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" />
         </button>
         <Portal>
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@@ -31,89 +30,121 @@
                     v-focustrap="{ autoFocus: true }"
                     :aria-modal="overlayVisible"
                     role="dialog"
-                    :class="overlayClass"
+                    :class="[cx('filterOverlay'), filterMenuClass]"
                     @keydown.escape="hide"
                     @click="onContentClick"
                     @mousedown="onContentMouseDown"
-                    v-bind="getColumnPTOptions('filterOverlay')"
+                    v-bind="getColumnPT('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="getColumnPTOptions('filterRowItems')">
+                        <ul :class="cx('filterRowItems')" v-bind="getColumnPT('filterRowItems')">
                             <li
                                 v-for="(matchMode, i) of matchModes"
                                 :key="matchMode.label"
-                                class="p-column-filter-row-item"
+                                :class="cx('filterRowItem', { matchMode })"
                                 @click="onRowMatchModeChange(matchMode.value)"
                                 @keydown="onRowMatchModeKeyDown($event)"
                                 @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
-                                :class="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
                                 :tabindex="i === 0 ? '0' : null"
-                                v-bind="getColumnPTOptions('filterRowItem')"
+                                v-bind="getColumnPT('filterRowItem')"
                             >
                                 {{ matchMode.label }}
                             </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')">
+                            <li :class="cx('filterSeparator')" v-bind="getColumnPT('filterSeparator')"></li>
+                            <li :class="cx('filterRowItem')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPT('filterRowItem')">
                                 {{ noFilterLabel }}
                             </li>
                         </ul>
                     </template>
                     <template v-else>
-                        <div v-if="isShowOperator" class="p-column-filter-operator" v-bind="getColumnPTOptions('filterOperator')">
+                        <div v-if="isShowOperator" :class="cx('filterOperator')" v-bind="getColumnPT('filterOperator')">
                             <CFDropdown
                                 :options="operatorOptions"
                                 :modelValue="operator"
                                 :aria-label="filterOperatorAriaLabel"
-                                class="p-column-filter-operator-dropdown"
+                                :class="cx('filterOperatorDropdown')"
                                 optionLabel="label"
                                 optionValue="value"
                                 @update:modelValue="onOperatorChange($event)"
-                                :pt="getColumnPTOptions('filterOperatorDropdown')"
+                                :unstyled="unstyled"
+                                :pt="getColumnPT('filterOperatorDropdown')"
+                                data-pc-section="filteroperatordropdown"
                             ></CFDropdown>
                         </div>
-                        <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')">
+                        <div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
+                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPT('filterConstraint')">
                                 <CFDropdown
                                     v-if="isShowMatchModes"
                                     :options="matchModes"
                                     :modelValue="fieldConstraint.matchMode"
-                                    class="p-column-filter-matchmode-dropdown"
+                                    :class="cx('filterMatchModeDropdown')"
                                     optionLabel="label"
                                     optionValue="value"
                                     :aria-label="filterConstraintAriaLabel"
                                     @update:modelValue="onMenuMatchModeChange($event, i)"
-                                    :pt="getColumnPTOptions('filterMatchModeDropdown')"
+                                    :unstyled="unstyled"
+                                    :pt="getColumnPT('filterMatchModeDropdown')"
+                                    data-pc-section="filtermatchmodedropdown"
                                 ></CFDropdown>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
-                                <div v-bind="getColumnPTOptions('filterRemove')">
+                                <div v-bind="getColumnPT('filterRemove')">
                                     <CFButton
                                         v-if="showRemoveIcon"
                                         type="button"
-                                        class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
+                                        :class="cx('filterRemoveButton')"
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
-                                        :pt="getColumnPTOptions('filterRemoveButton')"
+                                        :unstyled="unstyled"
+                                        :pt="getColumnPT('filterRemoveButton')"
+                                        data-pc-section="filterremovebutton"
                                     >
                                         <template #icon="iconProps">
-                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterRemoveButton')['icon']" />
+                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveButton')['icon']" />
                                         </template>
                                     </CFButton>
                                 </div>
                             </div>
                         </div>
-                        <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')">
+                        <div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPT('filterAddRule')">
+                            <CFButton
+                                type="button"
+                                :label="addRuleButtonLabel"
+                                iconPos="left"
+                                :class="cx('filterAddRuleButton')"
+                                @click="addConstraint()"
+                                :unstyled="unstyled"
+                                :pt="getColumnPT('filterAddRuleButton')"
+                                data-pc-section="filteraddrulebutton"
+                            >
                                 <template #icon="iconProps">
-                                    <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterAddRuleButton')['icon']" />
+                                    <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddRuleButton')['icon']" />
                                 </template>
                             </CFButton>
                         </div>
-                        <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>
+                        <div :class="cx('filterButtonbar')" v-bind="getColumnPT('filterButtonbar')">
+                            <CFButton
+                                v-if="!filterClearTemplate && showClearButton"
+                                type="button"
+                                :class="cx('filterClearButton')"
+                                :label="clearButtonLabel"
+                                @click="clearFilter"
+                                :unstyled="unstyled"
+                                :pt="getColumnPT('filterClearButton')"
+                                data-pc-section="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="getColumnPTOptions('filterApplyButton')"></CFButton>
+                                <CFButton
+                                    v-if="!filterApplyTemplate"
+                                    type="button"
+                                    :class="cx('filterApplyButton')"
+                                    :label="applyButtonLabel"
+                                    @click="applyFilter()"
+                                    :unstyled="unstyled"
+                                    :pt="getColumnPT('filterApplyButton')"
+                                    data-pc-section="filterapplybutton"
+                                ></CFButton>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
                         </div>
@@ -141,6 +172,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
 
 export default {
     name: 'ColumnFilter',
+    hostName: 'DataTable',
     extends: BaseComponent,
     emits: ['filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
     props: {
@@ -284,7 +316,7 @@ export default {
         }
     },
     methods: {
-        getColumnPTOptions(key) {
+        getColumnPT(key) {
             return this.ptmo(this.getColumnProp(), key, {
                 props: this.column.props,
                 parent: {
@@ -341,15 +373,17 @@ export default {
 
             return true;
         },
-        toggleMenu() {
+        toggleMenu(event) {
             this.overlayVisible = !this.overlayVisible;
+
+            event.preventDefault();
         },
         onToggleButtonKeyDown(event) {
             switch (event.code) {
                 case 'Enter':
                 case 'Space':
-                    this.toggleMenu();
-                    event.preventDefault();
+                    this.toggleMenu(event);
+
                     break;
 
                 case 'Escape':
@@ -449,13 +483,13 @@ export default {
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem) return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;
+            if (nextItem) return DomHandler.getAttribute(nextItem, 'data-pc-section') === 'filterseparator' ? this.findNextItem(nextItem) : nextItem;
             else return item.parentElement.firstElementChild;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem) return DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;
+            if (prevItem) return DomHandler.getAttribute(prevItem, 'data-pc-section') === 'filterseparator' ? this.findPrevItem(prevItem) : prevItem;
             else return item.parentElement.lastElementChild;
         },
         hide() {
@@ -480,6 +514,7 @@ export default {
             }
 
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
+            DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
             DomHandler.absolutePosition(this.overlay, this.$refs.icon);
             this.bindOutsideClickListener();
             this.bindScrollListener();
@@ -571,26 +606,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-column-filter p-fluid',
-                {
-                    'p-column-filter-row': this.display === 'row',
-                    'p-column-filter-menu': this.display === 'menu'
-                }
-            ];
-        },
-        overlayClass() {
-            return [
-                this.filterMenuClass,
-                {
-                    'p-column-filter-overlay p-component p-fluid': true,
-                    'p-column-filter-overlay-menu': this.display === 'menu',
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }
-            ];
-        },
         showMenuButton() {
             return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
         },

package/datatable/DataTable.d.ts

@@ -8,7 +8,11 @@
  *
  */
 import { InputHTMLAttributes, TableHTMLAttributes, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { ColumnPassThroughOptionType } from '../column';
+import { ColumnGroupPassThroughOptionType } from '../columngroup';
 import { PaginatorPassThroughOptionType } from '../paginator';
+import { RowPassThroughOptionType } from '../row';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 import { VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
@@ -18,6 +22,7 @@ export declare type DataTablePassThroughOptionType = DataTablePassThroughAttribu
  * Custom passthrough(pt) option method.
  */
 export interface DataTablePassThroughMethodOptions {
+    instance: any;
     props: DataTableProps;
     state: DataTableState;
 }
@@ -594,11 +599,11 @@ export interface DataTablePassThroughOptions {
     /**
      * Uses to pass attributes to the rowgroup header's DOM element.
      */
-    rowgroupHeader?: DataTablePassThroughOptionType;
+    rowGroupHeader?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the row's DOM element.
+     * Uses to pass attributes to the body row's DOM element.
      */
-    row?: DataTablePassThroughOptionType;
+    bodyRow?: DataTablePassThroughOptionType;
     /**
      * Uses to pass attributes to the row expansion's DOM element.
      */
@@ -606,7 +611,7 @@ export interface DataTablePassThroughOptions {
     /**
      * Uses to pass attributes to the rowgroup footer's DOM element.
      */
-    rowgroupFooter?: DataTablePassThroughOptionType;
+    rowGroupFooter?: DataTablePassThroughOptionType;
     /**
      * Uses to pass attributes to the empty message's DOM element.
      */
@@ -619,10 +624,6 @@ export interface DataTablePassThroughOptions {
      * Uses to pass attributes to the footerr ow's DOM element.
      */
     footerRow?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the footer cell's DOM element.
-     */
-    footerCell?: DataTablePassThroughOptionType;
     /**
      * Uses to pass attributes to the resize helper's DOM element.
      */
@@ -635,6 +636,23 @@ export interface DataTablePassThroughOptions {
      * Uses to pass attributes to the reorder indicator down's DOM element.
      */
     reorderIndicatorDown?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the ColumnGroup helper components.
+     */
+    columnGroup?: ColumnGroupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Row helper components.
+     */
+    row?: RowPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Column helper components.
+     */
+    column?: ColumnPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -1016,6 +1034,11 @@ export interface DataTableProps {
      * @type {DataTablePassThroughOptions}
      */
     pt?: DataTablePassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**