primeng 20.3.0-rc.1 → 21.0.0-beta.1

package/fesm2022/primeng-table.mjs

@@ -1,13 +1,13 @@
 export * from 'primeng/types/table';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, EventEmitter, inject, NgZone, numberAttribute, booleanAttribute, ContentChild, ContentChildren, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, HostListener, Optional, input, ElementRef, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, EventEmitter, inject, NgZone, numberAttribute, booleanAttribute, ContentChild, ContentChildren, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, HostListener, Optional, input, computed, ElementRef, NgModule } from '@angular/core';
 import { style as style$1 } from '@primeuix/styles/datatable';
 import { BaseStyle } from 'primeng/base';
-import { trigger, transition, style as style$2, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i7 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { isClickable, setAttribute, getAttribute, find, findSingle, appendChild, addStyle, absolutePosition } from '@primeuix/utils';
 import * as i4 from 'primeng/api';
 import { OverlayService, FilterService, FilterOperator, FilterMatchMode, PrimeTemplate, TranslationKeys, SharedModule } from 'primeng/api';
 import * as i6 from 'primeng/badge';
@@ -19,7 +19,7 @@ import * as i11 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
 import * as i9 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
-import * as i13 from 'primeng/datepicker';
+import * as i14 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ArrowDownIcon } from 'primeng/icons/arrowdown';
@@ -33,10 +33,12 @@ import { SortAmountDownIcon } from 'primeng/icons/sortamountdown';
 import { SortAmountUpAltIcon } from 'primeng/icons/sortamountupalt';
 import { SpinnerIcon } from 'primeng/icons/spinner';
 import { TrashIcon } from 'primeng/icons/trash';
-import * as i14 from 'primeng/inputnumber';
+import * as i15 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i12 from 'primeng/inputtext';
+import * as i13 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
+import * as i12 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import * as i3 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i8 from 'primeng/radiobutton';
@@ -50,117 +52,117 @@ import { UniqueComponentId, ObjectUtils, ZIndexUtils } from 'primeng/utils';
 import { Subject } from 'rxjs';
 
 const style = /*css*/ `
-    ${style$1}
+${style$1}
 
-    /* For PrimeNG */
-    .p-datatable-scrollable-table > .p-datatable-thead {
-        top: 0;
-        z-index: 2;
-    }
+/* For PrimeNG */
+.p-datatable-scrollable-table > .p-datatable-thead {
+    top: 0;
+    z-index: 2;
+}
 
-    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {
-        position: sticky;
-        z-index: 2;
-    }
+.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
+    position: sticky;
+    z-index: 2;
+}
 
-    .p-datatable-scrollable-table > .p-datatable-frozen-tbody + .p-datatable-frozen-tbody {
-        z-index: 1;
-    }
+.p-datatable-scrollable-table > .p-datatable-frozen-tbody + .p-datatable-frozen-tbody {
+    z-index: 1;
+}
 
-    .p-datatable-mask.p-overlay-mask {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 3;
-    }
+.p-datatable-mask.p-overlay-mask {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+}
 
-    .p-datatable-filter-overlay {
-        position: absolute;
-        background: dt('datatable.filter.overlay.select.background');
-        color: dt('datatable.filter.overlay.select.color');
-        border: 1px solid dt('datatable.filter.overlay.select.border.color');
-        border-radius: dt('datatable.filter.overlay.select.border.radius');
-        box-shadow: dt('datatable.filter.overlay.select.shadow');
-        min-width: 12.5rem;
-    }
+.p-datatable-filter-overlay {
+    position: absolute;
+    background: dt('datatable.filter.overlay.select.background');
+    color: dt('datatable.filter.overlay.select.color');
+    border: 1px solid dt('datatable.filter.overlay.select.border.color');
+    border-radius: dt('datatable.filter.overlay.select.border.radius');
+    box-shadow: dt('datatable.filter.overlay.select.shadow');
+    min-width: 12.5rem;
+}
 
-    .p-datatable-filter-rule {
-        border-bottom: 1px solid dt('datatable.filter.rule.border.color');
-    }
+.p-datatable-filter-rule {
+    border-bottom: 1px solid dt('datatable.filter.rule.border.color');
+}
 
-    .p-datatable-filter-rule:last-child {
-        border-bottom: 0 none;
-    }
+.p-datatable-filter-rule:last-child {
+    border-bottom: 0 none;
+}
 
-    .p-datatable-filter-add-rule-button,
-    .p-datatable-filter-remove-rule-button {
-        width: 100%;
-    }
+.p-datatable-filter-add-rule-button,
+.p-datatable-filter-remove-rule-button {
+    width: 100%;
+}
 
-    .p-datatable-filter-remove-button {
-        width: 100%;
-    }
+.p-datatable-filter-remove-button {
+    width: 100%;
+}
 
-    .p-datatable-thead > tr > th {
-        padding: dt('datatable.header.cell.padding');
-        background: dt('datatable.header.cell.background');
-        border-color: dt('datatable.header.cell.border.color');
-        border-style: solid;
-        border-width: 0 0 1px 0;
-        color: dt('datatable.header.cell.color');
-        font-weight: dt('datatable.column.title.font.weight');
-        text-align: start;
-        transition:
-            background dt('datatable.transition.duration'),
-            color dt('datatable.transition.duration'),
-            border-color dt('datatable.transition.duration'),
-            outline-color dt('datatable.transition.duration'),
-            box-shadow dt('datatable.transition.duration');
-    }
+.p-datatable-thead > tr > th {
+    padding: dt('datatable.header.cell.padding');
+    background: dt('datatable.header.cell.background');
+    border-color: dt('datatable.header.cell.border.color');
+    border-style: solid;
+    border-width: 0 0 1px 0;
+    color: dt('datatable.header.cell.color');
+    font-weight: dt('datatable.column.title.font.weight');
+    text-align: start;
+    transition:
+        background dt('datatable.transition.duration'),
+        color dt('datatable.transition.duration'),
+        border-color dt('datatable.transition.duration'),
+        outline-color dt('datatable.transition.duration'),
+        box-shadow dt('datatable.transition.duration');
+}
 
-    .p-datatable-thead > tr > th p-columnfilter {
-        font-weight: normal;
-    }
+.p-datatable-thead > tr > th p-columnfilter {
+    font-weight: normal;
+}
 
-    .p-datatable-thead > tr > th,
-    .p-datatable-sort-icon,
-    .p-datatable-sort-badge {
-        vertical-align: middle;
-    }
+.p-datatable-thead > tr > th,
+.p-datatable-sort-icon,
+.p-datatable-sort-badge {
+    vertical-align: middle;
+}
 
-    .p-datatable-thead > tr > th.p-datatable-column-sorted {
-        background: dt('datatable.header.cell.selected.background');
-        color: dt('datatable.header.cell.selected.color');
-    }
+.p-datatable-thead > tr > th.p-datatable-column-sorted {
+    background: dt('datatable.header.cell.selected.background');
+    color: dt('datatable.header.cell.selected.color');
+}
 
-    .p-datatable-thead > tr > th.p-datatable-column-sorted .p-datatable-sort-icon {
-        color: dt('datatable.header.cell.selected.color');
-    }
+.p-datatable-thead > tr > th.p-datatable-column-sorted .p-datatable-sort-icon {
+    color: dt('datatable.header.cell.selected.color');
+}
 
-    .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
-        background: dt('datatable.row.striped.background');
-    }
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
+    background: dt('datatable.row.striped.background');
+}
 
-    .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd).p-datatable-row-selected {
-        background: dt('datatable.row.selected.background');
-        color: dt('datatable.row.selected.color');
-    }
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd).p-datatable-row-selected {
+    background: dt('datatable.row.selected.background');
+    color: dt('datatable.row.selected.color');
+}
 
-    p-sortIcon, p-sort-icon, p-sorticon {
-        display: inline-flex;
-        align-items: center;
-        gap: dt('datatable.header.cell.gap');
-    }
+p-sortIcon, p-sort-icon, p-sorticon {
+    display: inline-flex;
+    align-items: center;
+    gap: dt('datatable.header.cell.gap');
+}
 
-    .p-datatable .p-editable-column.p-cell-editing {
-        padding: 0;
-    }
+.p-datatable .p-editable-column.p-cell-editing {
+    padding: 0;
+}
 
-    .p-datatable .p-editable-column.p-cell-editing p-celleditor {
-        display: block;
-        width: 100%;
-    }
+.p-datatable .p-editable-column.p-cell-editing p-celleditor {
+    display: block;
+    width: 100%;
+}
 `;
 const classes = {
     root: ({ instance }) => [
@@ -210,7 +212,10 @@ const classes = {
         'p-datatable-filter-overlay-popover': instance.display === 'menu'
     }),
     filterConstraintList: 'p-datatable-filter-constraint-list',
-    filterConstraint: 'p-datatable-filter-constraint',
+    filterConstraint: ({ selected }) => ({
+        'p-datatable-filter-constraint': true,
+        'p-datatable-filter-constraint-selected': selected
+    }),
     filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
     filterOperator: 'p-datatable-filter-operator',
     pcFilterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
@@ -261,7 +266,14 @@ const classes = {
     }),
     resizableColumn: 'p-datatable-resizable-column',
     reorderableColumn: 'p-datatable-reorderable-column',
-    rowEditorCancel: 'p-datatable-row-editor-cancel'
+    rowEditorCancel: 'p-datatable-row-editor-cancel',
+    frozenColumn: ({ instance }) => ({
+        'p-datatable-frozen-column': instance.frozen,
+        'p-datatable-frozen-column-left': instance.alignFrozenLeft === 'left'
+    }),
+    contextMenuRowSelected: ({ instance }) => ({
+        'p-datatable-contextmenu-row-selected': instance.selected
+    })
 };
 const inlineStyles = {
     tableContainer: ({ instance }) => ({
@@ -269,17 +281,20 @@ const inlineStyles = {
         overflow: 'auto'
     }),
     thead: { position: 'sticky' },
-    tfoot: { position: 'sticky' }
+    tfoot: { position: 'sticky' },
+    rowGroupHeader: ({ instance }) => ({
+        top: instance.getFrozenRowGroupHeaderStickyPosition
+    })
 };
 class TableStyle extends BaseStyle {
     name = 'datatable';
     style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -509,6 +524,14 @@ var TableClasses;
      * Class name of the row editor cancel element
      */
     TableClasses["rowEditorCancel"] = "p-datatable-row-editor-cancel";
+    /**
+     * Class name of the frozen column element
+     */
+    TableClasses["frozenColumn"] = "p-datatable-frozen-column";
+    /**
+     * Class name of the contextmenu row selected element
+     */
+    TableClasses["contextMenuRowSelected"] = "p-datatable-contextmenu-row-selected";
 })(TableClasses || (TableClasses = {}));
 
 const TABLE_INSTANCE = new InjectionToken('TABLE_INSTANCE');
