From c2d1c57edff4643ce59dbfda0215afc242f907cf Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 2 May 2024 12:58:00 +0300
Subject: [PATCH] Refactor #5592 - For DataTable

---
 components/lib/column/Column.d.ts             | 96 ++++++++-----------
 components/lib/datatable/BodyCell.vue         | 24 ++---
 components/lib/datatable/BodyRow.vue          | 10 +-
 components/lib/datatable/ColumnFilter.vue     | 67 ++++++-------
 components/lib/datatable/DataTable.d.ts       | 28 +++---
 components/lib/datatable/DataTable.vue        | 24 ++---
 components/lib/datatable/HeaderCell.vue       |  4 +-
 .../lib/datatable/style/DataTableStyle.js     | 61 ++++++------
 8 files changed, 139 insertions(+), 175 deletions(-)

diff --git a/components/lib/column/Column.d.ts b/components/lib/column/Column.d.ts
index 03c567529..fa386dc03 100755
--- a/components/lib/column/Column.d.ts
+++ b/components/lib/column/Column.d.ts
@@ -139,13 +139,13 @@ export interface ColumnPassThroughOptions {
      */
     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.
      */
-    headerTitle?: ColumnPassThroughOptionType;
+    columnTitle?: ColumnPassThroughOptionType;
     /**
      * 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.
      */
-    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.
      */
     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.
      */
@@ -191,17 +191,17 @@ export interface ColumnPassThroughOptions {
      */
     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.
      */
@@ -212,18 +212,18 @@ export interface ColumnPassThroughOptions {
      */
     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.
      * @see {@link SelectPassThroughOptionType}
      */
-    filterMatchModeDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
+    filterConstraintDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
     /**
      * 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.
      * @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.
      * @see {@link ButtonPassThroughOptions}
      */
-    filterAddRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
+    filterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter buttonbar's DOM element.
      */
@@ -256,22 +256,22 @@ export interface ColumnPassThroughOptions {
      * @see {@link ButtonPassThroughOptions}
      */
     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.
      */
     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;
-    /**
-     * 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;
+    reorderableRowHandle?: ColumnPassThroughOptionType;
     /**
      * 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.
      */
     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.
      */
-    rowEditorInitButton?: ColumnPassThroughOptionType;
-    /**
-     * Used to pass attributes to the row editor init icon's DOM element.
-     */
-    rowEditorInitIcon?: ColumnPassThroughOptionType;
+    rowEditorInit?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the row editor save button's DOM element.
      */
-    rowEditorSaveButton?: ColumnPassThroughOptionType;
-    /**
-     * Used to pass attributes to the row editor save icon's DOM element.
-     */
-    rowEditorSaveIcon?: ColumnPassThroughOptionType;
+    rowEditorSave?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the row editor cancel button's DOM element.
      */
-    rowEditorCancelButton?: ColumnPassThroughOptionType;
-    /**
-     * Used to pass attributes to the row editor cancel icon's DOM element.
-     */
-    rowEditorCancelIcon?: ColumnPassThroughOptionType;
+    rowEditorCancel?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the footer cell's DOM element.
      */
diff --git a/components/lib/datatable/BodyCell.vue b/components/lib/datatable/BodyCell.vue
index b4718c323..a8d331038 100755
--- a/components/lib/datatable/BodyCell.vue
+++ b/components/lib/datatable/BodyCell.vue
@@ -57,9 +57,9 @@
             />
         </template>
         <template v-else-if="columnProp('rowReorder')">
-            <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')]" v-bind="getColumnPT('rowReorderIcon')" />
-            <BarsIcon v-else :class="cx('rowReorderIcon')" v-bind="getColumnPT('rowReorderIcon')" />
+            <component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('reorderableRowHandle')" />
+            <i v-else-if="columnProp('rowReorderIcon')" :class="[cx('reorderableRowHandle'), columnProp('rowReorderIcon')]" v-bind="getColumnPT('reorderableRowHandle')" />
+            <BarsIcon v-else :class="cx('reorderableRowHandle')" v-bind="getColumnPT('reorderableRowHandle')" />
         </template>
         <template v-else-if="columnProp('expander')">
             <button
@@ -85,41 +85,41 @@
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
             <Button
                 v-if="!d_editing"
-                :class="cx('rowEditorInitButton')"
+                :class="cx('rowEditorInit')"
                 :aria-label="initButtonAriaLabel"
                 :unstyled="unstyled"
                 @click="onRowEditInit"
-                v-bind="{ ...getColumnPT('rowEditorInitButton'), ...editButtonProps.init }"
+                v-bind="{ ...getColumnPT('rowEditorInit'), ...editButtonProps.init }"
                 data-pc-group-section="rowactionbutton"
             >
                 <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>
             </Button>
             <Button
                 v-if="d_editing"
-                :class="cx('rowEditorSaveButton')"
+                :class="cx('rowEditorSave')"
                 :aria-label="saveButtonAriaLabel"
                 :unstyled="unstyled"
                 @click="onRowEditSave"
-                v-bind="{ ...getColumnPT('rowEditorSaveButton'), ...editButtonProps.save }"
+                v-bind="{ ...getColumnPT('rowEditorSave'), ...editButtonProps.save }"
                 data-pc-group-section="rowactionbutton"
             >
                 <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>
             </Button>
             <Button
                 v-if="d_editing"
-                :class="cx('rowEditorCancelButton')"
+                :class="cx('rowEditorCancel')"
                 :aria-label="cancelButtonAriaLabel"
                 :unstyled="unstyled"
                 @click="onRowEditCancel"
-                v-bind="{ ...getColumnPT('rowEditorCancelButton'), ...editButtonProps.cancel }"
+                v-bind="{ ...getColumnPT('rowEditorCancel'), ...editButtonProps.cancel }"
                 data-pc-group-section="rowactionbutton"
             >
                 <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>
             </Button>
         </template>
diff --git a/components/lib/datatable/BodyRow.vue b/components/lib/datatable/BodyRow.vue
index 88f16ea86..4b8fcbd1a 100644
--- a/components/lib/datatable/BodyRow.vue
+++ b/components/lib/datatable/BodyRow.vue
@@ -2,13 +2,13 @@
     <template v-if="!empty">
         <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') }">
-                <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" />
                     <template v-else>
-                        <span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
-                        <ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
-                        <span v-else-if="!isRowGroupExpanded && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
-                        <ChevronRightIcon v-else-if="!isRowGroupExpanded && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" 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('rowToggleIcon')" v-bind="ptm('rowToggleIcon')" />
+                        <span v-else-if="!isRowGroupExpanded && collapsedRowIcon" :class="[cx('rowToggleIcon'), collapsedRowIcon]" v-bind="ptm('rowToggleIcon')" />
+                        <ChevronRightIcon v-else-if="!isRowGroupExpanded && !collapsedRowIcon" :class="cx('rowToggleIcon')" v-bind="ptm('rowToggleIcon')" />
                     </template>
                 </button>
                 <component :is="templates['groupheader']" :data="rowData" :index="rowIndex" />
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index 759ea9ac6..5a1ce5cb6 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -1,20 +1,20 @@
 <template>
-    <div :class="cx('columnFilter')" v-bind="getColumnPT('columnFilter')">
-        <div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPT('filterInput') }">
+    <div :class="cx('filter')" v-bind="getColumnPT('filter')">
+        <div v-if="display === 'row'" :class="cx('filterElementContainer')" v-bind="{ ...filterInputProps, ...getColumnPT('filterElementContainer') }">
             <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
         </div>
         <Button
             v-if="showMenuButton"
             ref="icon"
-            :aria-label="filterMenuButtonAriaLabel"
+            :aria-label="columnFilterButtonAriaLabel"
             aria-haspopup="true"
             :aria-expanded="overlayVisible"
             :aria-controls="overlayId"
-            :class="cx('filterMenuButton')"
+            :class="cx('columnFilterButton')"
             :unstyled="unstyled"
             @click="toggleMenu($event)"
             @keydown="onToggleButtonKeyDown($event)"
-            v-bind="{ ...getColumnPT('filterMenuButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
+            v-bind="{ ...getColumnPT('columnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
         >
             <template #icon="slotProps">
                 <component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
@@ -22,10 +22,10 @@
         </Button>
         <Button
             v-if="showClearButton && display === 'row' && hasRowFilter()"
-            :class="cx('headerFilterClearButton')"
+            :class="cx('columnFilterClearButton')"
             :unstyled="unstyled"
             @click="clearFilter()"
-            v-bind="{ ...getColumnPT('headerFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
+            v-bind="{ ...getColumnPT('columnFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
         >
             <template #icon="slotProps">
                 <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" />
                     <template v-if="display === 'row'">
-                        <ul :class="cx('filterRowItems')" v-bind="getColumnPT('filterRowItems')">
+                        <ul :class="cx('filterConstraintList')" v-bind="getColumnPT('filterConstraintList')">
                             <li
                                 v-for="(matchMode, i) of matchModes"
                                 :key="matchMode.label"
-                                :class="cx('filterRowItem', { matchMode })"
+                                :class="cx('filterConstraint', { matchMode })"
                                 @click="onRowMatchModeChange(matchMode.value)"
                                 @keydown="onRowMatchModeKeyDown($event)"
                                 @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
                                 :tabindex="i === 0 ? '0' : null"
-                                v-bind="getColumnPT('filterRowItem', ptmFilterRowItemOptions(matchMode))"
+                                v-bind="getColumnPT('filterConstraint', ptmFilterConstraintOptions(matchMode))"
                             >
                                 {{ matchMode.label }}
                             </li>
-                            <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')">
+                            <li :class="cx('filterConstraintSeparator')" v-bind="getColumnPT('filterConstraintSeparator')"></li>
+                            <li :class="cx('filterConstraint')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPT('filterConstraint')">
                                 {{ noFilterLabel }}
                             </li>
                         </ul>
@@ -81,52 +81,43 @@
                                 :pt="getColumnPT('filterOperatorDropdown')"
                             ></Select>
                         </div>
-                        <div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
-                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPT('filterConstraint')">
+                        <div :class="cx('filterRuleList')" v-bind="getColumnPT('filterRuleList')">
+                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterRule')" v-bind="getColumnPT('filterRule')">
                                 <Select
                                     v-if="isShowMatchModes"
                                     :options="matchModes"
                                     :modelValue="fieldConstraint.matchMode"
-                                    :class="cx('filterMatchModeDropdown')"
+                                    :class="cx('filterConstraintDropdown')"
                                     optionLabel="label"
                                     optionValue="value"
-                                    :aria-label="filterConstraintAriaLabel"
+                                    :aria-label="filterRuleAriaLabel"
                                     @update:modelValue="onMenuMatchModeChange($event, i)"
                                     :unstyled="unstyled"
-                                    :pt="getColumnPT('filterMatchModeDropdown')"
+                                    :pt="getColumnPT('filterConstraintDropdown')"
                                 ></Select>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
                                 <div v-bind="getColumnPT('filterRemove')">
                                     <Button
                                         v-if="showRemoveIcon"
                                         type="button"
-                                        :class="cx('filterRemoveButton')"
+                                        :class="cx('filterRemoveRuleButton')"
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
                                         :unstyled="unstyled"
                                         v-bind="filterButtonProps.popover.removeRule"
-                                        :pt="getColumnPT('filterRemoveButton')"
+                                        :pt="getColumnPT('filterRemoveRuleButton')"
                                     >
                                         <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>
                                     </Button>
                                 </div>
                             </div>
                         </div>
-                        <div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPT('filterAddRule')">
-                            <Button
-                                type="button"
-                                :label="addRuleButtonLabel"
-                                iconPos="left"
-                                :class="cx('filterAddRuleButton')"
-                                @click="addConstraint()"
-                                :unstyled="unstyled"
-                                v-bind="filterButtonProps.popover.addRule"
-                                :pt="getColumnPT('filterAddRuleButton')"
-                            >
+                        <div v-if="isShowAddConstraint" v-bind="getColumnPT('filterAddButtonContainer')">
+                            <Button type="button" :label="addRuleButtonLabel" iconPos="left" :class="cx('filterAddButton')" @click="addConstraint()" :unstyled="unstyled" v-bind="filterButtonProps.popover.addRule" :pt="getColumnPT('filterAddButton')">
                                 <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>
                             </Button>
                         </div>
@@ -353,7 +344,7 @@ export default {
         getColumnProp() {
             return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
         },
-        ptmFilterRowItemOptions(matchMode) {
+        ptmFilterConstraintOptions(matchMode) {
             return {
                 context: {
                     highlighted: matchMode && this.isRowMatchModeSelected(matchMode.value)
@@ -516,19 +507,19 @@ export default {
         findNextItem(item) {
             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;
         },
         findPrevItem(item) {
             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;
         },
         hide() {
             this.overlayVisible = false;
 
-            DomHandler.focus(this.$refs.icon.$el);
+            this.showMenuButton && DomHandler.focus(this.$refs.icon.$el);
         },
         onContentClick(event) {
             this.selfClick = true;
@@ -695,13 +686,13 @@ export default {
         applyButtonLabel() {
             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;
         },
         filterOperatorAriaLabel() {
             return this.$primevue.config.locale ? this.$primevue.config.locale.filterOperator : undefined;
         },
-        filterConstraintAriaLabel() {
+        filterRuleAriaLabel() {
             return this.$primevue.config.locale ? this.$primevue.config.locale.filterConstraint : undefined;
         },
         ptmHeaderFilterClearParams() {
diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
index 9b6962be7..e93be3380 100755
--- a/components/lib/datatable/DataTable.d.ts
+++ b/components/lib/datatable/DataTable.d.ts
@@ -658,9 +658,9 @@ export interface DataTablePassThroughOptions {
      */
     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.
      */
@@ -675,9 +675,9 @@ export interface DataTablePassThroughOptions {
      */
     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.
      * @see {@link VirtualScrollerPassThroughOptionType}
@@ -708,11 +708,11 @@ export interface DataTablePassThroughOptions {
      */
     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;
     /**
-     * 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;
     /**
@@ -728,11 +728,11 @@ export interface DataTablePassThroughOptions {
      */
     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;
     /**
-     * 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;
     /**
@@ -752,17 +752,17 @@ export interface DataTablePassThroughOptions {
      */
     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.
      */
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index f0830aee9..c527eb6ff 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptmi('root')">
         <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>
             <template v-else>
                 <component v-if="$slots.loadingicon" :is="$slots.loadingicon" :class="cx('loadingIcon')" />
@@ -52,7 +52,7 @@
                 <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
             </template>
         </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
                 ref="virtualScroller"
                 v-bind="virtualScrollerOptions"
@@ -271,11 +271,11 @@
                 <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
             </template>
         </DTPaginator>
-        <div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div>
-        <span v-if="reorderableColumns" ref="reorderIndicatorUp" :class="cx('reorderIndicatorUp')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorUp')">
+        <div ref="resizeHelper" :class="cx('columnResizeIndicator')" style="display: none" v-bind="ptm('columnResizeIndicator')"></div>
+        <span v-if="reorderableColumns" ref="reorderIndicatorUp" :class="cx('rowReorderIndicatorUp')" style="position: absolute; display: none" v-bind="ptm('rowReorderIndicatorUp')">
             <component :is="$slots.reorderindicatorupicon || 'ArrowDownIcon'" />
         </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'" />
         </span>
     </div>
@@ -488,12 +488,12 @@ export default {
 
                 if (
                     DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
-                    DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' ||
-                    DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' ||
+                    DomHandler.getAttribute(targetNode, 'data-pc-section') === 'columntitle' ||
+                    DomHandler.getAttribute(targetNode, 'data-pc-section') === 'columnheadercontent' ||
                     DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
                     DomHandler.getAttribute(targetNode.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();
 
@@ -1307,7 +1307,7 @@ export default {
             this.createStyleElement();
 
             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) => {
                 let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
@@ -1501,7 +1501,7 @@ export default {
             return null;
         },
         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;
         },
         onRowDragStart(e) {
@@ -1774,7 +1774,7 @@ export default {
             this.createStyleElement();
 
             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) => {
                 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);
                 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 gridLinesSelector = `.p-datatable[${this.attributeSelector}].p-datatable-gridlines > ${tableSelector}`;
                 let innerHTML = `
diff --git a/components/lib/datatable/HeaderCell.vue b/components/lib/datatable/HeaderCell.vue
index b317006a1..c8d01b84d 100644
--- a/components/lib/datatable/HeaderCell.vue
+++ b/components/lib/datatable/HeaderCell.vue
@@ -23,9 +23,9 @@
         :data-p-reorderable-column="reorderableColumns"
     >
         <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" />
-            <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')">
                 <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
             </span>
diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
index 055192387..3be5d78bd 100644
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -595,11 +595,11 @@ const classes = {
             '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',
     header: 'p-datatable-header',
     paginator: ({ position }) => 'p-datatable-paginator-' + position,
-    wrapper: 'p-datatable-table-container',
+    tableContainer: 'p-datatable-table-container',
     table: ({ props }) => [
         'p-datatable-table',
         {
@@ -626,20 +626,20 @@ const classes = {
                   }
               ],
     columnResizer: 'p-datatable-column-resizer',
-    headerContent: 'p-datatable-column-header-content',
-    headerTitle: 'p-datatable-column-title',
+    columnHeaderContent: 'p-datatable-column-header-content',
+    columnTitle: 'p-datatable-column-title',
     sortIcon: 'p-datatable-sort-icon',
     sortBadge: 'p-datatable-sort-badge',
-    columnFilter: ({ props }) => [
+    filter: ({ props }) => [
         'p-datatable-filter',
         {
             'p-datatable-inline-filter': props.display === 'row',
             'p-datatable-popover-filter': props.display === 'menu'
         }
     ],
-    filterInput: 'p-datatable-filter-element-container',
-    filterMenuButton: 'p-datatable-column-filter-button',
-    headerFilterClearButton: 'p-datatable-column-filter-clear-button',
+    filterElementContainer: 'p-datatable-filter-element-container',
+    columnFilterButton: 'p-datatable-column-filter-button',
+    columnFilterClearButton: 'p-datatable-column-filter-clear-button',
     filterOverlay: ({ instance, props }) => [
         'p-datatable-filter-overlay p-component',
         {
@@ -647,29 +647,28 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    filterRowItems: 'p-datatable-filter-constraint-list',
-    filterRowItem: ({ instance, matchMode }) => [
+    filterConstraintList: 'p-datatable-filter-constraint-list',
+    filterConstraint: ({ instance, matchMode }) => [
         'p-datatable-filter-constraint',
         {
             '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',
     filterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
     filterConstraints: 'p-datatable-filter-rule-list',
-    filterConstraint: 'p-datatable-filter-rule',
-    filterMatchModeDropdown: 'p-datatable-filter-constraint-dropdown',
-    filterRemoveButton: 'p-datatable-filter-remove-rule-button',
-    filterAddRule: 'p-datatable-filter-add-rule-button', //TODO: Remove
-    filterAddRuleButton: 'p-column-filter-add-button',
+    filterRule: 'p-datatable-filter-rule',
+    filterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
+    filterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
+    filterAddButton: 'p-column-filter-add-button',
     filterButtonbar: 'p-datatable-filter-buttonbar',
     filterClearButton: 'p-datatable-filter-clear-button',
     filterApplyButton: 'p-datatable-filter-apply-button',
     tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
-    rowgroupHeader: 'p-datatable-row-group-header',
-    rowGroupToggler: 'p-datatable-row-toggle-button',
-    rowGroupTogglerIcon: 'p-datatable-row-toggle-icon',
+    rowGroupHeader: 'p-datatable-row-group-header',
+    rowToggleButton: 'p-datatable-row-toggle-button',
+    rowToggleIcon: 'p-datatable-row-toggle-icon',
     row: ({ instance, props, index, columnSelectionMode }) => {
         let rowStyleClass = [];
 
@@ -694,23 +693,17 @@ const classes = {
         return rowStyleClass;
     },
     rowExpansion: 'p-datatable-row-expansion',
-    rowgroupFooter: 'p-datatable-row-group-footer',
+    rowGroupFooter: 'p-datatable-row-group-footer',
     emptyMessage: 'p-datatable-empty-message',
     bodyCell: ({ instance }) => [
         {
             'p-datatable-frozen-column': instance.columnProp('frozen')
         }
     ],
-    columnTitle: 'p-column-title', //TODO: Remove due to stacked mode
-    rowReorderIcon: 'p-datatable-reorderable-row-handle',
-    rowToggler: 'p-datatable-row-toggle-button',
-    rowTogglerIcon: 'p-datatable-row-toggle-icon',
-    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
+    reorderableRowHandle: 'p-datatable-reorderable-row-handle',
+    rowEditorInit: 'p-datatable-row-editor-init',
+    rowEditorSave: 'p-datatable-row-editor-save',
+    rowEditorCancel: 'p-datatable-row-editor-cancel',
     tfoot: 'p-datatable-tfoot',
     footerCell: ({ instance }) => [
         {
@@ -719,13 +712,13 @@ const classes = {
     ],
     virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
     footer: 'p-datatable-footer',
-    resizeHelper: 'p-datatable-column-resize-indicator',
-    reorderIndicatorUp: 'p-datatable-row-reorder-indicator-up',
-    reorderIndicatorDown: 'p-datatable-row-reorder-indicator-down'
+    columnResizeIndicator: 'p-datatable-column-resize-indicator',
+    rowReorderIndicatorUp: 'p-datatable-row-reorder-indicator-up',
+    rowReorderIndicatorDown: 'p-datatable-row-reorder-indicator-down'
 };
 
 const inlineStyles = {
-    wrapper: { overflow: 'auto' },
+    tableContainer: { overflow: 'auto' },
     thead: { position: 'sticky' },
     tfoot: { position: 'sticky' }
 };