@@ -538,10 +561,10 @@ class TableService {
     onColumnsChange(columns) {
         this.columnsSource.next(columns);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1732,7 +1755,7 @@ class Table extends BaseComponent {
         let target = event.originalEvent.target;
         let targetNode = target.nodeName;
         let parentNode = target.parentElement && target.parentElement.nodeName;
-        if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || DomHandler.hasClass(event.originalEvent.target, 'p-clickable')) {
+        if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || isClickable(event.originalEvent.target)) {
             return;
         }
         if (this.selectionMode) {
@@ -2444,6 +2467,7 @@ class Table extends BaseComponent {
             this.documentEditListener = this.renderer.listen(this.document, 'click', (event) => {
                 if (this.editingCell && !this.selfClick && this.isEditingCellValid()) {
                     DomHandler.removeClass(this.editingCell, 'p-cell-editing');
+                    setAttribute(this.editingCell, 'data-p-cell-editing', 'false');
                     this.editingCell = null;
                     this.onEditComplete.emit({
                         field: this.editingCellField,
@@ -2540,7 +2564,7 @@ class Table extends BaseComponent {
     }
     onColumnResize(event) {
         let containerLeft = DomHandler.getOffset(this.el?.nativeElement).left;
-        DomHandler.addClass(this.el?.nativeElement, 'p-unselectable-text');
+        !this.$unstyled() && DomHandler.addClass(this.el?.nativeElement, 'p-unselectable-text');
         this.resizeHelperViewChild.nativeElement.style.height = this.el?.nativeElement.offsetHeight + 'px';
         this.resizeHelperViewChild.nativeElement.style.top = 0 + 'px';
         if (event.type == 'touchmove') {
@@ -2584,7 +2608,7 @@ class Table extends BaseComponent {
     }
     _totalTableWidth() {
         let widths = [];
-        const tableHead = DomHandler.findSingle(this.el.nativeElement, '.p-datatable-thead');
+        const tableHead = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="thead"]');
         let headers = DomHandler.find(tableHead, 'tr > th');
         headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
         return widths;
@@ -2709,28 +2733,28 @@ class Table extends BaseComponent {
             if (pageY < rowMidY) {
                 DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
                 this.droppedRowIndex = index;
-                if (prevRowElement)
+                if (prevRowElement && !this.$unstyled())
                     DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
                 else
-                    DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+                    !this.$unstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
             }
             else {
-                if (prevRowElement)
+                if (prevRowElement && !this.$unstyled())
                     DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
                 else
-                    DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+                    !this.$unstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
                 this.droppedRowIndex = index + 1;
-                DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
+                !this.$unstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
             }
         }
     }
     onRowDragLeave(event, rowElement) {
         let prevRowElement = rowElement.previousElementSibling;
         if (prevRowElement) {
-            DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+            !this.$unstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
         }
-        DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
-        DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
+        !this.$unstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+        !this.$unstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
     }
     onRowDragEnd(event) {
         this.rowDragging = false;
@@ -2874,7 +2898,7 @@ class Table extends BaseComponent {
         let headers = [];
         const container = this.el?.nativeElement;
         if (container) {
-            headers = DomHandler.find(container, '.p-datatable-thead > tr > th');
+            headers = DomHandler.find(container, '[data-pc-section="thead"] > tr > th');
         }
         headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
         state.columnWidths = widths.join(',');
@@ -3023,8 +3047,17 @@ class Table extends BaseComponent {
         this.destroyStyleElement();
         this.destroyResponsiveStyle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Table, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: Table, isStandalone: false, selector: "p-table", inputs: { frozenColumns: "frozenColumns", frozenValue: "frozenValue", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: ["paginator", "paginator", booleanAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: ["showJumpToPageInput", "showJumpToPageInput", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], selectionMode: "selectionMode", selectionPageOnly: ["selectionPageOnly", "selectionPageOnly", booleanAttribute], contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], rowSelectable: "rowSelectable", rowTrackBy: "rowTrackBy", lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: ["scrollable", "scrollable", booleanAttribute], rowGroupMode: "rowGroupMode", scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", contextMenu: "contextMenu", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], rowHover: ["rowHover", "rowHover", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], showInitialSortBadge: ["showInitialSortBadge", "showInitialSortBadge", booleanAttribute], exportFunction: "exportFunction", exportHeader: "exportHeader", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", groupRowsBy: "groupRowsBy", size: "size", showGridlines: ["showGridlines", "showGridlines", booleanAttribute], stripedRows: ["stripedRows", "stripedRows", booleanAttribute], groupRowsByOrder: ["groupRowsByOrder", "groupRowsByOrder", numberAttribute], responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", paginatorLocale: "paginatorLocale", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", selectAll: "selectAll" }, outputs: { contextMenuSelectionChange: "contextMenuSelectionChange", selectAllChange: "selectAllChange", selectionChange: "selectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onPage: "onPage", onSort: "onSort", onFilter: "onFilter", onLazyLoad: "onLazyLoad", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onContextMenuSelect: "onContextMenuSelect", onColResize: "onColResize", onColReorder: "onColReorder", onRowReorder: "onRowReorder", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", sortFunction: "sortFunction", firstChange: "firstChange", rowsChange: "rowsChange", onStateSave: "onStateSave", onStateRestore: "onStateRestore" }, host: { properties: { "class": "cn(cx('root'), styleClass)" } }, providers: [TableService, TableStyle, { provide: TABLE_INSTANCE, useExisting: Table }, { provide: PARENT_INSTANCE, useExisting: Table }], queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_headerGroupedTemplate", first: true, predicate: ["headergrouped"] }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"] }, { propertyName: "_loadingBodyTemplate", first: true, predicate: ["loadingbody"] }, { propertyName: "_captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_footerGroupedTemplate", first: true, predicate: ["footergrouped"] }, { propertyName: "_summaryTemplate", first: true, predicate: ["summary"] }, { propertyName: "_colGroupTemplate", first: true, predicate: ["colgroup"] }, { propertyName: "_expandedRowTemplate", first: true, predicate: ["expandedrow"] }, { propertyName: "_groupHeaderTemplate", first: true, predicate: ["groupheader"] }, { propertyName: "_groupFooterTemplate", first: true, predicate: ["groupfooter"] }, { propertyName: "_frozenExpandedRowTemplate", first: true, predicate: ["frozenexpandedrow"] }, { propertyName: "_frozenHeaderTemplate", first: true, predicate: ["frozenheader"] }, { propertyName: "_frozenBodyTemplate", first: true, predicate: ["frozenbody"] }, { propertyName: "_frozenFooterTemplate", first: true, predicate: ["frozenfooter"] }, { propertyName: "_frozenColGroupTemplate", first: true, predicate: ["frozencolgroup"] }, { propertyName: "_emptyMessageTemplate", first: true, predicate: ["emptymessage"] }, { propertyName: "_paginatorLeftTemplate", first: true, predicate: ["paginatorleft"] }, { propertyName: "_paginatorRightTemplate", first: true, predicate: ["paginatorright"] }, { propertyName: "_paginatorDropdownItemTemplate", first: true, predicate: ["paginatordropdownitem"] }, { propertyName: "_loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "_reorderIndicatorUpIconTemplate", first: true, predicate: ["reorderindicatorupicon"] }, { propertyName: "_reorderIndicatorDownIconTemplate", first: true, predicate: ["reorderindicatordownicon"] }, { propertyName: "_sortIconTemplate", first: true, predicate: ["sorticon"] }, { propertyName: "_checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "_headerCheckboxIconTemplate", first: true, predicate: ["headercheckboxicon"] }, { propertyName: "_paginatorDropdownIconTemplate", first: true, predicate: ["paginatordropdownicon"] }, { propertyName: "_paginatorFirstPageLinkIconTemplate", first: true, predicate: ["paginatorfirstpagelinkicon"] }, { propertyName: "_paginatorLastPageLinkIconTemplate", first: true, predicate: ["paginatorlastpagelinkicon"] }, { propertyName: "_paginatorPreviousPageLinkIconTemplate", first: true, predicate: ["paginatorpreviouspagelinkicon"] }, { propertyName: "_paginatorNextPageLinkIconTemplate", first: true, predicate: ["paginatornextpagelinkicon"] }, { propertyName: "_templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableHeaderViewChild", first: true, predicate: ["thead"], descendants: true }, { propertyName: "tableFooterViewChild", first: true, predicate: ["tfoot"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    get dataP() {
+        return this.cn({
+            scrollable: this.scrollable,
+            'flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
+            [this.size]: this.size,
+            loading: this.loading,
+            empty: this.isEmpty()
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Table, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0", type: Table, isStandalone: false, selector: "p-table", inputs: { frozenColumns: "frozenColumns", frozenValue: "frozenValue", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: ["paginator", "paginator", booleanAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: ["showJumpToPageInput", "showJumpToPageInput", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], selectionMode: "selectionMode", selectionPageOnly: ["selectionPageOnly", "selectionPageOnly", booleanAttribute], contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], rowSelectable: "rowSelectable", rowTrackBy: "rowTrackBy", lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: ["scrollable", "scrollable", booleanAttribute], rowGroupMode: "rowGroupMode", scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", contextMenu: "contextMenu", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], rowHover: ["rowHover", "rowHover", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], showInitialSortBadge: ["showInitialSortBadge", "showInitialSortBadge", booleanAttribute], exportFunction: "exportFunction", exportHeader: "exportHeader", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", groupRowsBy: "groupRowsBy", size: "size", showGridlines: ["showGridlines", "showGridlines", booleanAttribute], stripedRows: ["stripedRows", "stripedRows", booleanAttribute], groupRowsByOrder: ["groupRowsByOrder", "groupRowsByOrder", numberAttribute], responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", paginatorLocale: "paginatorLocale", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", selectAll: "selectAll" }, outputs: { contextMenuSelectionChange: "contextMenuSelectionChange", selectAllChange: "selectAllChange", selectionChange: "selectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onPage: "onPage", onSort: "onSort", onFilter: "onFilter", onLazyLoad: "onLazyLoad", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onContextMenuSelect: "onContextMenuSelect", onColResize: "onColResize", onColReorder: "onColReorder", onRowReorder: "onRowReorder", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", sortFunction: "sortFunction", firstChange: "firstChange", rowsChange: "rowsChange", onStateSave: "onStateSave", onStateRestore: "onStateRestore" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "attr.data-p": "dataP" } }, providers: [TableService, TableStyle, { provide: TABLE_INSTANCE, useExisting: Table }, { provide: PARENT_INSTANCE, useExisting: Table }], queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_headerGroupedTemplate", first: true, predicate: ["headergrouped"] }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"] }, { propertyName: "_loadingBodyTemplate", first: true, predicate: ["loadingbody"] }, { propertyName: "_captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_footerGroupedTemplate", first: true, predicate: ["footergrouped"] }, { propertyName: "_summaryTemplate", first: true, predicate: ["summary"] }, { propertyName: "_colGroupTemplate", first: true, predicate: ["colgroup"] }, { propertyName: "_expandedRowTemplate", first: true, predicate: ["expandedrow"] }, { propertyName: "_groupHeaderTemplate", first: true, predicate: ["groupheader"] }, { propertyName: "_groupFooterTemplate", first: true, predicate: ["groupfooter"] }, { propertyName: "_frozenExpandedRowTemplate", first: true, predicate: ["frozenexpandedrow"] }, { propertyName: "_frozenHeaderTemplate", first: true, predicate: ["frozenheader"] }, { propertyName: "_frozenBodyTemplate", first: true, predicate: ["frozenbody"] }, { propertyName: "_frozenFooterTemplate", first: true, predicate: ["frozenfooter"] }, { propertyName: "_frozenColGroupTemplate", first: true, predicate: ["frozencolgroup"] }, { propertyName: "_emptyMessageTemplate", first: true, predicate: ["emptymessage"] }, { propertyName: "_paginatorLeftTemplate", first: true, predicate: ["paginatorleft"] }, { propertyName: "_paginatorRightTemplate", first: true, predicate: ["paginatorright"] }, { propertyName: "_paginatorDropdownItemTemplate", first: true, predicate: ["paginatordropdownitem"] }, { propertyName: "_loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "_reorderIndicatorUpIconTemplate", first: true, predicate: ["reorderindicatorupicon"] }, { propertyName: "_reorderIndicatorDownIconTemplate", first: true, predicate: ["reorderindicatordownicon"] }, { propertyName: "_sortIconTemplate", first: true, predicate: ["sorticon"] }, { propertyName: "_checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "_headerCheckboxIconTemplate", first: true, predicate: ["headercheckboxicon"] }, { propertyName: "_paginatorDropdownIconTemplate", first: true, predicate: ["paginatordropdownicon"] }, { propertyName: "_paginatorFirstPageLinkIconTemplate", first: true, predicate: ["paginatorfirstpagelinkicon"] }, { propertyName: "_paginatorLastPageLinkIconTemplate", first: true, predicate: ["paginatorlastpagelinkicon"] }, { propertyName: "_paginatorPreviousPageLinkIconTemplate", first: true, predicate: ["paginatorpreviouspagelinkicon"] }, { propertyName: "_paginatorNextPageLinkIconTemplate", first: true, predicate: ["paginatornextpagelinkicon"] }, { propertyName: "_templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableHeaderViewChild", first: true, predicate: ["thead"], descendants: true }, { propertyName: "tableFooterViewChild", first: true, predicate: ["tfoot"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <div [class]="cx('mask')" [pBind]="ptm('mask')" *ngIf="loading && showLoader">
             <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon)" [pBind]="ptm('loadingIcon')"></i>
             <ng-container *ngIf="!loadingIcon">
@@ -3060,6 +3093,7 @@ class Table extends BaseComponent {
             [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
             [locale]="paginatorLocale"
             [pt]="ptm('pcPaginator')"
+            [unstyled]="unstyled()"
         >
             <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
                 <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
@@ -3082,7 +3116,7 @@ class Table extends BaseComponent {
             </ng-template>
         </p-paginator>
 
-        <div #wrapper [class]="cx('tableContainer')" [ngStyle]="sx('tableContainer')" [pBind]="ptm('tableContainer')">
+        <div #wrapper [class]="cx('tableContainer')" [ngStyle]="sx('tableContainer')" [pBind]="ptm('tableContainer')" [attr.data-p]="dataP">
             <p-scroller
                 #scroller
                 *ngIf="virtualScroll"
@@ -3151,7 +3185,9 @@ class Table extends BaseComponent {
                         [frozenRows]="true"
                         [pTableBody]="scrollerOptions.columns"
                         [pTableBodyTemplate]="frozenBodyTemplate || _frozenBodyTemplate"
+                        [unstyled]="unstyled()"
                         [frozen]="true"
+                        [attr.data-p-virtualscroll]="virtualScroll"
                     ></tbody>
                     <tbody
                         role="rowgroup"
@@ -3162,6 +3198,8 @@ class Table extends BaseComponent {
                         [pTableBody]="scrollerOptions.columns"
                         [pTableBodyTemplate]="bodyTemplate || _bodyTemplate"
                         [scrollerOptions]="scrollerOptions"
+                        [unstyled]="unstyled()"
+                        [attr.data-p-virtualscroll]="virtualScroll"
                     ></tbody>
                     <tbody
                         role="rowgroup"
@@ -3207,6 +3245,7 @@ class Table extends BaseComponent {
             [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
             [locale]="paginatorLocale"
             [pt]="ptm('pcPaginator')"
+            [unstyled]="unstyled()"
         >
             <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
                 <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
@@ -3244,7 +3283,7 @@ class Table extends BaseComponent {
         </span>
     `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i3.Paginator), selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "directive", type: i0.forwardRef(() => i4.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => i5.Scroller), selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "component", type: i0.forwardRef(() => ArrowDownIcon), selector: "[data-p-icon=\"arrow-down\"]" }, { kind: "component", type: i0.forwardRef(() => ArrowUpIcon), selector: "[data-p-icon=\"arrow-up\"]" }, { kind: "component", type: i0.forwardRef(() => SpinnerIcon), selector: "[data-p-icon=\"spinner\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: i0.forwardRef(() => TableBody), selector: "[pTableBody]", inputs: ["pTableBody", "pTableBodyTemplate", "value", "frozen", "frozenRows", "scrollerOptions"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Table, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Table, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table',
@@ -3285,6 +3324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
             [locale]="paginatorLocale"
             [pt]="ptm('pcPaginator')"
+            [unstyled]="unstyled()"
         >
             <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
                 <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
@@ -3307,7 +3347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             </ng-template>
         </p-paginator>
 
-        <div #wrapper [class]="cx('tableContainer')" [ngStyle]="sx('tableContainer')" [pBind]="ptm('tableContainer')">
+        <div #wrapper [class]="cx('tableContainer')" [ngStyle]="sx('tableContainer')" [pBind]="ptm('tableContainer')" [attr.data-p]="dataP">
             <p-scroller
                 #scroller
                 *ngIf="virtualScroll"
@@ -3376,7 +3416,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         [frozenRows]="true"
                         [pTableBody]="scrollerOptions.columns"
                         [pTableBodyTemplate]="frozenBodyTemplate || _frozenBodyTemplate"
+                        [unstyled]="unstyled()"
                         [frozen]="true"
+                        [attr.data-p-virtualscroll]="virtualScroll"
                     ></tbody>
                     <tbody
                         role="rowgroup"
@@ -3387,6 +3429,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         [pTableBody]="scrollerOptions.columns"
                         [pTableBodyTemplate]="bodyTemplate || _bodyTemplate"
                         [scrollerOptions]="scrollerOptions"
+                        [unstyled]="unstyled()"
+                        [attr.data-p-virtualscroll]="virtualScroll"
                     ></tbody>
                     <tbody
                         role="rowgroup"
@@ -3432,6 +3476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
             [locale]="paginatorLocale"
             [pt]="ptm('pcPaginator')"
+            [unstyled]="unstyled()"
         >
             <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
                 <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
@@ -3472,7 +3517,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.Default,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class]': "cn(cx('root'), styleClass)"
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[attr.data-p]': 'dataP'
                     },
                     hostDirectives: [Bind]
                 }]
@@ -3959,8 +4005,14 @@ class TableBody extends BaseComponent {
         const getItemOptions = this.getScrollerOption('getItemOptions');
         return getItemOptions ? getItemOptions(index).index : index;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableBody, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: TableBody, isStandalone: false, selector: "[pTableBody]", inputs: { columns: ["pTableBody", "columns"], template: ["pTableBodyTemplate", "template"], value: "value", frozen: ["frozen", "frozen", booleanAttribute], frozenRows: ["frozenRows", "frozenRows", booleanAttribute], scrollerOptions: "scrollerOptions" }, usesInheritance: true, ngImport: i0, template: `
+    get dataP() {
+        return this.cn({
+            hoverable: this.dataTable.rowHover || this.dataTable.selectionMode,
+            frozen: this.frozen
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBody, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0", type: TableBody, isStandalone: false, selector: "[pTableBody]", inputs: { columns: ["pTableBody", "columns"], template: ["pTableBodyTemplate", "template"], value: "value", frozen: ["frozen", "frozen", booleanAttribute], frozenRows: ["frozenRows", "frozenRows", booleanAttribute], scrollerOptions: "scrollerOptions" }, host: { properties: { "attr.data-p": "dataP" } }, usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="!dataTable.expandedRowTemplate && !dataTable._expandedRowTemplate">
             <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dataTable.rowTrackBy">
                 <ng-container
@@ -4129,7 +4181,7 @@ class TableBody extends BaseComponent {
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBody, decorators: [{
             type: Component,
             args: [{
                     selector: '[pTableBody]',
@@ -4303,7 +4355,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         </ng-container>
     `,
                     changeDetection: ChangeDetectionStrategy.Default,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[attr.data-p]': 'dataP'
+                    }
                 }]
         }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { columns: [{
                 type: Input,
@@ -4322,26 +4377,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], scrollerOptions: [{
                 type: Input
             }] } });
-class RowGroupHeader {
+class RowGroupHeader extends BaseComponent {
     dataTable;
     constructor(dataTable) {
+        super();
         this.dataTable = dataTable;
     }
+    _componentStyle = inject(TableStyle);
     get getFrozenRowGroupHeaderStickyPosition() {
         return this.dataTable.rowGroupHeaderStyleObject ? this.dataTable.rowGroupHeaderStyleObject.top : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RowGroupHeader, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: RowGroupHeader, isStandalone: false, selector: "[pRowGroupHeader]", host: { properties: { "style.top": "getFrozenRowGroupHeaderStickyPosition" }, classAttribute: "p-datatable-row-group-header" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RowGroupHeader, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: RowGroupHeader, isStandalone: false, selector: "[pRowGroupHeader]", host: { properties: { "class": "cx(\"rowGroupHeader\")", "style": "sx(\"rowGroupHeader\")" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RowGroupHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RowGroupHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pRowGroupHeader]',
                     standalone: false,
                     host: {
-                        class: 'p-datatable-row-group-header',
-                        '[style.top]': 'getFrozenRowGroupHeaderStickyPosition'
-                    }
+                        '[class]': 'cx("rowGroupHeader")',
+                        '[style]': 'sx("rowGroupHeader")'
+                    },
+                    providers: [TableStyle]
                 }]
         }], ctorParameters: () => [{ type: Table }] });
 class FrozenColumn extends BaseComponent {
@@ -4355,6 +4413,7 @@ class FrozenColumn extends BaseComponent {
     alignFrozen = 'left';
     resizeListener;
     resizeObserver;
+    _componentStyle = inject(TableStyle);
     onAfterViewInit() {
         this.bindResizeListener();
         this.observeChanges();
@@ -4428,18 +4487,18 @@ class FrozenColumn extends BaseComponent {
             this.resizeObserver.disconnect();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FrozenColumn, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: FrozenColumn, isStandalone: false, selector: "[pFrozenColumn]", inputs: { frozen: "frozen", alignFrozen: "alignFrozen" }, host: { properties: { "class.p-datatable-frozen-column": "frozen", "class.p-datatable-frozen-column-left": "alignFrozen === \"left\"" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FrozenColumn, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: FrozenColumn, isStandalone: false, selector: "[pFrozenColumn]", inputs: { frozen: "frozen", alignFrozen: "alignFrozen" }, host: { properties: { "class": "cx(\"frozenColumn\")" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FrozenColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FrozenColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pFrozenColumn]',
                     standalone: false,
                     host: {
-                        '[class.p-datatable-frozen-column]': 'frozen',
-                        '[class.p-datatable-frozen-column-left]': 'alignFrozen === "left"'
-                    }
+                        '[class]': 'cx("frozenColumn")'
+                    },
+                    providers: [TableStyle]
                 }]
         }], propDecorators: { frozen: [{
                 type: Input
@@ -4505,17 +4564,17 @@ class SortableColumn extends BaseComponent {
         return this.isFilterElementIconOrButton(element) || this.isFilterElementIconOrButton(element?.parentElement?.parentElement);
     }
     isFilterElementIconOrButton(element) {
-        return DomHandler.hasClass(element, 'pi-filter-icon') || DomHandler.hasClass(element, 'p-column-filter-menu-button');
+        return getAttribute(element, '[data-pc-name="pccolumnfilterbutton"]') || getAttribute(element, '[data-pc-section="columnfilterbuttonicon"]');
     }
     onDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SortableColumn, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.4", type: SortableColumn, isStandalone: false, selector: "[pSortableColumn]", inputs: { field: ["pSortableColumn", "field"], pSortableColumnDisabled: ["pSortableColumnDisabled", "pSortableColumnDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown.space": "onEnterKey($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class": "cx('sortableColumn')", "tabindex": "isEnabled() ? \"0\" : null", "role": "\"columnheader\"", "attr.aria-sort": "sortOrder" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortableColumn, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: SortableColumn, isStandalone: false, selector: "[pSortableColumn]", inputs: { field: ["pSortableColumn", "field"], pSortableColumnDisabled: ["pSortableColumnDisabled", "pSortableColumnDisabled", booleanAttribute] }, host: { attributes: { "role": "\"columnheader\"" }, listeners: { "click": "onClick($event)", "keydown.space": "onEnterKey($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class": "cx('sortableColumn')", "tabindex": "isEnabled() ? \"0\" : null", "attr.aria-sort": "sortOrder" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SortableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSortableColumn]',
@@ -4523,7 +4582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     host: {
                         '[class]': "cx('sortableColumn')",
                         '[tabindex]': 'isEnabled() ? "0" : null',
-                        '[role]': '"columnheader"',
+                        role: '"columnheader"',
                         '[attr.aria-sort]': 'sortOrder'
                     },
                     providers: [TableStyle]
@@ -4601,8 +4660,8 @@ class SortIcon extends BaseComponent {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SortIcon, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: SortIcon, isStandalone: false, selector: "p-sortIcon", inputs: { field: "field" }, providers: [TableStyle], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortIcon, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: SortIcon, isStandalone: false, selector: "p-sortIcon", inputs: { field: "field" }, providers: [TableStyle], usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="!(dataTable.sortIconTemplate || dataTable._sortIconTemplate)">
             <svg data-p-icon="sort-alt" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === 0" />
             <svg data-p-icon="sort-amount-up-alt" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" />
@@ -4614,7 +4673,7 @@ class SortIcon extends BaseComponent {
         <p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small"></p-badge>
     `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => i6.Badge), selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "component", type: i0.forwardRef(() => SortAltIcon), selector: "[data-p-icon=\"sort-alt\"]" }, { kind: "component", type: i0.forwardRef(() => SortAmountUpAltIcon), selector: "[data-p-icon=\"sort-amount-up-alt\"]" }, { kind: "component", type: i0.forwardRef(() => SortAmountDownIcon), selector: "[data-p-icon=\"sort-amount-down\"]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SortIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-sortIcon',
@@ -4798,17 +4857,17 @@ class SelectableRow extends BaseComponent {
         DomHandler.focus(currentFocusedRow);
     }
     findLastSelectableRow() {
-        const rows = DomHandler.find(this.dataTable.el.nativeElement, '.p-datatable-selectable-row');
+        const rows = DomHandler.find(this.dataTable.el.nativeElement, '[data-p-selectable-row="true"]');
         return rows ? rows[rows.length - 1] : null;
     }
     findFirstSelectableRow() {
-        const firstRow = DomHandler.findSingle(this.dataTable.el.nativeElement, '.p-datatable-selectable-row');
+        const firstRow = DomHandler.findSingle(this.dataTable.el.nativeElement, '[data-p-selectable-row="true"]');
         return firstRow;
     }
     findNextSelectableRow(row) {
         let nextRow = row.nextElementSibling;
         if (nextRow) {
-            if (DomHandler.hasClass(nextRow, 'p-datatable-selectable-row'))
+            if (find(nextRow, '[data-p-selectable-row="true"]'))
                 return nextRow;
             else
                 return this.findNextSelectableRow(nextRow);
@@ -4820,7 +4879,7 @@ class SelectableRow extends BaseComponent {
     findPrevSelectableRow(row) {
         let prevRow = row.previousElementSibling;
         if (prevRow) {
-            if (DomHandler.hasClass(prevRow, 'p-datatable-selectable-row'))
+            if (find(prevRow, '[data-p-selectable-row="true"]'))
                 return prevRow;
             else
                 return this.findPrevSelectableRow(prevRow);
@@ -4837,10 +4896,10 @@ class SelectableRow extends BaseComponent {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectableRow, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.4", type: SelectableRow, isStandalone: false, selector: "[pSelectableRow]", inputs: { data: ["pSelectableRow", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: ["pSelectableRowDisabled", "pSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "touchend": "onTouchEnd($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "cx('selectableRow')", "tabindex": "setRowTabIndex()", "attr.data-p-selectable-row": "true" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectableRow, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: SelectableRow, isStandalone: false, selector: "[pSelectableRow]", inputs: { data: ["pSelectableRow", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: ["pSelectableRowDisabled", "pSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "touchend": "onTouchEnd($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "cx('selectableRow')", "tabindex": "setRowTabIndex()", "attr.data-p-selectable-row": "true" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSelectableRow]',
@@ -4879,6 +4938,7 @@ class SelectableRowDblClick extends BaseComponent {
     pSelectableRowDisabled;
     selected;
     subscription;
+    _componentStyle = inject(TableStyle);
     constructor(dataTable, tableService) {
         super();
         this.dataTable = dataTable;
@@ -4911,18 +4971,18 @@ class SelectableRowDblClick extends BaseComponent {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectableRowDblClick, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.4", type: SelectableRowDblClick, isStandalone: false, selector: "[pSelectableRowDblClick]", inputs: { data: ["pSelectableRowDblClick", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: ["pSelectableRowDisabled", "pSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class.p-selectable-row": "isEnabled()", "class.p-highlight": "selected" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectableRowDblClick, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: SelectableRowDblClick, isStandalone: false, selector: "[pSelectableRowDblClick]", inputs: { data: ["pSelectableRowDblClick", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: ["pSelectableRowDisabled", "pSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class": "cx(\"selectableRow\")" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectableRowDblClick, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectableRowDblClick, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSelectableRowDblClick]',
                     standalone: false,
                     host: {
-                        '[class.p-selectable-row]': 'isEnabled()',
-                        '[class.p-highlight]': 'selected'
-                    }
+                        '[class]': 'cx("selectableRow")'
+                    },
+                    providers: [TableStyle]
                 }]
         }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { data: [{
                 type: Input,
@@ -4945,6 +5005,7 @@ class ContextMenuRow extends BaseComponent {
     pContextMenuRowDisabled;
     selected;
     subscription;
+    _componentStyle = inject(TableStyle);
     constructor(dataTable, tableService) {
         super();
         this.dataTable = dataTable;
@@ -4974,18 +5035,19 @@ class ContextMenuRow extends BaseComponent {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ContextMenuRow, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.4", type: ContextMenuRow, isStandalone: false, selector: "[pContextMenuRow]", inputs: { data: ["pContextMenuRow", "data"], index: ["pContextMenuRowIndex", "index"], pContextMenuRowDisabled: ["pContextMenuRowDisabled", "pContextMenuRowDisabled", booleanAttribute] }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class.p-datatable-contextmenu-row-selected": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuRow, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: ContextMenuRow, isStandalone: false, selector: "[pContextMenuRow]", inputs: { data: ["pContextMenuRow", "data"], index: ["pContextMenuRowIndex", "index"], pContextMenuRowDisabled: ["pContextMenuRowDisabled", "pContextMenuRowDisabled", booleanAttribute] }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class": "cx(\"contextMenuRowSelected\")", "attr.tabindex": "isEnabled() ? 0 : undefined" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ContextMenuRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pContextMenuRow]',
                     standalone: false,
                     host: {
-                        '[class.p-datatable-contextmenu-row-selected]': 'selected',
+                        '[class]': 'cx("contextMenuRowSelected")',
                         '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
-                    }
+                    },
+                    providers: [TableStyle]
                 }]
         }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { data: [{
                 type: Input,
@@ -5017,10 +5079,10 @@ class RowToggler extends BaseComponent {
     isEnabled() {
         return this.pRowTogglerDisabled !== true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RowToggler, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.4", type: RowToggler, isStandalone: false, selector: "[pRowToggler]", inputs: { data: ["pRowToggler", "data"], pRowTogglerDisabled: ["pRowTogglerDisabled", "pRowTogglerDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RowToggler, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: RowToggler, isStandalone: false, selector: "[pRowToggler]", inputs: { data: ["pRowToggler", "data"], pRowTogglerDisabled: ["pRowTogglerDisabled", "pRowTogglerDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RowToggler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RowToggler, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pRowToggler]',
@@ -5056,9 +5118,9 @@ class ResizableColumn extends BaseComponent {
     onAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
             if (this.isEnabled()) {
-                DomHandler.addClass(this.el.nativeElement, 'p-datatable-resizable-column');
                 this.resizer = this.renderer.createElement('span');
-                this.renderer.addClass(this.resizer, 'p-datatable-column-resizer');
+                setAttribute(this.resizer, 'data-pc-column-resizer', 'true');
+                !this.$unstyled() && this.renderer.addClass(this.resizer, 'p-datatable-column-resizer');
                 this.renderer.appendChild(this.el.nativeElement, this.resizer);
                 this.zone.runOutsideAngular(() => {
                     this.resizerMouseDownListener = this.renderer.listen(this.resizer, 'mousedown', this.onMouseDown.bind(this));
@@ -5125,10 +5187,10 @@ class ResizableColumn extends BaseComponent {
         }
         this.unbindDocumentEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ResizableColumn, deps: [{ token: Table }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.4", type: ResizableColumn, isStandalone: false, selector: "[pResizableColumn]", inputs: { pResizableColumnDisabled: ["pResizableColumnDisabled", "pResizableColumnDisabled", booleanAttribute] }, host: { properties: { "class": "cx('resizableColumn')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ResizableColumn, deps: [{ token: Table }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: ResizableColumn, isStandalone: false, selector: "[pResizableColumn]", inputs: { pResizableColumnDisabled: ["pResizableColumnDisabled", "pResizableColumnDisabled", booleanAttribute] }, host: { properties: { "class": "cx('resizableColumn')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ResizableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ResizableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pResizableColumn]',
@@ -5198,7 +5260,7 @@ class ReorderableColumn extends BaseComponent {
         }
     }
     onMouseDown(event) {
-        if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-datatable-column-resizer'))
+        if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || find(event.target, '[data-pc-column-resizer="true"]'))
             this.el.nativeElement.draggable = false;
         else
             this.el.nativeElement.draggable = true;
@@ -5226,10 +5288,10 @@ class ReorderableColumn extends BaseComponent {
     onDestroy() {
         this.unbindEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReorderableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.4", type: ReorderableColumn, isStandalone: false, selector: "[pReorderableColumn]", inputs: { pReorderableColumnDisabled: ["pReorderableColumnDisabled", "pReorderableColumnDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" }, properties: { "class": "cx('reorderableColumn')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ReorderableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: ReorderableColumn, isStandalone: false, selector: "[pReorderableColumn]", inputs: { pReorderableColumnDisabled: ["pReorderableColumnDisabled", "pReorderableColumnDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" }, properties: { "class": "cx('reorderableColumn')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReorderableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ReorderableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pReorderableColumn]',
@@ -5267,7 +5329,7 @@ class EditableColumn extends BaseComponent {
     }
     onAfterViewInit() {
         if (this.isEnabled()) {
-            DomHandler.addClass(this.el.nativeElement, 'p-editable-column');
+            !this.$unstyled() && DomHandler.addClass(this.el.nativeElement, 'p-editable-column');
         }
     }
     onClick(event) {
@@ -5289,7 +5351,8 @@ class EditableColumn extends BaseComponent {
     }
     openCell() {
         this.dataTable.updateEditingCell(this.el.nativeElement, this.data, this.field, this.rowIndex);
-        DomHandler.addClass(this.el.nativeElement, 'p-cell-editing');
+        !this.$unstyled() && DomHandler.addClass(this.el.nativeElement, 'p-cell-editing');
+        setAttribute(this.el.nativeElement, 'data-p-cell-editing', 'true');
         this.dataTable.onEditInit.emit({
             field: this.field,
             data: this.data,
@@ -5330,6 +5393,7 @@ class EditableColumn extends BaseComponent {
             });
         }
         DomHandler.removeClass(this.dataTable.editingCell, 'p-cell-editing');
+        setAttribute(this.el.nativeElement, 'data-p-cell-editing', 'false');
         this.dataTable.editingCell = null;
         this.dataTable.editingCellData = null;
         this.dataTable.editingCellField = null;
@@ -5418,7 +5482,7 @@ class EditableColumn extends BaseComponent {
     findCell(element) {
         if (element) {
             let cell = element;
-            while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) {
+            while (cell && find(cell, '[data-p-cell-editing="true"]')) {
                 cell = cell.parentElement;
             }
             return cell;
@@ -5469,7 +5533,7 @@ class EditableColumn extends BaseComponent {
             }
         }
         if (prevCell) {
-            if (DomHandler.hasClass(prevCell, 'p-editable-column'))
+            if (find(prevCell, '[data-p-editable-column="true"]'))
                 return prevCell;
             else
                 return this.findPreviousEditableColumn(prevCell);
@@ -5487,7 +5551,7 @@ class EditableColumn extends BaseComponent {
             }
         }
         if (nextCell) {
-            if (DomHandler.hasClass(nextCell, 'p-editable-column'))
+            if (find(nextCell, '[data-p-editable-column="true"]'))
                 return nextCell;
             else
                 return this.findNextEditableColumn(nextCell);
@@ -5500,7 +5564,7 @@ class EditableColumn extends BaseComponent {
         let nextRow = cell.parentElement?.nextElementSibling;
         if (nextRow) {
             let nextCell = nextRow.children[index];
-            if (nextCell && DomHandler.hasClass(nextCell, 'p-editable-column')) {
+            if (nextCell && find(nextCell, '[data-p-editable-column="true"]')) {
                 return nextCell;
             }
             return null;
@@ -5513,7 +5577,7 @@ class EditableColumn extends BaseComponent {
         let prevRow = cell.parentElement?.previousElementSibling;
         if (prevRow) {
             let prevCell = prevRow.children[index];
-            if (prevCell && DomHandler.hasClass(prevCell, 'p-editable-column')) {
+            if (prevCell && find(prevCell, '[data-p-editable-column="true"]')) {
                 return prevCell;
             }
             return null;
@@ -5530,14 +5594,18 @@ class EditableColumn extends BaseComponent {
             this.dataTable.overlaySubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EditableColumn, deps: [{ token: Table }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.4", type: EditableColumn, isStandalone: false, selector: "[pEditableColumn]", inputs: { data: ["pEditableColumn", "data"], field: ["pEditableColumnField", "field"], rowIndex: ["pEditableColumnRowIndex", "rowIndex"], pEditableColumnDisabled: ["pEditableColumnDisabled", "pEditableColumnDisabled", booleanAttribute], pFocusCellSelector: "pFocusCellSelector" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.escape": "onEscapeKeyDown($event)", "keydown.shift.tab": "onShiftKeyDown($event)", "keydown.meta.tab": "onShiftKeyDown($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditableColumn, deps: [{ token: Table }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: EditableColumn, isStandalone: false, selector: "[pEditableColumn]", inputs: { data: ["pEditableColumn", "data"], field: ["pEditableColumnField", "field"], rowIndex: ["pEditableColumnRowIndex", "rowIndex"], pEditableColumnDisabled: ["pEditableColumnDisabled", "pEditableColumnDisabled", booleanAttribute], pFocusCellSelector: "pFocusCellSelector" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.escape": "onEscapeKeyDown($event)", "keydown.shift.tab": "onShiftKeyDown($event)", "keydown.meta.tab": "onShiftKeyDown($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)" }, properties: { "class": "cx('root')", "attr.data-p-editable-column": "true" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EditableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pEditableColumn]',
-                    standalone: false
+                    standalone: false,
+                    host: {
+                        '[class]': "cx('root')",
+                        '[attr.data-p-editable-column]': 'true'
+                    }
                 }]
         }], ctorParameters: () => [{ type: Table }, { type: i0.NgZone }], propDecorators: { data: [{
                 type: Input,
@@ -5593,10 +5661,10 @@ class EditableRow extends BaseComponent {
     isEnabled() {
         return this.pEditableRowDisabled !== true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EditableRow, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.4", type: EditableRow, isStandalone: false, selector: "[pEditableRow]", inputs: { data: ["pEditableRow", "data"], pEditableRowDisabled: ["pEditableRowDisabled", "pEditableRowDisabled", booleanAttribute] }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditableRow, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: EditableRow, isStandalone: false, selector: "[pEditableRow]", inputs: { data: ["pEditableRow", "data"], pEditableRowDisabled: ["pEditableRowDisabled", "pEditableRowDisabled", booleanAttribute] }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pEditableRow]',
@@ -5621,10 +5689,10 @@ class InitEditableRow extends BaseComponent {
         this.dataTable.initRowEdit(this.editableRow.data);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InitEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: InitEditableRow, isStandalone: false, selector: "[pInitEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-init" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InitEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: InitEditableRow, isStandalone: false, selector: "[pInitEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-init" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InitEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InitEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pInitEditableRow]',
@@ -5649,10 +5717,10 @@ class SaveEditableRow extends BaseComponent {
         this.dataTable.saveRowEdit(this.editableRow.data, this.editableRow.el.nativeElement);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SaveEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: SaveEditableRow, isStandalone: false, selector: "[pSaveEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-save" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SaveEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: SaveEditableRow, isStandalone: false, selector: "[pSaveEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-save" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SaveEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SaveEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSaveEditableRow]',
@@ -5678,10 +5746,10 @@ class CancelEditableRow extends BaseComponent {
         this.dataTable.cancelRowEdit(this.editableRow.data);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CancelEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: CancelEditableRow, isStandalone: false, selector: "[pCancelEditableRow]", host: { listeners: { "click": "onClick($event)" }, properties: { "class": "cx('rowEditorCancel')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CancelEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: CancelEditableRow, isStandalone: false, selector: "[pCancelEditableRow]", host: { listeners: { "click": "onClick($event)" }, properties: { "class": "cx('rowEditorCancel')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CancelEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CancelEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pCancelEditableRow]',
@@ -5725,8 +5793,8 @@ class CellEditor extends BaseComponent {
     get editing() {
         return ((this.dataTable.editingCell && this.editableColumn && this.dataTable.editingCell === this.editableColumn.el.nativeElement) || (this.editableRow && this.dataTable.editMode === 'row' && this.dataTable.isRowEditing(this.editableRow.data)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CellEditor, deps: [{ token: Table }, { token: EditableColumn, optional: true }, { token: EditableRow, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: CellEditor, isStandalone: false, selector: "p-cellEditor", queries: [{ propertyName: "_inputTemplate", first: true, predicate: ["input"], descendants: true }, { propertyName: "_outputTemplate", first: true, predicate: ["output"], descendants: true }, { propertyName: "_templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CellEditor, deps: [{ token: Table }, { token: EditableColumn, optional: true }, { token: EditableRow, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: CellEditor, isStandalone: false, selector: "p-cellEditor", queries: [{ propertyName: "_inputTemplate", first: true, predicate: ["input"], descendants: true }, { propertyName: "_outputTemplate", first: true, predicate: ["output"], descendants: true }, { propertyName: "_templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="editing">
             <ng-container *ngTemplateOutlet="inputTemplate || _inputTemplate"></ng-container>
         </ng-container>
@@ -5735,7 +5803,7 @@ class CellEditor extends BaseComponent {
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CellEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CellEditor, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-cellEditor',
@@ -5804,21 +5872,21 @@ class TableRadioButton extends BaseComponent {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableRadioButton, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: TableRadioButton, isStandalone: false, selector: "p-tableRadioButton", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["rb"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<p-radioButton #rb [(ngModel)]="checked" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel" [binary]="true" [value]="value" (onClick)="onClick($event)" /> `, isInline: true, dependencies: [{ kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableRadioButton, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: TableRadioButton, isStandalone: false, selector: "p-tableRadioButton", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["rb"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<p-radioButton #rb [(ngModel)]="checked" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel" [binary]="true" [value]="value" (onClick)="onClick($event)" [unstyled]="unstyled()" /> `, isInline: true, dependencies: [{ kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableRadioButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableRadioButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableRadioButton',
                     standalone: false,
-                    template: `<p-radioButton #rb [(ngModel)]="checked" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel" [binary]="true" [value]="value" (onClick)="onClick($event)" /> `,
+                    template: `<p-radioButton #rb [(ngModel)]="checked" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel" [binary]="true" [value]="value" (onClick)="onClick($event)" [unstyled]="unstyled()" /> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
         }], ctorParameters: () => [{ type: Table }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
-            }], ariaLabel: [{
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{
                 type: Input
             }], inputViewChild: [{
                 type: ViewChild,
@@ -5863,9 +5931,9 @@ class TableCheckbox extends BaseComponent {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableCheckbox, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TableCheckbox, isStandalone: false, selector: "p-tableCheckbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-        <p-checkbox [(ngModel)]="checked" [binary]="true" (onChange)="onClick($event)" [required]="required()" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableCheckbox, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TableCheckbox, isStandalone: false, selector: "p-tableCheckbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+        <p-checkbox [(ngModel)]="checked" [binary]="true" (onChange)="onClick($event)" [required]="required()" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel" [unstyled]="unstyled()">
             @if (dataTable.checkboxIconTemplate || dataTable._checkboxIconTemplate; as template) {
                 <ng-template pTemplate="icon">
                     <ng-template *ngTemplateOutlet="template; context: { $implicit: checked }" />
@@ -5874,13 +5942,13 @@ class TableCheckbox extends BaseComponent {
         </p-checkbox>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableCheckbox',
                     standalone: false,
                     template: `
-        <p-checkbox [(ngModel)]="checked" [binary]="true" (onChange)="onClick($event)" [required]="required()" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel">
+        <p-checkbox [(ngModel)]="checked" [binary]="true" (onChange)="onClick($event)" [required]="required()" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel" [unstyled]="unstyled()">
             @if (dataTable.checkboxIconTemplate || dataTable._checkboxIconTemplate; as template) {
                 <ng-template pTemplate="icon">
                     <ng-template *ngTemplateOutlet="template; context: { $implicit: checked }" />
@@ -5893,7 +5961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { value: [{
                 type: Input
-            }], ariaLabel: [{
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{
                 type: Input
             }] } });
 class TableHeaderCheckbox extends BaseComponent {
@@ -5957,9 +6025,9 @@ class TableHeaderCheckbox extends BaseComponent {
             return ObjectUtils.isNotEmpty(selectableVal) && ObjectUtils.isNotEmpty(this.dataTable.selection) && selectableVal.every((v) => this.dataTable.selection.some((s) => this.dataTable.equals(v, s)));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableHeaderCheckbox, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TableHeaderCheckbox, isStandalone: false, selector: "p-tableHeaderCheckbox", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
-        <p-checkbox [pt]="ptm('pcCheckbox')" [(ngModel)]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="isDisabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableHeaderCheckbox, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TableHeaderCheckbox, isStandalone: false, selector: "p-tableHeaderCheckbox", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <p-checkbox [pt]="ptm('pcCheckbox')" [(ngModel)]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="isDisabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel" [unstyled]="unstyled()">
             @if (dataTable.headerCheckboxIconTemplate || dataTable._headerCheckboxIconTemplate; as template) {
                 <ng-template pTemplate="icon">
                     <ng-template *ngTemplateOutlet="template; context: { $implicit: checked }" />
@@ -5968,13 +6036,13 @@ class TableHeaderCheckbox extends BaseComponent {
         </p-checkbox>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableHeaderCheckbox',
                     standalone: false,
                     template: `
-        <p-checkbox [pt]="ptm('pcCheckbox')" [(ngModel)]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="isDisabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel">
+        <p-checkbox [pt]="ptm('pcCheckbox')" [(ngModel)]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="isDisabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel" [unstyled]="unstyled()">
             @if (dataTable.headerCheckboxIconTemplate || dataTable._headerCheckboxIconTemplate; as template) {
                 <ng-template pTemplate="icon">
                     <ng-template *ngTemplateOutlet="template; context: { $implicit: checked }" />
@@ -5986,7 +6054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { ariaLabel: [{
+        }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{
                 type: Input
             }] } });
 class ReorderableRowHandle extends BaseComponent {
@@ -6004,10 +6072,10 @@ class ReorderableRowHandle extends BaseComponent {
     onAfterViewInit() {
         // DomHandler.addClass(this.el.nativeElement, 'p-datatable-reorderable-row-handle');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReorderableRowHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: ReorderableRowHandle, isStandalone: false, selector: "[pReorderableRowHandle]", host: { properties: { "class": "cx('reorderableRowHandle')" } }, providers: [TableStyle], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ReorderableRowHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: ReorderableRowHandle, isStandalone: false, selector: "[pReorderableRowHandle]", host: { properties: { "class": "cx('reorderableRowHandle')" } }, providers: [TableStyle], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReorderableRowHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ReorderableRowHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pReorderableRowHandle]',
@@ -6117,10 +6185,10 @@ class ReorderableRow extends BaseComponent {
     onDestroy() {
         this.unbindEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReorderableRow, deps: [{ token: Table }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.4", type: ReorderableRow, isStandalone: false, selector: "[pReorderableRow]", inputs: { index: ["pReorderableRow", "index"], pReorderableRowDisabled: ["pReorderableRowDisabled", "pReorderableRowDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" } }, usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ReorderableRow, deps: [{ token: Table }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: ReorderableRow, isStandalone: false, selector: "[pReorderableRow]", inputs: { index: ["pReorderableRow", "index"], pReorderableRowDisabled: ["pReorderableRowDisabled", "pReorderableRowDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" } }, usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReorderableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ReorderableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pReorderableRow]',
@@ -6144,6 +6212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class ColumnFilter extends BaseComponent {
     hostName = 'Table';
     bindDirectiveInstance = inject(Bind, { self: true });
+    _componentStyle = inject(TableStyle);
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptm('columnFilter'));
     }
@@ -6320,6 +6389,13 @@ class ColumnFilter extends BaseComponent {
             clear: { outlined: true, size: 'small' }
         }
     };
+    motionOptions = input(undefined, ...(ngDevMode ? [{ debugName: "motionOptions" }] : []));
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : []));
     /**
      * Callback to invoke on overlay is shown.
      * @param {AnimationEvent} originalEvent - animation event.
@@ -6614,55 +6690,53 @@ class ColumnFilter extends BaseComponent {
     findNextItem(item) {
         let nextItem = item.nextElementSibling;
         if (nextItem)
-            return DomHandler.hasClass(nextItem, 'p-datatable-filter-constraint-separator') ? this.findNextItem(nextItem) : nextItem;
+            return find(nextItem, '[data-pc-section="filterconstraintseparator"]') ? this.findNextItem(nextItem) : nextItem;
         else
             return item.parentElement?.firstElementChild;
     }
     findPrevItem(item) {
         let prevItem = item.previousElementSibling;
         if (prevItem)
-            return DomHandler.hasClass(prevItem, 'p-datatable-filter-constraint-separator') ? this.findPrevItem(prevItem) : prevItem;
+            return find(prevItem, '[data-pc-section="filterconstraintseparator"]') ? this.findPrevItem(prevItem) : prevItem;
         else
             return item.parentElement?.lastElementChild;
     }
     onContentClick() {
         this.selfClick = true;
     }
-    onOverlayAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.overlay = event.element;
-                this.renderer.appendChild(this.document.body, this.overlay);
-                ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
-                DomHandler.absolutePosition(this.overlay, this.icon?.nativeElement);
-                this.bindDocumentClickListener();
-                this.bindDocumentResizeListener();
-                this.bindScrollListener();
-                this.overlayEventListener = (e) => {
-                    if (this.overlay && this.overlay.contains(e.target)) {
-                        this.selfClick = true;
-                    }
-                };
-                this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
-                this.onShow.emit({ originalEvent: event });
-                break;
-            case 'void':
-                this.onOverlayHide();
-                if (this.overlaySubscription) {
-                    this.overlaySubscription.unsubscribe();
-                }
-                break;
+    onOverlayBeforeEnter(event) {
+        this.overlay = event.element;
+        if (this.overlay && this.overlay.parentElement !== this.document.body) {
+            const buttonEl = findSingle(this.el.nativeElement, '[data-pc-name="pccolumnfilterbutton"]');
+            appendChild(this.document.body, this.overlay);
+            addStyle(this.overlay, { position: 'absolute', top: '0' });
+            absolutePosition(this.overlay, buttonEl);
+            ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
+        }
+        this.bindDocumentClickListener();
+        this.bindDocumentResizeListener();
+        this.bindScrollListener();
+        this.overlayEventListener = (e) => {
+            if (this.overlay && this.overlay.contains(e.target)) {
+                this.selfClick = true;
+            }
+        };
+        this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
+        this.onShow.emit({ originalEvent: event });
+        this.focusOnFirstElement();
+    }
+    onOverlayAnimationAfterLeave(event) {
+        this.restoreOverlayAppend();
+        this.onOverlayHide();
+        if (this.overlaySubscription) {
+            this.overlaySubscription.unsubscribe();
         }
+        ZIndexUtils.clear(this.overlay);
+        this.onHide.emit({ originalEvent: event });
     }
-    onOverlayAnimationEnd(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.focusOnFirstElement();
-                break;
-            case 'void':
-                ZIndexUtils.clear(event.element);
-                this.onHide.emit({ originalEvent: event });
-                break;
+    restoreOverlayAppend() {
+        if (this.overlay) {
+            this.el.nativeElement.appendChild(this.overlay);
         }
     }
     focusOnFirstElement() {
@@ -6702,23 +6776,23 @@ class ColumnFilter extends BaseComponent {
         return false;
     }
     isOutsideClicked(event) {
-        return !(DomHandler.hasClass(this.overlay?.nextElementSibling, 'p-overlay') ||
-            DomHandler.hasClass(this.overlay?.nextElementSibling, 'p-popover') ||
+        return !(findSingle(this.overlay.nextElementSibling, '[data-pc-section="filteroverlay"]') ||
+            findSingle(this.overlay.nextElementSibling, '[data-pc-name="popover"]') ||
             this.overlay?.isSameNode(event.target) ||
             this.overlay?.contains(event.target) ||
             this.icon?.nativeElement.isSameNode(event.target) ||
             this.icon?.nativeElement.contains(event.target) ||
-            DomHandler.hasClass(event.target, 'p-datatable-filter-add-rule-button') ||
-            DomHandler.hasClass(event.target.parentElement, 'p-datatable-filter-add-rule-button') ||
-            DomHandler.hasClass(event.target, 'p-datatable-filter-remove-rule-button') ||
-            DomHandler.hasClass(event.target.parentElement, 'p-datatable-filter-remove-rule-button'));
+            findSingle(event.target, '[data-pc-name="pcaddrulebuttonlabel"]') ||
+            findSingle(event.target.parentElement, '[data-pc-name="pcaddrulebuttonlabel"]') ||
+            findSingle(event.target, '[data-pc-name="pcfilterremoverulebutton"]') ||
+            findSingle(event.target.parentElement, '[data-pc-name="pcfilterremoverulebutton"]'));
     }
     bindDocumentClickListener() {
         if (!this.documentClickListener) {
             const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
             this.documentClickListener = this.renderer.listen(documentTarget, 'mousedown', (event) => {
                 const dialogElements = document.querySelectorAll('[role="dialog"]');
-                const targetIsColumnFilterMenuButton = event.target.closest('.p-datatable-column-filter-button');
+                const targetIsColumnFilterMenuButton = event.target.closest('[data-pc-name="pccolumnfilterbutton"]');
                 if (this.overlayVisible && this.isOutsideClicked(event) && (targetIsColumnFilterMenuButton || dialogElements?.length <= 1)) {
                     this.hide();
                 }
@@ -6799,9 +6873,9 @@ class ColumnFilter extends BaseComponent {
             this.overlaySubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColumnFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ColumnFilter, isStandalone: false, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: { field: "field", type: "type", display: "display", showMenu: ["showMenu", "showMenu", booleanAttribute], matchMode: "matchMode", operator: "operator", showOperator: ["showOperator", "showOperator", booleanAttribute], showClearButton: ["showClearButton", "showClearButton", booleanAttribute], showApplyButton: ["showApplyButton", "showApplyButton", booleanAttribute], showMatchModes: ["showMatchModes", "showMatchModes", booleanAttribute], showAddButton: ["showAddButton", "showAddButton", booleanAttribute], hideOnClear: ["hideOnClear", "hideOnClear", booleanAttribute], placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: ["maxConstraints", "maxConstraints", numberAttribute], minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, undefined)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, undefined)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", filterOn: "filterOn", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], showButtons: ["showButtons", "showButtons", booleanAttribute], ariaLabel: "ariaLabel", filterButtonProps: "filterButtonProps" }, outputs: { onShow: "onShow", onHide: "onHide" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "removeRuleIconTemplate", first: true, predicate: ["removeruleicon"] }, { propertyName: "addRuleIconTemplate", first: true, predicate: ["addruleicon"] }, { propertyName: "clearFilterIconTemplate", first: true, predicate: ["clearfiltericon"] }, { propertyName: "_templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "icon", first: true, predicate: Button, descendants: true, read: ElementRef }, { propertyName: "clearButtonViewChild", first: true, predicate: ["clearBtn"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
-        <div [class]="cx('filter')" [pBind]="ptm('filter')">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ColumnFilter, isStandalone: false, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: false, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, matchMode: { classPropertyName: "matchMode", publicName: "matchMode", isSignal: false, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: false, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showApplyButton: { classPropertyName: "showApplyButton", publicName: "showApplyButton", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showMatchModes: { classPropertyName: "showMatchModes", publicName: "showMatchModes", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideOnClear: { classPropertyName: "hideOnClear", publicName: "hideOnClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, matchModeOptions: { classPropertyName: "matchModeOptions", publicName: "matchModeOptions", isSignal: false, isRequired: false, transformFunction: null }, maxConstraints: { classPropertyName: "maxConstraints", publicName: "maxConstraints", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minFractionDigits: { classPropertyName: "minFractionDigits", publicName: "minFractionDigits", isSignal: false, isRequired: false, transformFunction: (value) => numberAttribute(value, undefined) }, maxFractionDigits: { classPropertyName: "maxFractionDigits", publicName: "maxFractionDigits", isSignal: false, isRequired: false, transformFunction: (value) => numberAttribute(value, undefined) }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: false, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, localeMatcher: { classPropertyName: "localeMatcher", publicName: "localeMatcher", isSignal: false, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: false, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: false, isRequired: false, transformFunction: null }, filterOn: { classPropertyName: "filterOn", publicName: "filterOn", isSignal: false, isRequired: false, transformFunction: null }, useGrouping: { classPropertyName: "useGrouping", publicName: "useGrouping", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, filterButtonProps: { classPropertyName: "filterButtonProps", publicName: "filterButtonProps", isSignal: false, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide" }, providers: [TableStyle], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "removeRuleIconTemplate", first: true, predicate: ["removeruleicon"] }, { propertyName: "addRuleIconTemplate", first: true, predicate: ["addruleicon"] }, { propertyName: "clearFilterIconTemplate", first: true, predicate: ["clearfiltericon"] }, { propertyName: "_templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "icon", first: true, predicate: Button, descendants: true, read: ElementRef }, { propertyName: "clearButtonViewChild", first: true, predicate: ["clearBtn"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <div [class]="cx('filter')">
             <p-columnFilterFormElement
                 *ngIf="display === 'row'"
                 class="p-fluid"
@@ -6823,6 +6897,7 @@ class ColumnFilter extends BaseComponent {
                 [showButtons]="showButtons"
                 [filterOn]="filterOn"
                 [pt]="pt()"
+                [unstyled]="unstyled()"
             ></p-columnFilterFormElement>
             <p-button
                 *ngIf="showMenuButton"
@@ -6835,147 +6910,153 @@ class ColumnFilter extends BaseComponent {
                 (click)="toggleMenu($event)"
                 (keydown)="onToggleButtonKeyDown($event)"
                 [buttonProps]="filterButtonProps?.filter"
+                #menuButton
+                [unstyled]="unstyled()"
             >
                 <ng-template #icon>
                     <ng-container>
                         <svg data-p-icon="filter" *ngIf="!filterIconTemplate && !_filterIconTemplate && !hasFilter" [pBind]="ptm('pcColumnFilterButton')['icon']" />
                         <svg data-p-icon="filter-fill" *ngIf="!filterIconTemplate && !_filterIconTemplate && hasFilter" [pBind]="ptm('pcColumnFilterButton')['icon']" />
-                        <span class="pi-filter-icon" *ngIf="filterIconTemplate || _filterIconTemplate" [pBind]="ptm('pcColumnFilterButton')['icon']">
+                        <span *ngIf="filterIconTemplate || _filterIconTemplate" [pBind]="ptm('pcColumnFilterButton')['icon']" [attr.data-pc-section]="'columnfilterbuttonicon'">
                             <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate; context: { hasFilter: hasFilter }"></ng-template>
                         </span>
                     </ng-container>
                 </ng-template>
             </p-button>
 
-            <div
-                *ngIf="showMenu && overlayVisible"
-                [class]="cx('filterOverlay')"
-                [pBind]="ptm('filterOverlay')"
-                [id]="overlayId"
-                [attr.aria-modal]="true"
-                role="dialog"
-                (click)="onContentClick()"
-                [@overlayAnimation]="'visible'"
-                (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-                (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
-                (keydown.escape)="onEscape()"
-            >
-                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: field }"></ng-container>
-                <ul *ngIf="display === 'row'; else menu" [class]="cx('filterConstraintList')" [pBind]="ptm('filterConstraintList')">
-                    <li
-                        *ngFor="let matchMode of matchModes; let i = index"
-                        (click)="onRowMatchModeChange(matchMode.value)"
-                        (keydown)="onRowMatchModeKeyDown($event)"
-                        (keydown.enter)="onRowMatchModeChange(matchMode.value)"
-                        [class]="cx('filterConstraint')"
-                        [pBind]="ptm('filterConstraint', ptmFilterConstraintOptions(matchMode))"
-                        [class.p-datatable-filter-constraint-selected]="isRowMatchModeSelected(matchMode.value)"
-                        [attr.tabindex]="i === 0 ? '0' : null"
-                    >
-                        {{ matchMode.label }}
-                    </li>
-                    <li [class]="cx('filterConstraintSeparator')" [pBind]="ptm('filterConstraintSeparator', { context: { index: i } })"></li>
-                    <li [class]="cx('filterConstraint')" [pBind]="ptm('emtpyFilterLabel')" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">
-                        {{ noFilterLabel }}
-                    </li>
-                </ul>
-                <ng-template #menu>
-                    <div [class]="cx('filterOperator')" [pBind]="ptm('filterOperator')" *ngIf="isShowOperator">
-                        <p-select [options]="operatorOptions" [pt]="ptm('pcFilterOperatorDropdown')" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" [styleClass]="cx('pcFilterOperatorDropdown')"></p-select>
-                    </div>
-                    <div [class]="cx('filterRuleList')" [pBind]="ptm('filterRuleList')">
-                        <div *ngFor="let fieldConstraint of fieldConstraints; let i = index" [ngClass]="cx('filterRule')" [pBind]="ptm('filterRule')">
-                            <p-select
-                                *ngIf="showMatchModes && matchModes"
-                                [options]="matchModes"
-                                [ngModel]="fieldConstraint.matchMode"
-                                (ngModelChange)="onMenuMatchModeChange($event, fieldConstraint)"
-                                [styleClass]="cx('pcFilterConstraintDropdown')"
-                                [pt]="ptm('pcFilterConstraintDropdown')"
-                            ></p-select>
-                            <p-columnFilterFormElement
-                                [type]="type"
-                                [field]="field"
-                                [filterConstraint]="fieldConstraint"
-                                [filterTemplate]="filterTemplate || _filterTemplate"
-                                [placeholder]="placeholder"
-                                [minFractionDigits]="minFractionDigits"
-                                [maxFractionDigits]="maxFractionDigits"
-                                [prefix]="prefix"
-                                [suffix]="suffix"
-                                [locale]="locale"
-                                [localeMatcher]="localeMatcher"
-                                [currency]="currency"
-                                [currencyDisplay]="currencyDisplay"
-                                [useGrouping]="useGrouping"
-                                [filterOn]="filterOn"
-                                [pt]="pt()"
-                            ></p-columnFilterFormElement>
-                            <div>
-                                <p-button
-                                    *ngIf="showRemoveIcon"
-                                    [styleClass]="cx('pcFilterRemoveRuleButton')"
-                                    [pt]="ptm('pcFilterRemoveRuleButton')"
-                                    [text]="true"
-                                    severity="danger"
-                                    size="small"
-                                    (onClick)="removeConstraint(fieldConstraint)"
-                                    [ariaLabel]="removeRuleButtonLabel"
-                                    [label]="removeRuleButtonLabel"
-                                    [buttonProps]="filterButtonProps?.popover?.removeRule"
-                                >
-                                    <ng-template #icon>
-                                        <svg data-p-icon="trash" *ngIf="!removeRuleIconTemplate && !_removeRuleIconTemplate" [pBind]="ptm('pcFilterRemoveRuleButton')['icon']" />
-                                        <ng-template *ngTemplateOutlet="removeRuleIconTemplate || _removeRuleIconTemplate"></ng-template>
-                                    </ng-template>
-                                </p-button>
+            <p-motion [visible]="showMenu && overlayVisible" name="p-anchored-overlay" (onBeforeEnter)="onOverlayBeforeEnter($event)" (onAfterLeave)="onOverlayAnimationAfterLeave($event)" [options]="computedMotionOptions()">
+                <div [class]="cx('filterOverlay')" [pBind]="ptm('filterOverlay')" [id]="overlayId" [attr.aria-modal]="true" role="dialog" (click)="onContentClick()" (keydown.escape)="onEscape()">
+                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: field }"></ng-container>
+                    <ul *ngIf="display === 'row'; else menu" [class]="cx('filterConstraintList')" [pBind]="ptm('filterConstraintList')">
+                        <li
+                            *ngFor="let matchMode of matchModes; let i = index"
+                            (click)="onRowMatchModeChange(matchMode.value)"
+                            (keydown)="onRowMatchModeKeyDown($event)"
+                            (keydown.enter)="onRowMatchModeChange(matchMode.value)"
+                            [class]="cx('filterConstraint')"
+                            [pBind]="ptm('filterConstraint', ptmFilterConstraintOptions(matchMode))"
+                            [class.p-datatable-filter-constraint-selected]="isRowMatchModeSelected(matchMode.value)"
+                            [attr.tabindex]="i === 0 ? '0' : null"
+                        >
+                            {{ matchMode.label }}
+                        </li>
+                        <li [class]="cx('filterConstraintSeparator')" [pBind]="ptm('filterConstraintSeparator', { context: { index: i } })"></li>
+                        <li [class]="cx('filterConstraint')" [pBind]="ptm('emtpyFilterLabel')" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">
+                            {{ noFilterLabel }}
+                        </li>
+                    </ul>
+                    <ng-template #menu>
+                        <div [class]="cx('filterOperator')" [pBind]="ptm('filterOperator')" *ngIf="isShowOperator">
+                            <p-select [options]="operatorOptions" [pt]="ptm('pcFilterOperatorDropdown')" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" [styleClass]="cx('pcFilterOperatorDropdown')" [unstyled]="unstyled()"></p-select>
+                        </div>
+                        <div [class]="cx('filterRuleList')" [pBind]="ptm('filterRuleList')">
+                            <div *ngFor="let fieldConstraint of fieldConstraints; let i = index" [ngClass]="cx('filterRule')" [pBind]="ptm('filterRule')">
+                                <p-select
+                                    *ngIf="showMatchModes && matchModes"
+                                    [options]="matchModes"
+                                    [ngModel]="fieldConstraint.matchMode"
+                                    (ngModelChange)="onMenuMatchModeChange($event, fieldConstraint)"
+                                    [styleClass]="cx('pcFilterConstraintDropdown')"
+                                    [pt]="ptm('pcFilterConstraintDropdown')"
+                                    [unstyled]="unstyled()"
+                                ></p-select>
+                                <p-columnFilterFormElement
+                                    [type]="type"
+                                    [field]="field"
+                                    [filterConstraint]="fieldConstraint"
+                                    [filterTemplate]="filterTemplate || _filterTemplate"
+                                    [placeholder]="placeholder"
+                                    [minFractionDigits]="minFractionDigits"
+                                    [maxFractionDigits]="maxFractionDigits"
+                                    [prefix]="prefix"
+                                    [suffix]="suffix"
+                                    [locale]="locale"
+                                    [localeMatcher]="localeMatcher"
+                                    [currency]="currency"
+                                    [currencyDisplay]="currencyDisplay"
+                                    [useGrouping]="useGrouping"
+                                    [filterOn]="filterOn"
+                                    [pt]="pt()"
+                                    [unstyled]="unstyled()"
+                                ></p-columnFilterFormElement>
+                                <div>
+                                    <p-button
+                                        *ngIf="showRemoveIcon"
+                                        [styleClass]="cx('pcFilterRemoveRuleButton')"
+                                        [pt]="ptm('pcFilterRemoveRuleButton')"
+                                        [text]="true"
+                                        severity="danger"
+                                        size="small"
+                                        (onClick)="removeConstraint(fieldConstraint)"
+                                        [ariaLabel]="removeRuleButtonLabel"
+                                        [label]="removeRuleButtonLabel"
+                                        [buttonProps]="filterButtonProps?.popover?.removeRule"
+                                        [unstyled]="unstyled()"
+                                    >
+                                        <ng-template #icon>
+                                            <svg data-p-icon="trash" *ngIf="!removeRuleIconTemplate && !_removeRuleIconTemplate" [pBind]="ptm('pcFilterRemoveRuleButton')['icon']" />
+                                            <ng-template *ngTemplateOutlet="removeRuleIconTemplate || _removeRuleIconTemplate"></ng-template>
+                                        </ng-template>
+                                    </p-button>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    @if (isShowAddConstraint) {
-                        <p-button
-                            type="button"
-                            [pt]="ptm('pcAddRuleButtonLabel')"
-                            [label]="addRuleButtonLabel"
-                            [attr.aria-label]="addRuleButtonLabel"
-                            [styleClass]="cx('pcFilterAddRuleButton')"
-                            [text]="true"
-                            size="small"
-                            (onClick)="addConstraint()"
-                            [buttonProps]="filterButtonProps?.popover?.addRule"
-                        >
-                            <ng-template #icon>
-                                <svg data-p-icon="plus" *ngIf="!addRuleIconTemplate && !_addRuleIconTemplate" [pBind]="ptm('pcAddRuleButtonLabel')['icon']" />
-                                <ng-template *ngTemplateOutlet="addRuleIconTemplate || _addRuleIconTemplate"></ng-template>
-                            </ng-template>
-                        </p-button>
-                    }
-                    <div [class]="cx('filterButtonbar')" [pBind]="ptm('filterButtonBar')">
-                        <p-button
-                            #clearBtn
-                            *ngIf="showClearButton"
-                            [outlined]="true"
-                            (onClick)="clearFilter()"
-                            [attr.aria-label]="clearButtonLabel"
-                            [label]="clearButtonLabel"
-                            [buttonProps]="filterButtonProps?.popover?.clear"
-                            [pt]="ptm('pcFilterClearButton')"
-                        />
-                        <p-button *ngIf="showApplyButton" (onClick)="applyFilter()" size="small" [label]="applyButtonLabel" [attr.aria-label]="applyButtonLabel" [buttonProps]="filterButtonProps?.popover?.apply" [pt]="ptm('pcFilterApplyButton')" />
-                    </div>
-                </ng-template>
-                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: field }"></ng-container>
-            </div>
+                        @if (isShowAddConstraint) {
+                            <p-button
+                                type="button"
+                                [pt]="ptm('pcAddRuleButtonLabel')"
+                                [label]="addRuleButtonLabel"
+                                [attr.aria-label]="addRuleButtonLabel"
+                                [styleClass]="cx('pcFilterAddRuleButton')"
+                                [text]="true"
+                                size="small"
+                                (onClick)="addConstraint()"
+                                [buttonProps]="filterButtonProps?.popover?.addRule"
+                                [unstyled]="unstyled()"
+                            >
+                                <ng-template #icon>
+                                    <svg data-p-icon="plus" *ngIf="!addRuleIconTemplate && !_addRuleIconTemplate" [pBind]="ptm('pcAddRuleButtonLabel')['icon']" />
+                                    <ng-template *ngTemplateOutlet="addRuleIconTemplate || _addRuleIconTemplate"></ng-template>
+                                </ng-template>
+                            </p-button>
+                        }
+                        <div [class]="cx('filterButtonbar')" [pBind]="ptm('filterButtonBar')">
+                            <p-button
+                                #clearBtn
+                                *ngIf="showClearButton"
+                                [outlined]="true"
+                                (onClick)="clearFilter()"
+                                [attr.aria-label]="clearButtonLabel"
+                                [label]="clearButtonLabel"
+                                [buttonProps]="filterButtonProps?.popover?.clear"
+                                [pt]="ptm('pcFilterClearButton')"
+                                [unstyled]="unstyled()"
+                            />
+                            <p-button
+                                *ngIf="showApplyButton"
+                                (onClick)="applyFilter()"
+                                size="small"
+                                [label]="applyButtonLabel"
+                                [attr.aria-label]="applyButtonLabel"
+                                [buttonProps]="filterButtonProps?.popover?.apply"
+                                [pt]="ptm('pcFilterApplyButton')"
+                                [unstyled]="unstyled()"
+                            />
+                        </div>
+                    </ng-template>
+                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: field }"></ng-container>
+                </div>
+            </p-motion>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => i10.Select), selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i0.forwardRef(() => i7.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i7.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => i11.Button), selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i0.forwardRef(() => FilterIcon), selector: "[data-p-icon=\"filter\"]" }, { kind: "component", type: i0.forwardRef(() => FilterFillIcon), selector: "[data-p-icon=\"filter-fill\"]" }, { kind: "component", type: i0.forwardRef(() => PlusIcon), selector: "[data-p-icon=\"plus\"]" }, { kind: "component", type: i0.forwardRef(() => TrashIcon), selector: "[data-p-icon=\"trash\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: i0.forwardRef(() => ColumnFilterFormElement), selector: "p-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "ariaLabel", "filterOn"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style$2({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style$2({ opacity: 0 }))])])], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => i10.Select), selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i0.forwardRef(() => i7.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i7.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => i11.Button), selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i0.forwardRef(() => FilterIcon), selector: "[data-p-icon=\"filter\"]" }, { kind: "component", type: i0.forwardRef(() => FilterFillIcon), selector: "[data-p-icon=\"filter-fill\"]" }, { kind: "component", type: i0.forwardRef(() => PlusIcon), selector: "[data-p-icon=\"plus\"]" }, { kind: "component", type: i0.forwardRef(() => TrashIcon), selector: "[data-p-icon=\"trash\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: i0.forwardRef(() => i12.Motion), selector: "p-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }, { kind: "component", type: i0.forwardRef(() => ColumnFilterFormElement), selector: "p-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "ariaLabel", "filterOn"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColumnFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnFilter, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-columnFilter, p-column-filter, p-columnfilter',
                     standalone: false,
                     template: `
-        <div [class]="cx('filter')" [pBind]="ptm('filter')">
+        <div [class]="cx('filter')">
             <p-columnFilterFormElement
                 *ngIf="display === 'row'"
                 class="p-fluid"
@@ -6997,6 +7078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 [showButtons]="showButtons"
                 [filterOn]="filterOn"
                 [pt]="pt()"
+                [unstyled]="unstyled()"
             ></p-columnFilterFormElement>
             <p-button
                 *ngIf="showMenuButton"
@@ -7009,140 +7091,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 (click)="toggleMenu($event)"
                 (keydown)="onToggleButtonKeyDown($event)"
                 [buttonProps]="filterButtonProps?.filter"
+                #menuButton
+                [unstyled]="unstyled()"
             >
                 <ng-template #icon>
                     <ng-container>
                         <svg data-p-icon="filter" *ngIf="!filterIconTemplate && !_filterIconTemplate && !hasFilter" [pBind]="ptm('pcColumnFilterButton')['icon']" />
                         <svg data-p-icon="filter-fill" *ngIf="!filterIconTemplate && !_filterIconTemplate && hasFilter" [pBind]="ptm('pcColumnFilterButton')['icon']" />
-                        <span class="pi-filter-icon" *ngIf="filterIconTemplate || _filterIconTemplate" [pBind]="ptm('pcColumnFilterButton')['icon']">
+                        <span *ngIf="filterIconTemplate || _filterIconTemplate" [pBind]="ptm('pcColumnFilterButton')['icon']" [attr.data-pc-section]="'columnfilterbuttonicon'">
                             <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate; context: { hasFilter: hasFilter }"></ng-template>
                         </span>
                     </ng-container>
                 </ng-template>
             </p-button>
 
-            <div
-                *ngIf="showMenu && overlayVisible"
-                [class]="cx('filterOverlay')"
-                [pBind]="ptm('filterOverlay')"
-                [id]="overlayId"
-                [attr.aria-modal]="true"
-                role="dialog"
-                (click)="onContentClick()"
-                [@overlayAnimation]="'visible'"
-                (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-                (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
-                (keydown.escape)="onEscape()"
-            >
-                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: field }"></ng-container>
-                <ul *ngIf="display === 'row'; else menu" [class]="cx('filterConstraintList')" [pBind]="ptm('filterConstraintList')">
-                    <li
-                        *ngFor="let matchMode of matchModes; let i = index"
-                        (click)="onRowMatchModeChange(matchMode.value)"
-                        (keydown)="onRowMatchModeKeyDown($event)"
-                        (keydown.enter)="onRowMatchModeChange(matchMode.value)"
-                        [class]="cx('filterConstraint')"
-                        [pBind]="ptm('filterConstraint', ptmFilterConstraintOptions(matchMode))"
-                        [class.p-datatable-filter-constraint-selected]="isRowMatchModeSelected(matchMode.value)"
-                        [attr.tabindex]="i === 0 ? '0' : null"
-                    >
-                        {{ matchMode.label }}
-                    </li>
-                    <li [class]="cx('filterConstraintSeparator')" [pBind]="ptm('filterConstraintSeparator', { context: { index: i } })"></li>
-                    <li [class]="cx('filterConstraint')" [pBind]="ptm('emtpyFilterLabel')" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">
-                        {{ noFilterLabel }}
-                    </li>
-                </ul>
-                <ng-template #menu>
-                    <div [class]="cx('filterOperator')" [pBind]="ptm('filterOperator')" *ngIf="isShowOperator">
-                        <p-select [options]="operatorOptions" [pt]="ptm('pcFilterOperatorDropdown')" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" [styleClass]="cx('pcFilterOperatorDropdown')"></p-select>
-                    </div>
-                    <div [class]="cx('filterRuleList')" [pBind]="ptm('filterRuleList')">
-                        <div *ngFor="let fieldConstraint of fieldConstraints; let i = index" [ngClass]="cx('filterRule')" [pBind]="ptm('filterRule')">
-                            <p-select
-                                *ngIf="showMatchModes && matchModes"
-                                [options]="matchModes"
-                                [ngModel]="fieldConstraint.matchMode"
-                                (ngModelChange)="onMenuMatchModeChange($event, fieldConstraint)"
-                                [styleClass]="cx('pcFilterConstraintDropdown')"
-                                [pt]="ptm('pcFilterConstraintDropdown')"
-                            ></p-select>
-                            <p-columnFilterFormElement
-                                [type]="type"
-                                [field]="field"
-                                [filterConstraint]="fieldConstraint"
-                                [filterTemplate]="filterTemplate || _filterTemplate"
-                                [placeholder]="placeholder"
-                                [minFractionDigits]="minFractionDigits"
-                                [maxFractionDigits]="maxFractionDigits"
-                                [prefix]="prefix"
-                                [suffix]="suffix"
-                                [locale]="locale"
-                                [localeMatcher]="localeMatcher"
-                                [currency]="currency"
-                                [currencyDisplay]="currencyDisplay"
-                                [useGrouping]="useGrouping"
-                                [filterOn]="filterOn"
-                                [pt]="pt()"
-                            ></p-columnFilterFormElement>
-                            <div>
-                                <p-button
-                                    *ngIf="showRemoveIcon"
-                                    [styleClass]="cx('pcFilterRemoveRuleButton')"
-                                    [pt]="ptm('pcFilterRemoveRuleButton')"
-                                    [text]="true"
-                                    severity="danger"
-                                    size="small"
-                                    (onClick)="removeConstraint(fieldConstraint)"
-                                    [ariaLabel]="removeRuleButtonLabel"
-                                    [label]="removeRuleButtonLabel"
-                                    [buttonProps]="filterButtonProps?.popover?.removeRule"
-                                >
-                                    <ng-template #icon>
-                                        <svg data-p-icon="trash" *ngIf="!removeRuleIconTemplate && !_removeRuleIconTemplate" [pBind]="ptm('pcFilterRemoveRuleButton')['icon']" />
-                                        <ng-template *ngTemplateOutlet="removeRuleIconTemplate || _removeRuleIconTemplate"></ng-template>
-                                    </ng-template>
-                                </p-button>
+            <p-motion [visible]="showMenu && overlayVisible" name="p-anchored-overlay" (onBeforeEnter)="onOverlayBeforeEnter($event)" (onAfterLeave)="onOverlayAnimationAfterLeave($event)" [options]="computedMotionOptions()">
+                <div [class]="cx('filterOverlay')" [pBind]="ptm('filterOverlay')" [id]="overlayId" [attr.aria-modal]="true" role="dialog" (click)="onContentClick()" (keydown.escape)="onEscape()">
+                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: field }"></ng-container>
+                    <ul *ngIf="display === 'row'; else menu" [class]="cx('filterConstraintList')" [pBind]="ptm('filterConstraintList')">
+                        <li
+                            *ngFor="let matchMode of matchModes; let i = index"
+                            (click)="onRowMatchModeChange(matchMode.value)"
+                            (keydown)="onRowMatchModeKeyDown($event)"
+                            (keydown.enter)="onRowMatchModeChange(matchMode.value)"
+                            [class]="cx('filterConstraint')"
+                            [pBind]="ptm('filterConstraint', ptmFilterConstraintOptions(matchMode))"
+                            [class.p-datatable-filter-constraint-selected]="isRowMatchModeSelected(matchMode.value)"
+                            [attr.tabindex]="i === 0 ? '0' : null"
+                        >
+                            {{ matchMode.label }}
+                        </li>
+                        <li [class]="cx('filterConstraintSeparator')" [pBind]="ptm('filterConstraintSeparator', { context: { index: i } })"></li>
+                        <li [class]="cx('filterConstraint')" [pBind]="ptm('emtpyFilterLabel')" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">
+                            {{ noFilterLabel }}
+                        </li>
+                    </ul>
+                    <ng-template #menu>
+                        <div [class]="cx('filterOperator')" [pBind]="ptm('filterOperator')" *ngIf="isShowOperator">
+                            <p-select [options]="operatorOptions" [pt]="ptm('pcFilterOperatorDropdown')" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" [styleClass]="cx('pcFilterOperatorDropdown')" [unstyled]="unstyled()"></p-select>
+                        </div>
+                        <div [class]="cx('filterRuleList')" [pBind]="ptm('filterRuleList')">
+                            <div *ngFor="let fieldConstraint of fieldConstraints; let i = index" [ngClass]="cx('filterRule')" [pBind]="ptm('filterRule')">
+                                <p-select
+                                    *ngIf="showMatchModes && matchModes"
+                                    [options]="matchModes"
+                                    [ngModel]="fieldConstraint.matchMode"
+                                    (ngModelChange)="onMenuMatchModeChange($event, fieldConstraint)"
+                                    [styleClass]="cx('pcFilterConstraintDropdown')"
+                                    [pt]="ptm('pcFilterConstraintDropdown')"
+                                    [unstyled]="unstyled()"
+                                ></p-select>
+                                <p-columnFilterFormElement
+                                    [type]="type"
+                                    [field]="field"
+                                    [filterConstraint]="fieldConstraint"
+                                    [filterTemplate]="filterTemplate || _filterTemplate"
+                                    [placeholder]="placeholder"
+                                    [minFractionDigits]="minFractionDigits"
+                                    [maxFractionDigits]="maxFractionDigits"
+                                    [prefix]="prefix"
+                                    [suffix]="suffix"
+                                    [locale]="locale"
+                                    [localeMatcher]="localeMatcher"
+                                    [currency]="currency"
+                                    [currencyDisplay]="currencyDisplay"
+                                    [useGrouping]="useGrouping"
+                                    [filterOn]="filterOn"
+                                    [pt]="pt()"
+                                    [unstyled]="unstyled()"
+                                ></p-columnFilterFormElement>
+                                <div>
+                                    <p-button
+                                        *ngIf="showRemoveIcon"
+                                        [styleClass]="cx('pcFilterRemoveRuleButton')"
+                                        [pt]="ptm('pcFilterRemoveRuleButton')"
+                                        [text]="true"
+                                        severity="danger"
+                                        size="small"
+                                        (onClick)="removeConstraint(fieldConstraint)"
+                                        [ariaLabel]="removeRuleButtonLabel"
+                                        [label]="removeRuleButtonLabel"
+                                        [buttonProps]="filterButtonProps?.popover?.removeRule"
+                                        [unstyled]="unstyled()"
+                                    >
+                                        <ng-template #icon>
+                                            <svg data-p-icon="trash" *ngIf="!removeRuleIconTemplate && !_removeRuleIconTemplate" [pBind]="ptm('pcFilterRemoveRuleButton')['icon']" />
+                                            <ng-template *ngTemplateOutlet="removeRuleIconTemplate || _removeRuleIconTemplate"></ng-template>
+                                        </ng-template>
+                                    </p-button>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    @if (isShowAddConstraint) {
-                        <p-button
-                            type="button"
-                            [pt]="ptm('pcAddRuleButtonLabel')"
-                            [label]="addRuleButtonLabel"
-                            [attr.aria-label]="addRuleButtonLabel"
-                            [styleClass]="cx('pcFilterAddRuleButton')"
-                            [text]="true"
-                            size="small"
-                            (onClick)="addConstraint()"
-                            [buttonProps]="filterButtonProps?.popover?.addRule"
-                        >
-                            <ng-template #icon>
-                                <svg data-p-icon="plus" *ngIf="!addRuleIconTemplate && !_addRuleIconTemplate" [pBind]="ptm('pcAddRuleButtonLabel')['icon']" />
-                                <ng-template *ngTemplateOutlet="addRuleIconTemplate || _addRuleIconTemplate"></ng-template>
-                            </ng-template>
-                        </p-button>
-                    }
-                    <div [class]="cx('filterButtonbar')" [pBind]="ptm('filterButtonBar')">
-                        <p-button
-                            #clearBtn
-                            *ngIf="showClearButton"
-                            [outlined]="true"
-                            (onClick)="clearFilter()"
-                            [attr.aria-label]="clearButtonLabel"
-                            [label]="clearButtonLabel"
-                            [buttonProps]="filterButtonProps?.popover?.clear"
-                            [pt]="ptm('pcFilterClearButton')"
-                        />
-                        <p-button *ngIf="showApplyButton" (onClick)="applyFilter()" size="small" [label]="applyButtonLabel" [attr.aria-label]="applyButtonLabel" [buttonProps]="filterButtonProps?.popover?.apply" [pt]="ptm('pcFilterApplyButton')" />
-                    </div>
-                </ng-template>
-                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: field }"></ng-container>
-            </div>
+                        @if (isShowAddConstraint) {
+                            <p-button
+                                type="button"
+                                [pt]="ptm('pcAddRuleButtonLabel')"
+                                [label]="addRuleButtonLabel"
+                                [attr.aria-label]="addRuleButtonLabel"
+                                [styleClass]="cx('pcFilterAddRuleButton')"
+                                [text]="true"
+                                size="small"
+                                (onClick)="addConstraint()"
+                                [buttonProps]="filterButtonProps?.popover?.addRule"
+                                [unstyled]="unstyled()"
+                            >
+                                <ng-template #icon>
+                                    <svg data-p-icon="plus" *ngIf="!addRuleIconTemplate && !_addRuleIconTemplate" [pBind]="ptm('pcAddRuleButtonLabel')['icon']" />
+                                    <ng-template *ngTemplateOutlet="addRuleIconTemplate || _addRuleIconTemplate"></ng-template>
+                                </ng-template>
+                            </p-button>
+                        }
+                        <div [class]="cx('filterButtonbar')" [pBind]="ptm('filterButtonBar')">
+                            <p-button
+                                #clearBtn
+                                *ngIf="showClearButton"
+                                [outlined]="true"
+                                (onClick)="clearFilter()"
+                                [attr.aria-label]="clearButtonLabel"
+                                [label]="clearButtonLabel"
+                                [buttonProps]="filterButtonProps?.popover?.clear"
+                                [pt]="ptm('pcFilterClearButton')"
+                                [unstyled]="unstyled()"
+                            />
+                            <p-button
+                                *ngIf="showApplyButton"
+                                (onClick)="applyFilter()"
+                                size="small"
+                                [label]="applyButtonLabel"
+                                [attr.aria-label]="applyButtonLabel"
+                                [buttonProps]="filterButtonProps?.popover?.apply"
+                                [pt]="ptm('pcFilterApplyButton')"
+                                [unstyled]="unstyled()"
+                            />
+                        </div>
+                    </ng-template>
+                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: field }"></ng-container>
+                </div>
+            </p-motion>
         </div>
     `,
-                    animations: [trigger('overlayAnimation', [transition(':enter', [style$2({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style$2({ opacity: 0 }))])])],
+                    providers: [TableStyle],
                     encapsulation: ViewEncapsulation.None,
                     hostDirectives: [Bind]
                 }]
@@ -7214,7 +7302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], filterButtonProps: [{
                 type: Input
-            }], onShow: [{
+            }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onShow: [{
                 type: Output
             }], onHide: [{
                 type: Output
@@ -7254,6 +7342,7 @@ class ColumnFilterFormElement extends BaseComponent {
     colFilter;
     hostName = 'Table';
     bindDirectiveInstance = inject(Bind, { self: true });
+    _componentStyle = inject(TableStyle);
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptm('columnFilterFormElement'));
     }
@@ -7304,8 +7393,8 @@ class ColumnFilterFormElement extends BaseComponent {
             event.preventDefault();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: Table }, { token: ColumnFilter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: ColumnFilterFormElement, isStandalone: false, selector: "p-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, undefined)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, undefined)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel", filterOn: "filterOn" }, usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: Table }, { token: ColumnFilter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0", type: ColumnFilterFormElement, isStandalone: false, selector: "p-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, undefined)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, undefined)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel", filterOn: "filterOn" }, providers: [TableStyle], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <ng-container *ngIf="filterTemplate; else builtInElement">
             <ng-container
                 *ngTemplateOutlet="
@@ -7343,6 +7432,7 @@ class ColumnFilterFormElement extends BaseComponent {
                     (input)="onModelChange($event.target.value)"
                     (keydown.enter)="onTextInputEnterKeyDown($event)"
                     [attr.placeholder]="placeholder"
+                    [unstyled]="unstyled()"
                 />
                 <p-inputNumber
                     *ngSwitchCase="'numeric'"
@@ -7363,15 +7453,33 @@ class ColumnFilterFormElement extends BaseComponent {
                     [currencyDisplay]="currencyDisplay"
                     [useGrouping]="useGrouping"
                     [pt]="ptm('pcFilterInputNumber')"
+                    [unstyled]="unstyled()"
                 ></p-inputNumber>
-                <p-checkbox [pt]="ptm('pcFilterCheckbox')" [indeterminate]="filterConstraint?.value === null" [binary]="true" *ngSwitchCase="'boolean'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" />
+                <p-checkbox
+                    [pt]="ptm('pcFilterCheckbox')"
+                    [indeterminate]="filterConstraint?.value === null"
+                    [binary]="true"
+                    *ngSwitchCase="'boolean'"
+                    [ngModel]="filterConstraint?.value"
+                    (ngModelChange)="onModelChange($event)"
+                    [unstyled]="unstyled()"
+                />
 
-                <p-datepicker [pt]="ptm('pcFilterDatePicker')" [ariaLabel]="ariaLabel" *ngSwitchCase="'date'" [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" appendTo="body"></p-datepicker>
+                <p-datepicker
+                    [pt]="ptm('pcFilterDatePicker')"
+                    [ariaLabel]="ariaLabel"
+                    *ngSwitchCase="'date'"
+                    [placeholder]="placeholder"
+                    [ngModel]="filterConstraint?.value"
+                    (ngModelChange)="onModelChange($event)"
+                    appendTo="body"
+                    [unstyled]="unstyled()"
+                ></p-datepicker>
             </ng-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i12.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i13.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i14.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i13.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPt", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i14.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i15.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-columnFilterFormElement',
@@ -7414,6 +7522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     (input)="onModelChange($event.target.value)"
                     (keydown.enter)="onTextInputEnterKeyDown($event)"
                     [attr.placeholder]="placeholder"
+                    [unstyled]="unstyled()"
                 />
                 <p-inputNumber
                     *ngSwitchCase="'numeric'"
@@ -7434,13 +7543,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     [currencyDisplay]="currencyDisplay"
                     [useGrouping]="useGrouping"
                     [pt]="ptm('pcFilterInputNumber')"
+                    [unstyled]="unstyled()"
                 ></p-inputNumber>
-                <p-checkbox [pt]="ptm('pcFilterCheckbox')" [indeterminate]="filterConstraint?.value === null" [binary]="true" *ngSwitchCase="'boolean'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" />
+                <p-checkbox
+                    [pt]="ptm('pcFilterCheckbox')"
+                    [indeterminate]="filterConstraint?.value === null"
+                    [binary]="true"
+                    *ngSwitchCase="'boolean'"
+                    [ngModel]="filterConstraint?.value"
+                    (ngModelChange)="onModelChange($event)"
+                    [unstyled]="unstyled()"
+                />
 
-                <p-datepicker [pt]="ptm('pcFilterDatePicker')" [ariaLabel]="ariaLabel" *ngSwitchCase="'date'" [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" appendTo="body"></p-datepicker>
+                <p-datepicker
+                    [pt]="ptm('pcFilterDatePicker')"
+                    [ariaLabel]="ariaLabel"
+                    *ngSwitchCase="'date'"
+                    [placeholder]="placeholder"
+                    [ngModel]="filterConstraint?.value"
+                    (ngModelChange)="onModelChange($event)"
+                    appendTo="body"
+                    [unstyled]="unstyled()"
+                ></p-datepicker>
             </ng-container>
         </ng-template>
     `,
+                    providers: [TableStyle],
                     encapsulation: ViewEncapsulation.None,
                     hostDirectives: [Bind]
                 }]
@@ -7481,8 +7609,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 class TableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: TableModule, declarations: [Table, SortableColumn, FrozenColumn, RowGroupHeader, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, TableBody, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: TableModule, declarations: [Table, SortableColumn, FrozenColumn, RowGroupHeader, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, TableBody, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement], imports: [CommonModule,
             PaginatorModule,
             InputTextModule,
             SelectModule,
@@ -7506,8 +7634,9 @@ class TableModule {
             PlusIcon,
             TrashIcon,
             RadioButtonModule,
-            BindModule], exports: [Table, SharedModule, SortableColumn, FrozenColumn, RowGroupHeader, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement, ScrollerModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableModule, providers: [TableStyle], imports: [CommonModule,
+            BindModule,
+            MotionModule], exports: [Table, SharedModule, SortableColumn, FrozenColumn, RowGroupHeader, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement, ScrollerModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, providers: [TableStyle], imports: [CommonModule,
             PaginatorModule,
             InputTextModule,
             SelectModule,
@@ -7531,10 +7660,11 @@ class TableModule {
             PlusIcon,
             TrashIcon,
             RadioButtonModule,
-            BindModule, SharedModule,
+            BindModule,
+            MotionModule, SharedModule,
             ScrollerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7562,7 +7692,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PlusIcon,
                         TrashIcon,
                         RadioButtonModule,
-                        BindModule
+                        BindModule,
+                        MotionModule
                     ],
                     exports: [
                         Table,