primeng 20.1.2 → 20.3.0-rc.1

package/fesm2022/primeng-table.mjs

@@ -1,20 +1,25 @@
-import { trigger, transition, style as style$1, animate } from '@angular/animations';
-import * as i1 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
+export * from 'primeng/types/table';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, NgZone, numberAttribute, booleanAttribute, ContentChild, ContentChildren, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, HostListener, ElementRef, Optional, input, forwardRef, NgModule } from '@angular/core';
-import * as i6 from '@angular/forms';
+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 { 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 * as i3 from 'primeng/api';
+import * as i4 from 'primeng/api';
 import { OverlayService, FilterService, FilterOperator, FilterMatchMode, PrimeTemplate, TranslationKeys, SharedModule } from 'primeng/api';
-import * as i5 from 'primeng/badge';
+import * as i6 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
-import { BaseComponent } from 'primeng/basecomponent';
-import * as i10 from 'primeng/button';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i1 from 'primeng/bind';
+import { Bind, BindModule } from 'primeng/bind';
+import * as i11 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
-import * as i8 from 'primeng/checkbox';
+import * as i9 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
-import * as i12 from 'primeng/datepicker';
+import * as i13 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ArrowDownIcon } from 'primeng/icons/arrowdown';
@@ -28,26 +33,24 @@ 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 i13 from 'primeng/inputnumber';
+import * as i14 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i11 from 'primeng/inputtext';
+import * as i12 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i2 from 'primeng/paginator';
+import * as i3 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i7 from 'primeng/radiobutton';
+import * as i8 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i4 from 'primeng/scroller';
+import * as i5 from 'primeng/scroller';
 import { ScrollerModule } from 'primeng/scroller';
-import * as i9 from 'primeng/select';
+import * as i10 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { UniqueComponentId, ObjectUtils, ZIndexUtils } from 'primeng/utils';
 import { Subject } from 'rxjs';
-import { style } from '@primeuix/styles/datatable';
-import { BaseStyle } from 'primeng/base';
 
-const theme = /*css*/ `
-    ${style}
+const style = /*css*/ `
+    ${style$1}
 
     /* For PrimeNG */
     .p-datatable-scrollable-table > .p-datatable-thead {
@@ -64,23 +67,7 @@ const theme = /*css*/ `
         z-index: 1;
     }
 
-    .p-datatable-scrollable > tr:not(:has(.p-datatable-selectable-row)) > .p-datatable-frozen-column {
-        position: sticky;
-        background: dt('datatable.header.cell.background');
-    }
-
-    .p-datatable-scrollable th.p-datatable-frozen-column {
-        z-index: 1;
-        position: sticky;
-        background: dt('datatable.header.cell.background');
-    }
-    .p-datatable-scrollable td.p-datatable-frozen-column {
-        z-index: 1;
-        position: sticky;
-        background: dt('datatable.header.cell.background');
-    }
-
-    .p-datatable-mask {
+    .p-datatable-mask.p-overlay-mask {
         position: absolute;
         display: flex;
         align-items: center;
@@ -286,13 +273,13 @@ const inlineStyles = {
 };
 class TableStyle extends BaseStyle {
     name = 'datatable';
-    theme = theme;
+    style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableStyle });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -524,6 +511,7 @@ var TableClasses;
     TableClasses["rowEditorCancel"] = "p-datatable-row-editor-cancel";
 })(TableClasses || (TableClasses = {}));
 
+const TABLE_INSTANCE = new InjectionToken('TABLE_INSTANCE');
 class TableService {
     sortSource = new Subject();
     selectionSource = new Subject();
@@ -550,10 +538,10 @@ class TableService {
     onColumnsChange(columns) {
         this.columnsSource.next(columns);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableService });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1291,8 +1279,11 @@ class Table extends BaseComponent {
     tableService = inject(TableService);
     zone = inject(NgZone);
     _componentStyle = inject(TableStyle);
-    ngOnInit() {
-        super.ngOnInit();
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    onInit() {
         if (this.lazy && this.lazyLoadOnInit) {
             if (!this.virtualScroll) {
                 this.onLazyLoad.emit(this.createLazyLoadMetadata());
@@ -1306,7 +1297,7 @@ class Table extends BaseComponent {
         }
         this.initialized = true;
     }
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this._templates.forEach((item) => {
             switch (item.getType()) {
                 case 'caption':
@@ -1408,16 +1399,14 @@ class Table extends BaseComponent {
             }
         });
     }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
+    onAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
             if (this.isStateful() && this.resizableColumns) {
                 this.restoreColumnWidths();
             }
         }
     }
-    ngOnChanges(simpleChange) {
-        super.ngOnChanges(simpleChange);
+    onChanges(simpleChange) {
         if (simpleChange.totalRecords && simpleChange.totalRecords.firstChange) {
             this._totalRecords = simpleChange.totalRecords.currentValue;
         }
@@ -1650,7 +1639,7 @@ class Table extends BaseComponent {
                             result = value1.localeCompare(value2);
                         else
                             result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
-                        return order * result;
+                        return order * (result || 0);
                     });
                     this._value = [...this.value];
                 }
@@ -2117,7 +2106,7 @@ class Table extends BaseComponent {
     }
     toggleRowsWithCheckbox({ originalEvent }, check) {
         if (this._selectAll !== null) {
-            this.selectAllChange.emit({ originalEvent, checked: check });
+            this.selectAllChange.emit({ originalEvent: originalEvent, checked: check });
         }
         else {
             const data = this.selectionPageOnly ? this.dataToRender(this.processedData) : this.processedData;
@@ -2132,7 +2121,7 @@ class Table extends BaseComponent {
             this.selectionChange.emit(this._selection);
             this.tableService.onSelectionChange();
             this.onHeaderCheckboxToggle.emit({
-                originalEvent,
+                originalEvent: originalEvent,
                 checked: check
             });
             if (this.isStateful()) {
@@ -2392,7 +2381,7 @@ class Table extends BaseComponent {
         }
         else {
             csv = 'data:text/csv;charset=utf-8,' + csv;
-            this.document.defaultView.open(encodeURI(csv));
+            this.document.defaultView?.open(encodeURI(csv));
         }
         this.renderer.removeChild(this.document.body, link);
     }
@@ -2675,7 +2664,7 @@ class Table extends BaseComponent {
             if (this.resizableColumns && this.resizeColumnElement) {
                 let width = this.columnResizeMode === 'expand' ? this._initialColWidths : this._totalTableWidth();
                 ObjectUtils.reorderArray(width, dragIndex + 1, dropIndex + 1);
-                this.updateStyleElement(width, dragIndex, null, null);
+                this.updateStyleElement(width, dragIndex, 0, 0);
             }
             this.reorderIndicatorUpViewChild.nativeElement.style.display = 'none';
             this.reorderIndicatorDownViewChild.nativeElement.style.display = 'none';
@@ -3024,26 +3013,28 @@ class Table extends BaseComponent {
             this.styleElement = null;
         }
     }
-    ngOnDestroy() {
+    ngAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    onDestroy() {
         this.unbindDocumentEditListener();
         this.editingCell = null;
         this.initialized = null;
         this.destroyStyleElement();
         this.destroyResponsiveStyle();
-        super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: Table, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.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)" } }, providers: [TableService, TableStyle], 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, usesOnChanges: true, ngImport: i0, template: `
-        <div [class]="cx('mask')" *ngIf="loading && showLoader">
-            <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon)"></i>
+    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: `
+        <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">
-                <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [class]="cx('loadingIcon')" />
-                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
+                <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')" />
+                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')">
                     <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
                 </span>
             </ng-container>
         </div>
-        <div *ngIf="captionTemplate || _captionTemplate" [class]="cx('header')">
+        <div *ngIf="captionTemplate || _captionTemplate" [class]="cx('header')" [pBind]="ptm('header')">
             <ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
         </div>
         <p-paginator
@@ -3068,6 +3059,7 @@ class Table extends BaseComponent {
             [showPageLinks]="showPageLinks"
             [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
             [locale]="paginatorLocale"
+            [pt]="ptm('pcPaginator')"
         >
             <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
                 <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
@@ -3090,7 +3082,7 @@ class Table extends BaseComponent {
             </ng-template>
         </p-paginator>
 
-        <div #wrapper [class]="cx('tableContainer')" [ngStyle]="sx('tableContainer')">
+        <div #wrapper [class]="cx('tableContainer')" [ngStyle]="sx('tableContainer')" [pBind]="ptm('tableContainer')">
             <p-scroller
                 #scroller
                 *ngIf="virtualScroll"
@@ -3104,13 +3096,14 @@ class Table extends BaseComponent {
                 [step]="rows"
                 [delay]="lazy ? virtualScrollDelay : 0"
                 [inline]="true"
+                [autoSize]="true"
                 [lazy]="lazy"
                 (onLazyLoad)="onLazyItemLoad($event)"
                 [loaderDisabled]="true"
                 [showSpacer]="false"
                 [showLoader]="loadingBodyTemplate || _loadingBodyTemplate"
                 [options]="virtualScrollOptions"
-                [autoSize]="true"
+                [pt]="ptm('virtualScroller')"
             >
                 <ng-template #content let-items let-scrollerOptions="options">
                     <ng-container
@@ -3137,9 +3130,9 @@ class Table extends BaseComponent {
             </ng-container>
 
             <ng-template #buildInTable let-items let-scrollerOptions="options">
-                <table #table role="table" [class]="cn(cx('table'), tableStyleClass)" [style]="tableStyle" [attr.id]="id + '-table'">
+                <table #table role="table" [class]="cn(cx('table'), tableStyleClass)" [pBind]="ptm('table')" [style]="tableStyle" [attr.id]="id + '-table'">
                     <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
-                    <thead role="rowgroup" #thead [class]="cx('thead')" [ngStyle]="sx('thead')">
+                    <thead role="rowgroup" #thead [class]="cx('thead')" [ngStyle]="sx('thead')" [pBind]="ptm('thead')">
                         <ng-container
                             *ngTemplateOutlet="
                                 headerGroupedTemplate || headerTemplate || _headerTemplate;
@@ -3152,6 +3145,7 @@ class Table extends BaseComponent {
                     <tbody
                         role="rowgroup"
                         [class]="cx('tbody')"
+                        [pBind]="ptm('tbody')"
                         *ngIf="frozenValue || frozenBodyTemplate || _frozenBodyTemplate"
                         [value]="frozenValue"
                         [frozenRows]="true"
@@ -3162,6 +3156,7 @@ class Table extends BaseComponent {
                     <tbody
                         role="rowgroup"
                         [class]="cx('tbody', scrollerOptions.contentStyleClass)"
+                        [pBind]="ptm('tbody')"
                         [style]="scrollerOptions.contentStyle"
                         [value]="dataToRender(scrollerOptions.rows)"
                         [pTableBody]="scrollerOptions.columns"
@@ -3173,8 +3168,9 @@ class Table extends BaseComponent {
                         *ngIf="scrollerOptions.spacerStyle"
                         [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'"
                         [class]="cx('virtualScrollerSpacer')"
+                        [pBind]="ptm('virtualScrollerSpacer')"
                     ></tbody>
-                    <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate" #tfoot [ngClass]="cx('footer')" [ngStyle]="sx('tfoot')">
+                    <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate" #tfoot [ngClass]="cx('footer')" [ngStyle]="sx('tfoot')" [pBind]="ptm('tfoot')">
                         <ng-container
                             *ngTemplateOutlet="
                                 footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate;
@@ -3210,6 +3206,7 @@ class Table extends BaseComponent {
             [showPageLinks]="showPageLinks"
             [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
             [locale]="paginatorLocale"
+            [pt]="ptm('pcPaginator')"
         >
             <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
                 <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
@@ -3232,37 +3229,37 @@ class Table extends BaseComponent {
             </ng-template>
         </p-paginator>
 
-        <div *ngIf="summaryTemplate || _summaryTemplate" [ngClass]="cx('footer')">
+        <div *ngIf="summaryTemplate || _summaryTemplate" [ngClass]="cx('footer')" [pBind]="ptm('footer')">
             <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
         </div>
 
-        <div #resizeHelper [ngClass]="cx('columnResizeIndicator')" [style.display]="'none'" *ngIf="resizableColumns"></div>
-        <span #reorderIndicatorUp [ngClass]="cx('rowReorderIndicatorUp')" [style.display]="'none'" *ngIf="reorderableColumns">
-            <svg data-p-icon="arrow-down" *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
+        <div #resizeHelper [ngClass]="cx('columnResizeIndicator')" [pBind]="ptm('columnResizeIndicator')" [style.display]="'none'" *ngIf="resizableColumns"></div>
+        <span #reorderIndicatorUp [ngClass]="cx('rowReorderIndicatorUp')" [pBind]="ptm('rowReorderIndicatorUp')" [style.display]="'none'" *ngIf="reorderableColumns">
+            <svg data-p-icon="arrow-down" *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" [pBind]="ptm('rowReorderIndicatorUp')['icon']" />
             <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
         </span>
-        <span #reorderIndicatorDown [ngClass]="cx('rowReorderIndicatorDown')" [style.display]="'none'" *ngIf="reorderableColumns">
-            <svg data-p-icon="arrow-up" *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
+        <span #reorderIndicatorDown [ngClass]="cx('rowReorderIndicatorDown')" [pBind]="ptm('rowReorderIndicatorDown')" [style.display]="'none'" *ngIf="reorderableColumns">
+            <svg data-p-icon="arrow-up" *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" [pBind]="ptm('rowReorderIndicatorDown')['icon']" />
             <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
         </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i2.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(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => i4.Scroller), selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["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: "component", type: i0.forwardRef(() => TableBody), selector: "[pTableBody]", inputs: ["pTableBody", "pTableBodyTemplate", "value", "frozen", "frozenRows", "scrollerOptions"] }], changeDetection: i0.ChangeDetectionStrategy.Default, 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.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.0", ngImport: i0, type: Table, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Table, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table',
                     standalone: false,
                     template: `
-        <div [class]="cx('mask')" *ngIf="loading && showLoader">
-            <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon)"></i>
+        <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">
-                <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [class]="cx('loadingIcon')" />
-                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
+                <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')" />
+                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')">
                     <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
                 </span>
             </ng-container>
         </div>
-        <div *ngIf="captionTemplate || _captionTemplate" [class]="cx('header')">
+        <div *ngIf="captionTemplate || _captionTemplate" [class]="cx('header')" [pBind]="ptm('header')">
             <ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
         </div>
         <p-paginator
@@ -3287,6 +3284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             [showPageLinks]="showPageLinks"
             [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
             [locale]="paginatorLocale"
+            [pt]="ptm('pcPaginator')"
         >
             <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
                 <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
@@ -3309,7 +3307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             </ng-template>
         </p-paginator>
 
-        <div #wrapper [class]="cx('tableContainer')" [ngStyle]="sx('tableContainer')">
+        <div #wrapper [class]="cx('tableContainer')" [ngStyle]="sx('tableContainer')" [pBind]="ptm('tableContainer')">
             <p-scroller
                 #scroller
                 *ngIf="virtualScroll"
@@ -3323,13 +3321,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 [step]="rows"
                 [delay]="lazy ? virtualScrollDelay : 0"
                 [inline]="true"
+                [autoSize]="true"
                 [lazy]="lazy"
                 (onLazyLoad)="onLazyItemLoad($event)"
                 [loaderDisabled]="true"
                 [showSpacer]="false"
                 [showLoader]="loadingBodyTemplate || _loadingBodyTemplate"
                 [options]="virtualScrollOptions"
-                [autoSize]="true"
+                [pt]="ptm('virtualScroller')"
             >
                 <ng-template #content let-items let-scrollerOptions="options">
                     <ng-container
@@ -3356,9 +3355,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             </ng-container>
 
             <ng-template #buildInTable let-items let-scrollerOptions="options">
-                <table #table role="table" [class]="cn(cx('table'), tableStyleClass)" [style]="tableStyle" [attr.id]="id + '-table'">
+                <table #table role="table" [class]="cn(cx('table'), tableStyleClass)" [pBind]="ptm('table')" [style]="tableStyle" [attr.id]="id + '-table'">
                     <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
-                    <thead role="rowgroup" #thead [class]="cx('thead')" [ngStyle]="sx('thead')">
+                    <thead role="rowgroup" #thead [class]="cx('thead')" [ngStyle]="sx('thead')" [pBind]="ptm('thead')">
                         <ng-container
                             *ngTemplateOutlet="
                                 headerGroupedTemplate || headerTemplate || _headerTemplate;
@@ -3371,6 +3370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     <tbody
                         role="rowgroup"
                         [class]="cx('tbody')"
+                        [pBind]="ptm('tbody')"
                         *ngIf="frozenValue || frozenBodyTemplate || _frozenBodyTemplate"
                         [value]="frozenValue"
                         [frozenRows]="true"
@@ -3381,6 +3381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     <tbody
                         role="rowgroup"
                         [class]="cx('tbody', scrollerOptions.contentStyleClass)"
+                        [pBind]="ptm('tbody')"
                         [style]="scrollerOptions.contentStyle"
                         [value]="dataToRender(scrollerOptions.rows)"
                         [pTableBody]="scrollerOptions.columns"
@@ -3392,8 +3393,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         *ngIf="scrollerOptions.spacerStyle"
                         [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'"
                         [class]="cx('virtualScrollerSpacer')"
+                        [pBind]="ptm('virtualScrollerSpacer')"
                     ></tbody>
-                    <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate" #tfoot [ngClass]="cx('footer')" [ngStyle]="sx('tfoot')">
+                    <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate" #tfoot [ngClass]="cx('footer')" [ngStyle]="sx('tfoot')" [pBind]="ptm('tfoot')">
                         <ng-container
                             *ngTemplateOutlet="
                                 footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate;
@@ -3429,6 +3431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             [showPageLinks]="showPageLinks"
             [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
             [locale]="paginatorLocale"
+            [pt]="ptm('pcPaginator')"
         >
             <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
                 <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
@@ -3451,26 +3454,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             </ng-template>
         </p-paginator>
 
-        <div *ngIf="summaryTemplate || _summaryTemplate" [ngClass]="cx('footer')">
+        <div *ngIf="summaryTemplate || _summaryTemplate" [ngClass]="cx('footer')" [pBind]="ptm('footer')">
             <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
         </div>
 
-        <div #resizeHelper [ngClass]="cx('columnResizeIndicator')" [style.display]="'none'" *ngIf="resizableColumns"></div>
-        <span #reorderIndicatorUp [ngClass]="cx('rowReorderIndicatorUp')" [style.display]="'none'" *ngIf="reorderableColumns">
-            <svg data-p-icon="arrow-down" *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
+        <div #resizeHelper [ngClass]="cx('columnResizeIndicator')" [pBind]="ptm('columnResizeIndicator')" [style.display]="'none'" *ngIf="resizableColumns"></div>
+        <span #reorderIndicatorUp [ngClass]="cx('rowReorderIndicatorUp')" [pBind]="ptm('rowReorderIndicatorUp')" [style.display]="'none'" *ngIf="reorderableColumns">
+            <svg data-p-icon="arrow-down" *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" [pBind]="ptm('rowReorderIndicatorUp')['icon']" />
             <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
         </span>
-        <span #reorderIndicatorDown [ngClass]="cx('rowReorderIndicatorDown')" [style.display]="'none'" *ngIf="reorderableColumns">
-            <svg data-p-icon="arrow-up" *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
+        <span #reorderIndicatorDown [ngClass]="cx('rowReorderIndicatorDown')" [pBind]="ptm('rowReorderIndicatorDown')" [style.display]="'none'" *ngIf="reorderableColumns">
+            <svg data-p-icon="arrow-up" *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" [pBind]="ptm('rowReorderIndicatorDown')['icon']" />
             <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
         </span>
     `,
-                    providers: [TableService, TableStyle],
+                    providers: [TableService, TableStyle, { provide: TABLE_INSTANCE, useExisting: Table }, { provide: PARENT_INSTANCE, useExisting: Table }],
                     changeDetection: ChangeDetectionStrategy.Default,
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         '[class]': "cn(cx('root'), styleClass)"
-                    }
+                    },
+                    hostDirectives: [Bind]
                 }]
         }], propDecorators: { frozenColumns: [{
                 type: Input
@@ -3839,11 +3843,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: ContentChild,
                 args: ['paginatornextpagelinkicon', { descendants: false }]
             }] } });
-class TableBody {
-    dt;
+class TableBody extends BaseComponent {
+    dataTable;
     tableService;
-    cd;
-    el;
+    hostName = 'Table';
     columns;
     template;
     get value() {
@@ -3854,7 +3857,7 @@ class TableBody {
         if (this.frozenRows) {
             this.updateFrozenRowStickyPosition();
         }
-        if (this.dt.scrollable && this.dt.rowGroupMode === 'subheader') {
+        if (this.dataTable.scrollable && this.dataTable.rowGroupMode === 'subheader') {
             this.updateFrozenRowGroupHeaderStickyPosition();
         }
     }
@@ -3863,30 +3866,29 @@ class TableBody {
     scrollerOptions;
     subscription;
     _value;
-    ngAfterViewInit() {
+    onAfterViewInit() {
         if (this.frozenRows) {
             this.updateFrozenRowStickyPosition();
         }
-        if (this.dt.scrollable && this.dt.rowGroupMode === 'subheader') {
+        if (this.dataTable.scrollable && this.dataTable.rowGroupMode === 'subheader') {
             this.updateFrozenRowGroupHeaderStickyPosition();
         }
     }
-    constructor(dt, tableService, cd, el) {
-        this.dt = dt;
+    constructor(dataTable, tableService) {
+        super();
+        this.dataTable = dataTable;
         this.tableService = tableService;
-        this.cd = cd;
-        this.el = el;
-        this.subscription = this.dt.tableService.valueSource$.subscribe(() => {
-            if (this.dt.virtualScroll) {
+        this.subscription = this.dataTable.tableService.valueSource$.subscribe(() => {
+            if (this.dataTable.virtualScroll) {
                 this.cd.detectChanges();
             }
         });
     }
     shouldRenderRowGroupHeader(value, rowData, i) {
-        let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dt.groupRowsBy);
-        let prevRowData = value[i - this.dt._first - 1];
+        let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dataTable?.groupRowsBy || '');
+        let prevRowData = value[i - (this.dataTable?._first || 0) - 1];
         if (prevRowData) {
-            let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.dt.groupRowsBy);
+            let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.dataTable?.groupRowsBy || '');
             return currentRowFieldData !== previousRowFieldData;
         }
         else {
@@ -3894,10 +3896,10 @@ class TableBody {
         }
     }
     shouldRenderRowGroupFooter(value, rowData, i) {
-        let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dt.groupRowsBy);
-        let nextRowData = value[i - this.dt._first + 1];
+        let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dataTable?.groupRowsBy || '');
+        let nextRowData = value[i - (this.dataTable?._first || 0) + 1];
         if (nextRowData) {
-            let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.dt.groupRowsBy);
+            let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.dataTable?.groupRowsBy || '');
             return currentRowFieldData !== nextRowFieldData;
         }
         else {
@@ -3905,10 +3907,10 @@ class TableBody {
         }
     }
     shouldRenderRowspan(value, rowData, i) {
-        let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dt.groupRowsBy);
+        let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dataTable?.groupRowsBy);
         let prevRowData = value[i - 1];
         if (prevRowData) {
-            let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.dt.groupRowsBy);
+            let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.dataTable?.groupRowsBy || '');
             return currentRowFieldData !== previousRowFieldData;
         }
         else {
@@ -3916,14 +3918,14 @@ class TableBody {
         }
     }
     calculateRowGroupSize(value, rowData, index) {
-        let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dt.groupRowsBy);
+        let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dataTable?.groupRowsBy);
         let nextRowFieldData = currentRowFieldData;
         let groupRowSpan = 0;
         while (currentRowFieldData === nextRowFieldData) {
             groupRowSpan++;
             let nextRowData = value[++index];
             if (nextRowData) {
-                nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.dt.groupRowsBy);
+                nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.dataTable?.groupRowsBy || '');
             }
             else {
                 break;
@@ -3931,7 +3933,7 @@ class TableBody {
         }
         return groupRowSpan === 1 ? null : groupRowSpan;
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
@@ -3942,62 +3944,65 @@ class TableBody {
     updateFrozenRowGroupHeaderStickyPosition() {
         if (this.el.nativeElement.previousElementSibling) {
             let tableHeaderHeight = DomHandler.getOuterHeight(this.el.nativeElement.previousElementSibling);
-            this.dt.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
+            this.dataTable.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
         }
     }
     getScrollerOption(option, options) {
-        if (this.dt.virtualScroll) {
+        if (this.dataTable.virtualScroll) {
             options = options || this.scrollerOptions;
             return options ? options[option] : null;
         }
         return null;
     }
     getRowIndex(rowIndex) {
-        const index = this.dt.paginator ? this.dt.first + rowIndex : rowIndex;
+        const index = this.dataTable.paginator ? this.dataTable.first + rowIndex : rowIndex;
         const getItemOptions = this.getScrollerOption('getItemOptions');
         return getItemOptions ? getItemOptions(index).index : index;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableBody, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.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" }, ngImport: i0, template: `
-        <ng-container *ngIf="!dt.expandedRowTemplate && !dt._expandedRowTemplate">
-            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
-                <ng-container *ngIf="(dt.groupHeaderTemplate || dt._groupHeaderTemplate) && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))" role="row">
+    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: `
+        <ng-container *ngIf="!dataTable.expandedRowTemplate && !dataTable._expandedRowTemplate">
+            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dataTable.rowTrackBy">
+                <ng-container
+                    *ngIf="(dataTable.groupHeaderTemplate || dataTable._groupHeaderTemplate) && !dataTable.virtualScroll && dataTable.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))"
+                    role="row"
+                >
                     <ng-container
                         *ngTemplateOutlet="
-                            dt.groupHeaderTemplate || dt._groupHeaderTemplate;
+                            dataTable.groupHeaderTemplate || dataTable._groupHeaderTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen
                             }
                         "
                     ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="dt.rowGroupMode !== 'rowspan'">
+                <ng-container *ngIf="dataTable.rowGroupMode !== 'rowspan'">
                     <ng-container
                         *ngTemplateOutlet="
-                            rowData ? template : dt.loadingBodyTemplate || dt._loadingBodyTemplate;
+                            rowData ? template : dataTable.loadingBodyTemplate || dataTable._loadingBodyTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen
                             }
                         "
                     ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="dt.rowGroupMode === 'rowspan'">
+                <ng-container *ngIf="dataTable.rowGroupMode === 'rowspan'">
                     <ng-container
                         *ngTemplateOutlet="
-                            rowData ? template : dt.loadingBodyTemplate || dt._loadingBodyTemplate;
+                            rowData ? template : dataTable.loadingBodyTemplate || dataTable._loadingBodyTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen,
                                 rowgroup: shouldRenderRowspan(value, rowData, rowIndex),
                                 rowspan: calculateRowGroupSize(value, rowData, rowIndex)
@@ -4005,15 +4010,18 @@ class TableBody {
                         "
                     ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="(dt.groupFooterTemplate || dt._groupFooterTemplate) && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))" role="row">
+                <ng-container
+                    *ngIf="(dataTable.groupFooterTemplate || dataTable._groupFooterTemplate) && !dataTable.virtualScroll && dataTable.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))"
+                    role="row"
+                >
                     <ng-container
                         *ngTemplateOutlet="
-                            dt.groupFooterTemplate || dt._groupFooterTemplate;
+                            dataTable.groupFooterTemplate || dataTable._groupFooterTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen
                             }
                         "
@@ -4021,9 +4029,9 @@ class TableBody {
                 </ng-container>
             </ng-template>
         </ng-container>
-        <ng-container *ngIf="(dt.expandedRowTemplate || dt._expandedRowTemplate) && !(frozen && (dt.frozenExpandedRowTemplate || dt._frozenExpandedRowTemplate))">
-            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
-                <ng-container *ngIf="!(dt.groupHeaderTemplate && dt._groupHeaderTemplate)">
+        <ng-container *ngIf="(dataTable.expandedRowTemplate || dataTable._expandedRowTemplate) && !(frozen && (dataTable.frozenExpandedRowTemplate || dataTable._frozenExpandedRowTemplate))">
+            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dataTable.rowTrackBy">
+                <ng-container *ngIf="!(dataTable.groupHeaderTemplate && dataTable._groupHeaderTemplate)">
                     <ng-container
                         *ngTemplateOutlet="
                             template;
@@ -4031,32 +4039,32 @@ class TableBody {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                expanded: dt.isRowExpanded(rowData),
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                expanded: dataTable.isRowExpanded(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen
                             }
                         "
                     ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="(dt.groupHeaderTemplate || dt._groupHeaderTemplate) && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))" role="row">
+                <ng-container *ngIf="(dataTable.groupHeaderTemplate || dataTable._groupHeaderTemplate) && dataTable.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))" role="row">
                     <ng-container
                         *ngTemplateOutlet="
-                            dt.groupHeaderTemplate || dt._groupHeaderTemplate;
+                            dataTable.groupHeaderTemplate || dataTable._groupHeaderTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                expanded: dt.isRowExpanded(rowData),
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                expanded: dataTable.isRowExpanded(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen
                             }
                         "
                     ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="dt.isRowExpanded(rowData)">
+                <ng-container *ngIf="dataTable.isRowExpanded(rowData)">
                     <ng-container
                         *ngTemplateOutlet="
-                            dt.expandedRowTemplate || dt._expandedRowTemplate;
+                            dataTable.expandedRowTemplate || dataTable._expandedRowTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -4065,16 +4073,16 @@ class TableBody {
                             }
                         "
                     ></ng-container>
-                    <ng-container *ngIf="(dt.groupFooterTemplate || dt._groupFooterTemplate) && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))" role="row">
+                    <ng-container *ngIf="(dataTable.groupFooterTemplate || dataTable._groupFooterTemplate) && dataTable.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))" role="row">
                         <ng-container
                             *ngTemplateOutlet="
-                                dt.groupFooterTemplate || dt._groupFooterTemplate;
+                                dataTable.groupFooterTemplate || dataTable._groupFooterTemplate;
                                 context: {
                                     $implicit: rowData,
                                     rowIndex: getRowIndex(rowIndex),
                                     columns: columns,
-                                    expanded: dt.isRowExpanded(rowData),
-                                    editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                    expanded: dataTable.isRowExpanded(rowData),
+                                    editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                     frozen: frozen
                                 }
                             "
@@ -4083,8 +4091,8 @@ class TableBody {
                 </ng-container>
             </ng-template>
         </ng-container>
-        <ng-container *ngIf="(dt.frozenExpandedRowTemplate || dt._frozenExpandedRowTemplate) && frozen">
-            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
+        <ng-container *ngIf="(dataTable.frozenExpandedRowTemplate || dataTable._frozenExpandedRowTemplate) && frozen">
+            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dataTable.rowTrackBy">
                 <ng-container
                     *ngTemplateOutlet="
                         template;
@@ -4092,16 +4100,16 @@ class TableBody {
                             $implicit: rowData,
                             rowIndex: getRowIndex(rowIndex),
                             columns: columns,
-                            expanded: dt.isRowExpanded(rowData),
-                            editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                            expanded: dataTable.isRowExpanded(rowData),
+                            editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                             frozen: frozen
                         }
                     "
                 ></ng-container>
-                <ng-container *ngIf="dt.isRowExpanded(rowData)">
+                <ng-container *ngIf="dataTable.isRowExpanded(rowData)">
                     <ng-container
                         *ngTemplateOutlet="
-                            dt.frozenExpandedRowTemplate || dt._frozenExpandedRowTemplate;
+                            dataTable.frozenExpandedRowTemplate || dataTable._frozenExpandedRowTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -4113,59 +4121,62 @@ class TableBody {
                 </ng-container>
             </ng-template>
         </ng-container>
-        <ng-container *ngIf="dt.loading">
-            <ng-container *ngTemplateOutlet="dt.loadingBodyTemplate || dt._loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
+        <ng-container *ngIf="dataTable.loading">
+            <ng-container *ngTemplateOutlet="dataTable.loadingBodyTemplate || dataTable._loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
         </ng-container>
-        <ng-container *ngIf="dt.isEmpty() && !dt.loading">
-            <ng-container *ngTemplateOutlet="dt.emptyMessageTemplate || dt._emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
+        <ng-container *ngIf="dataTable.isEmpty() && !dataTable.loading">
+            <ng-container *ngTemplateOutlet="dataTable.emptyMessageTemplate || dataTable._emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+    `, 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.0", ngImport: i0, type: TableBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableBody, decorators: [{
             type: Component,
             args: [{
                     selector: '[pTableBody]',
                     standalone: false,
                     template: `
-        <ng-container *ngIf="!dt.expandedRowTemplate && !dt._expandedRowTemplate">
-            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
-                <ng-container *ngIf="(dt.groupHeaderTemplate || dt._groupHeaderTemplate) && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))" role="row">
+        <ng-container *ngIf="!dataTable.expandedRowTemplate && !dataTable._expandedRowTemplate">
+            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dataTable.rowTrackBy">
+                <ng-container
+                    *ngIf="(dataTable.groupHeaderTemplate || dataTable._groupHeaderTemplate) && !dataTable.virtualScroll && dataTable.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))"
+                    role="row"
+                >
                     <ng-container
                         *ngTemplateOutlet="
-                            dt.groupHeaderTemplate || dt._groupHeaderTemplate;
+                            dataTable.groupHeaderTemplate || dataTable._groupHeaderTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen
                             }
                         "
                     ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="dt.rowGroupMode !== 'rowspan'">
+                <ng-container *ngIf="dataTable.rowGroupMode !== 'rowspan'">
                     <ng-container
                         *ngTemplateOutlet="
-                            rowData ? template : dt.loadingBodyTemplate || dt._loadingBodyTemplate;
+                            rowData ? template : dataTable.loadingBodyTemplate || dataTable._loadingBodyTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen
                             }
                         "
                     ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="dt.rowGroupMode === 'rowspan'">
+                <ng-container *ngIf="dataTable.rowGroupMode === 'rowspan'">
                     <ng-container
                         *ngTemplateOutlet="
-                            rowData ? template : dt.loadingBodyTemplate || dt._loadingBodyTemplate;
+                            rowData ? template : dataTable.loadingBodyTemplate || dataTable._loadingBodyTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen,
                                 rowgroup: shouldRenderRowspan(value, rowData, rowIndex),
                                 rowspan: calculateRowGroupSize(value, rowData, rowIndex)
@@ -4173,15 +4184,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         "
                     ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="(dt.groupFooterTemplate || dt._groupFooterTemplate) && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))" role="row">
+                <ng-container
+                    *ngIf="(dataTable.groupFooterTemplate || dataTable._groupFooterTemplate) && !dataTable.virtualScroll && dataTable.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))"
+                    role="row"
+                >
                     <ng-container
                         *ngTemplateOutlet="
-                            dt.groupFooterTemplate || dt._groupFooterTemplate;
+                            dataTable.groupFooterTemplate || dataTable._groupFooterTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen
                             }
                         "
@@ -4189,9 +4203,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 </ng-container>
             </ng-template>
         </ng-container>
-        <ng-container *ngIf="(dt.expandedRowTemplate || dt._expandedRowTemplate) && !(frozen && (dt.frozenExpandedRowTemplate || dt._frozenExpandedRowTemplate))">
-            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
-                <ng-container *ngIf="!(dt.groupHeaderTemplate && dt._groupHeaderTemplate)">
+        <ng-container *ngIf="(dataTable.expandedRowTemplate || dataTable._expandedRowTemplate) && !(frozen && (dataTable.frozenExpandedRowTemplate || dataTable._frozenExpandedRowTemplate))">
+            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dataTable.rowTrackBy">
+                <ng-container *ngIf="!(dataTable.groupHeaderTemplate && dataTable._groupHeaderTemplate)">
                     <ng-container
                         *ngTemplateOutlet="
                             template;
@@ -4199,32 +4213,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                expanded: dt.isRowExpanded(rowData),
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                expanded: dataTable.isRowExpanded(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen
                             }
                         "
                     ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="(dt.groupHeaderTemplate || dt._groupHeaderTemplate) && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))" role="row">
+                <ng-container *ngIf="(dataTable.groupHeaderTemplate || dataTable._groupHeaderTemplate) && dataTable.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))" role="row">
                     <ng-container
                         *ngTemplateOutlet="
-                            dt.groupHeaderTemplate || dt._groupHeaderTemplate;
+                            dataTable.groupHeaderTemplate || dataTable._groupHeaderTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
                                 columns: columns,
-                                expanded: dt.isRowExpanded(rowData),
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                expanded: dataTable.isRowExpanded(rowData),
+                                editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                 frozen: frozen
                             }
                         "
                     ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="dt.isRowExpanded(rowData)">
+                <ng-container *ngIf="dataTable.isRowExpanded(rowData)">
                     <ng-container
                         *ngTemplateOutlet="
-                            dt.expandedRowTemplate || dt._expandedRowTemplate;
+                            dataTable.expandedRowTemplate || dataTable._expandedRowTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -4233,16 +4247,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             }
                         "
                     ></ng-container>
-                    <ng-container *ngIf="(dt.groupFooterTemplate || dt._groupFooterTemplate) && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))" role="row">
+                    <ng-container *ngIf="(dataTable.groupFooterTemplate || dataTable._groupFooterTemplate) && dataTable.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))" role="row">
                         <ng-container
                             *ngTemplateOutlet="
-                                dt.groupFooterTemplate || dt._groupFooterTemplate;
+                                dataTable.groupFooterTemplate || dataTable._groupFooterTemplate;
                                 context: {
                                     $implicit: rowData,
                                     rowIndex: getRowIndex(rowIndex),
                                     columns: columns,
-                                    expanded: dt.isRowExpanded(rowData),
-                                    editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                                    expanded: dataTable.isRowExpanded(rowData),
+                                    editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                                     frozen: frozen
                                 }
                             "
@@ -4251,8 +4265,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 </ng-container>
             </ng-template>
         </ng-container>
-        <ng-container *ngIf="(dt.frozenExpandedRowTemplate || dt._frozenExpandedRowTemplate) && frozen">
-            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
+        <ng-container *ngIf="(dataTable.frozenExpandedRowTemplate || dataTable._frozenExpandedRowTemplate) && frozen">
+            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dataTable.rowTrackBy">
                 <ng-container
                     *ngTemplateOutlet="
                         template;
@@ -4260,16 +4274,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             $implicit: rowData,
                             rowIndex: getRowIndex(rowIndex),
                             columns: columns,
-                            expanded: dt.isRowExpanded(rowData),
-                            editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
+                            expanded: dataTable.isRowExpanded(rowData),
+                            editing: dataTable.editMode === 'row' && dataTable.isRowEditing(rowData),
                             frozen: frozen
                         }
                     "
                 ></ng-container>
-                <ng-container *ngIf="dt.isRowExpanded(rowData)">
+                <ng-container *ngIf="dataTable.isRowExpanded(rowData)">
                     <ng-container
                         *ngTemplateOutlet="
-                            dt.frozenExpandedRowTemplate || dt._frozenExpandedRowTemplate;
+                            dataTable.frozenExpandedRowTemplate || dataTable._frozenExpandedRowTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -4281,17 +4295,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 </ng-container>
             </ng-template>
         </ng-container>
-        <ng-container *ngIf="dt.loading">
-            <ng-container *ngTemplateOutlet="dt.loadingBodyTemplate || dt._loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
+        <ng-container *ngIf="dataTable.loading">
+            <ng-container *ngTemplateOutlet="dataTable.loadingBodyTemplate || dataTable._loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
         </ng-container>
-        <ng-container *ngIf="dt.isEmpty() && !dt.loading">
-            <ng-container *ngTemplateOutlet="dt.emptyMessageTemplate || dt._emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
+        <ng-container *ngIf="dataTable.isEmpty() && !dataTable.loading">
+            <ng-container *ngTemplateOutlet="dataTable.emptyMessageTemplate || dataTable._emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
         </ng-container>
     `,
                     changeDetection: ChangeDetectionStrategy.Default,
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { columns: [{
+        }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { columns: [{
                 type: Input,
                 args: ['pTableBody']
             }], template: [{
@@ -4309,17 +4323,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }] } });
 class RowGroupHeader {
-    dt;
-    constructor(dt) {
-        this.dt = dt;
+    dataTable;
+    constructor(dataTable) {
+        this.dataTable = dataTable;
     }
     get getFrozenRowGroupHeaderStickyPosition() {
-        return this.dt.rowGroupHeaderStyleObject ? this.dt.rowGroupHeaderStyleObject.top : '';
+        return this.dataTable.rowGroupHeaderStyleObject ? this.dataTable.rowGroupHeaderStyleObject.top : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RowGroupHeader, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", 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: "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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RowGroupHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RowGroupHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pRowGroupHeader]',
@@ -4330,9 +4344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     }
                 }]
         }], ctorParameters: () => [{ type: Table }] });
-class FrozenColumn {
-    el;
-    zone;
+class FrozenColumn extends BaseComponent {
     get frozen() {
         return this._frozen;
     }
@@ -4341,16 +4353,35 @@ class FrozenColumn {
         Promise.resolve(null).then(() => this.updateStickyPosition());
     }
     alignFrozen = 'left';
-    constructor(el, zone) {
-        this.el = el;
-        this.zone = zone;
+    resizeListener;
+    resizeObserver;
+    onAfterViewInit() {
+        this.bindResizeListener();
+        this.observeChanges();
     }
-    ngAfterViewInit() {
-        this.zone.runOutsideAngular(() => {
-            setTimeout(() => {
+    bindResizeListener() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this.resizeListener) {
+                this.resizeListener = this.renderer.listen(this.document.defaultView, 'resize', () => {
+                    this.recalculateColumns();
+                });
+            }
+        }
+    }
+    unbindResizeListener() {
+        if (this.resizeListener) {
+            this.resizeListener();
+            this.resizeListener = null;
+        }
+    }
+    observeChanges() {
+        if (isPlatformBrowser(this.platformId)) {
+            const resizeObserver = new ResizeObserver(() => {
                 this.recalculateColumns();
-            }, 1000);
-        });
+            });
+            resizeObserver.observe(this.el.nativeElement);
+            this.resizeObserver = resizeObserver;
+        }
     }
     recalculateColumns() {
         const siblings = DomHandler.siblings(this.el.nativeElement);
@@ -4391,10 +4422,16 @@ class FrozenColumn {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FrozenColumn, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: FrozenColumn, isStandalone: false, selector: "[pFrozenColumn]", inputs: { frozen: "frozen", alignFrozen: "alignFrozen" }, host: { listeners: { "window:resize": "recalculateColumns($event)" }, properties: { "class.p-datatable-frozen-column": "frozen", "class.p-datatable-frozen-column-left": "alignFrozen === \"left\"" } }, ngImport: i0 });
+    onDestroy() {
+        this.unbindResizeListener();
+        if (this.resizeObserver) {
+            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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FrozenColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FrozenColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pFrozenColumn]',
@@ -4404,35 +4441,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class.p-datatable-frozen-column-left]': 'alignFrozen === "left"'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { frozen: [{
+        }], propDecorators: { frozen: [{
                 type: Input
             }], alignFrozen: [{
                 type: Input
-            }], recalculateColumns: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
             }] } });
 class SortableColumn extends BaseComponent {
-    dt;
-    #elementRef = inject(ElementRef);
+    dataTable;
     field;
     pSortableColumnDisabled;
-    role = this.#elementRef.nativeElement?.tagName !== 'TH' ? 'columnheader' : null;
+    role = this.el.nativeElement?.tagName !== 'TH' ? 'columnheader' : null;
     sorted;
     sortOrder;
     subscription;
     _componentStyle = inject(TableStyle);
-    constructor(dt) {
+    constructor(dataTable) {
         super();
-        this.dt = dt;
+        this.dataTable = dataTable;
         if (this.isEnabled()) {
-            this.subscription = this.dt.tableService.sortSource$.subscribe((sortMeta) => {
+            this.subscription = this.dataTable.tableService.sortSource$.subscribe((sortMeta) => {
                 this.updateSortState();
             });
         }
     }
-    ngOnInit() {
-        super.ngOnInit();
+    onInit() {
         if (this.isEnabled()) {
             this.updateSortState();
         }
@@ -4440,12 +4472,12 @@ class SortableColumn extends BaseComponent {
     updateSortState() {
         let sorted = false;
         let sortOrder = 0;
-        if (this.dt.sortMode === 'single') {
-            sorted = this.dt.isSorted(this.field);
-            sortOrder = this.dt.sortOrder;
+        if (this.dataTable.sortMode === 'single') {
+            sorted = this.dataTable.isSorted(this.field);
+            sortOrder = this.dataTable.sortOrder;
         }
-        else if (this.dt.sortMode === 'multiple') {
-            const sortMeta = this.dt.getSortMeta(this.field);
+        else if (this.dataTable.sortMode === 'multiple') {
+            const sortMeta = this.dataTable.getSortMeta(this.field);
             sorted = !!sortMeta;
             sortOrder = sortMeta ? sortMeta.order : 0;
         }
@@ -4455,7 +4487,7 @@ class SortableColumn extends BaseComponent {
     onClick(event) {
         if (this.isEnabled() && !this.isFilterElement(event.target)) {
             this.updateSortState();
-            this.dt.sort({
+            this.dataTable.sort({
                 originalEvent: event,
                 field: this.field
             });
@@ -4475,16 +4507,15 @@ class SortableColumn extends BaseComponent {
     isFilterElementIconOrButton(element) {
         return DomHandler.hasClass(element, 'pi-filter-icon') || DomHandler.hasClass(element, 'p-column-filter-menu-button');
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+    onDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SortableColumn, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.0", 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: "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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SortableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SortableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSortableColumn]',
@@ -4514,41 +4545,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['keydown.enter', ['$event']]
             }] } });
 class SortIcon extends BaseComponent {
-    dt;
+    dataTable;
     cd;
     field;
     subscription;
     sortOrder;
     _componentStyle = inject(TableStyle);
-    constructor(dt, cd) {
+    constructor(dataTable, cd) {
         super();
-        this.dt = dt;
+        this.dataTable = dataTable;
         this.cd = cd;
-        this.subscription = this.dt.tableService.sortSource$.subscribe((sortMeta) => {
+        this.subscription = this.dataTable.tableService.sortSource$.subscribe((sortMeta) => {
             this.updateSortState();
         });
     }
-    ngOnInit() {
-        super.ngOnInit();
+    onInit() {
         this.updateSortState();
     }
     onClick(event) {
         event.preventDefault();
     }
     updateSortState() {
-        if (this.dt.sortMode === 'single') {
-            this.sortOrder = this.dt.isSorted(this.field) ? this.dt.sortOrder : 0;
+        if (this.dataTable.sortMode === 'single') {
+            this.sortOrder = this.dataTable.isSorted(this.field) ? this.dataTable.sortOrder : 0;
         }
-        else if (this.dt.sortMode === 'multiple') {
-            let sortMeta = this.dt.getSortMeta(this.field);
+        else if (this.dataTable.sortMode === 'multiple') {
+            let sortMeta = this.dataTable.getSortMeta(this.field);
             this.sortOrder = sortMeta ? sortMeta.order : 0;
         }
         this.cd.markForCheck();
     }
     getMultiSortMetaIndex() {
-        let multiSortMeta = this.dt._multiSortMeta;
+        let multiSortMeta = this.dataTable._multiSortMeta;
         let index = -1;
-        if (multiSortMeta && this.dt.sortMode === 'multiple' && this.dt.showInitialSortBadge && multiSortMeta.length > 1) {
+        if (multiSortMeta && this.dataTable.sortMode === 'multiple' && this.dataTable.showInitialSortBadge && multiSortMeta.length > 1) {
             for (let i = 0; i < multiSortMeta.length; i++) {
                 let meta = multiSortMeta[i];
                 if (meta.field === this.field || meta.field === this.field) {
@@ -4561,43 +4591,42 @@ class SortIcon extends BaseComponent {
     }
     getBadgeValue() {
         let index = this.getMultiSortMetaIndex();
-        return this.dt.groupRowsBy && index > -1 ? index : index + 1;
+        return (this.dataTable?.groupRowsBy || '') && index > -1 ? index : index + 1;
     }
     isMultiSorted() {
-        return this.dt.sortMode === 'multiple' && this.getMultiSortMetaIndex() > -1;
+        return this.dataTable.sortMode === 'multiple' && this.getMultiSortMetaIndex() > -1;
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+    onDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", 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.0", type: SortIcon, isStandalone: false, selector: "p-sortIcon", inputs: { field: "field" }, providers: [TableStyle], usesInheritance: true, ngImport: i0, template: `
-        <ng-container *ngIf="!(dt.sortIconTemplate || dt._sortIconTemplate)">
+    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: `
+        <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" />
             <svg data-p-icon="sort-amount-down" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" />
         </ng-container>
-        <span *ngIf="dt.sortIconTemplate || dt._sortIconTemplate" [class]="cx('sortableColumnIcon')">
-            <ng-template *ngTemplateOutlet="dt.sortIconTemplate || dt._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
+        <span *ngIf="dataTable.sortIconTemplate || dataTable._sortIconTemplate" [class]="cx('sortableColumnIcon')">
+            <ng-template *ngTemplateOutlet="dataTable.sortIconTemplate || dataTable._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
         </span>
         <p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small"></p-badge>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => i5.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 });
+    `, 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.0", ngImport: i0, type: SortIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SortIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-sortIcon',
                     standalone: false,
                     template: `
-        <ng-container *ngIf="!(dt.sortIconTemplate || dt._sortIconTemplate)">
+        <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" />
             <svg data-p-icon="sort-amount-down" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" />
         </ng-container>
-        <span *ngIf="dt.sortIconTemplate || dt._sortIconTemplate" [class]="cx('sortableColumnIcon')">
-            <ng-template *ngTemplateOutlet="dt.sortIconTemplate || dt._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
+        <span *ngIf="dataTable.sortIconTemplate || dataTable._sortIconTemplate" [class]="cx('sortableColumnIcon')">
+            <ng-template *ngTemplateOutlet="dataTable.sortIconTemplate || dataTable._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
         </span>
         <p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small"></p-badge>
     `,
@@ -4609,7 +4638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }] } });
 class SelectableRow extends BaseComponent {
-    dt;
+    dataTable;
     tableService;
     data;
     index;
@@ -4617,30 +4646,29 @@ class SelectableRow extends BaseComponent {
     selected;
     subscription;
     _componentStyle = inject(TableStyle);
-    constructor(dt, tableService) {
+    constructor(dataTable, tableService) {
         super();
-        this.dt = dt;
+        this.dataTable = dataTable;
         this.tableService = tableService;
         if (this.isEnabled()) {
-            this.subscription = this.dt.tableService.selectionSource$.subscribe(() => {
-                this.selected = this.dt.isSelected(this.data);
+            this.subscription = this.dataTable.tableService.selectionSource$.subscribe(() => {
+                this.selected = this.dataTable.isSelected(this.data);
             });
         }
     }
     setRowTabIndex() {
-        if (this.dt.selectionMode === 'single' || this.dt.selectionMode === 'multiple') {
-            return !this.dt.selection ? 0 : this.dt.anchorRowIndex === this.index ? 0 : -1;
+        if (this.dataTable.selectionMode === 'single' || this.dataTable.selectionMode === 'multiple') {
+            return !this.dataTable.selection ? 0 : this.dataTable.anchorRowIndex === this.index ? 0 : -1;
         }
     }
-    ngOnInit() {
-        super.ngOnInit();
+    onInit() {
         if (this.isEnabled()) {
-            this.selected = this.dt.isSelected(this.data);
+            this.selected = this.dataTable.isSelected(this.data);
         }
     }
     onClick(event) {
         if (this.isEnabled()) {
-            this.dt.handleRowClick({
+            this.dataTable.handleRowClick({
                 originalEvent: event,
                 rowData: this.data,
                 rowIndex: this.index
@@ -4649,7 +4677,7 @@ class SelectableRow extends BaseComponent {
     }
     onTouchEnd(event) {
         if (this.isEnabled()) {
-            this.dt.handleRowTouchEnd(event);
+            this.dataTable.handleRowTouchEnd(event);
         }
     }
     onKeyDown(event) {
@@ -4673,10 +4701,10 @@ class SelectableRow extends BaseComponent {
                 this.onEnterKey(event);
                 break;
             default:
-                if (event.code === 'KeyA' && (event.metaKey || event.ctrlKey) && this.dt.selectionMode === 'multiple') {
-                    const data = this.dt.dataToRender(this.dt.processedData);
-                    this.dt.selection = [...data];
-                    this.dt.selectRange(event, data.length - 1, true);
+                if (event.code === 'KeyA' && (event.metaKey || event.ctrlKey) && this.dataTable.selectionMode === 'multiple') {
+                    const data = this.dataTable.dataToRender(this.dataTable.processedData);
+                    this.dataTable.selection = [...data];
+                    this.dataTable.selectRange(event, data.length - 1, true);
                     event.preventDefault();
                 }
                 break;
@@ -4708,7 +4736,7 @@ class SelectableRow extends BaseComponent {
         if (!this.isEnabled()) {
             return;
         }
-        this.dt.handleRowClick({
+        this.dataTable.handleRowClick({
             originalEvent: event,
             rowData: this.data,
             rowIndex: this.index
@@ -4718,11 +4746,11 @@ class SelectableRow extends BaseComponent {
         const lastRow = this.findLastSelectableRow();
         lastRow && this.focusRowChange(this.el.nativeElement, lastRow);
         if (event.ctrlKey && event.shiftKey) {
-            const data = this.dt.dataToRender(this.dt.rows);
+            const data = this.dataTable.dataToRender(this.dataTable.rows);
             const lastSelectableRowIndex = DomHandler.getAttribute(lastRow, 'index');
-            this.dt.anchorRowIndex = lastSelectableRowIndex;
-            this.dt.selection = data.slice(this.index, data.length);
-            this.dt.selectRange(event, this.index);
+            this.dataTable.anchorRowIndex = lastSelectableRowIndex;
+            this.dataTable.selection = data.slice(this.index || 0, data.length);
+            this.dataTable.selectRange(event, this.index || 0);
         }
         event.preventDefault();
     }
@@ -4730,11 +4758,11 @@ class SelectableRow extends BaseComponent {
         const firstRow = this.findFirstSelectableRow();
         firstRow && this.focusRowChange(this.el.nativeElement, firstRow);
         if (event.ctrlKey && event.shiftKey) {
-            const data = this.dt.dataToRender(this.dt.rows);
+            const data = this.dataTable.dataToRender(this.dataTable.rows);
             const firstSelectableRowIndex = DomHandler.getAttribute(firstRow, 'index');
-            this.dt.anchorRowIndex = this.dt.anchorRowIndex || firstSelectableRowIndex;
-            this.dt.selection = data.slice(0, this.index + 1);
-            this.dt.selectRange(event, this.index);
+            this.dataTable.anchorRowIndex = this.dataTable.anchorRowIndex || firstSelectableRowIndex || 0;
+            this.dataTable.selection = data.slice(0, (this.index || 0) + 1);
+            this.dataTable.selectRange(event, this.index || 0);
         }
         event.preventDefault();
     }
@@ -4745,21 +4773,21 @@ class SelectableRow extends BaseComponent {
         }
         else {
             this.onEnterKey(event);
-            if (event.shiftKey && this.dt.selection !== null) {
-                const data = this.dt.dataToRender(this.dt.rows);
+            if (event.shiftKey && this.dataTable.selection !== null) {
+                const data = this.dataTable.dataToRender(this.dataTable.rows);
                 let index;
-                if (ObjectUtils.isNotEmpty(this.dt.selection) && this.dt.selection.length > 0) {
+                if (ObjectUtils.isNotEmpty(this.dataTable.selection) && this.dataTable.selection.length > 0) {
                     let firstSelectedRowIndex, lastSelectedRowIndex;
-                    firstSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[0], data);
-                    lastSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[this.dt.selection.length - 1], data);
-                    index = this.index <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex;
+                    firstSelectedRowIndex = ObjectUtils.findIndexInList(this.dataTable.selection[0], data);
+                    lastSelectedRowIndex = ObjectUtils.findIndexInList(this.dataTable.selection[this.dataTable.selection.length - 1], data);
+                    index = (this.index || 0) <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex;
                 }
                 else {
-                    index = ObjectUtils.findIndexInList(this.dt.selection, data);
+                    index = ObjectUtils.findIndexInList(this.dataTable.selection, data);
                 }
-                this.dt.anchorRowIndex = index;
-                this.dt.selection = index !== this.index ? data.slice(Math.min(index, this.index), Math.max(index, this.index) + 1) : [this.data];
-                this.dt.selectRange(event, this.index);
+                this.dataTable.anchorRowIndex = index || 0;
+                this.dataTable.selection = index !== this.index ? data.slice(Math.min(index || 0, this.index || 0), Math.max(index || 0, this.index || 0) + 1) : [this.data];
+                this.dataTable.selectRange(event, this.index || 0);
             }
             event.preventDefault();
         }
@@ -4770,11 +4798,11 @@ class SelectableRow extends BaseComponent {
         DomHandler.focus(currentFocusedRow);
     }
     findLastSelectableRow() {
-        const rows = DomHandler.find(this.dt.el.nativeElement, '.p-datatable-selectable-row');
+        const rows = DomHandler.find(this.dataTable.el.nativeElement, '.p-datatable-selectable-row');
         return rows ? rows[rows.length - 1] : null;
     }
     findFirstSelectableRow() {
-        const firstRow = DomHandler.findSingle(this.dt.el.nativeElement, '.p-datatable-selectable-row');
+        const firstRow = DomHandler.findSingle(this.dataTable.el.nativeElement, '.p-datatable-selectable-row');
         return firstRow;
     }
     findNextSelectableRow(row) {
@@ -4804,16 +4832,15 @@ class SelectableRow extends BaseComponent {
     isEnabled() {
         return this.pSelectableRowDisabled !== true;
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+    onDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SelectableRow, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.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 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SelectableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSelectableRow]',
@@ -4844,31 +4871,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
-class SelectableRowDblClick {
-    dt;
+class SelectableRowDblClick extends BaseComponent {
+    dataTable;
     tableService;
     data;
     index;
     pSelectableRowDisabled;
     selected;
     subscription;
-    constructor(dt, tableService) {
-        this.dt = dt;
+    constructor(dataTable, tableService) {
+        super();
+        this.dataTable = dataTable;
         this.tableService = tableService;
         if (this.isEnabled()) {
-            this.subscription = this.dt.tableService.selectionSource$.subscribe(() => {
-                this.selected = this.dt.isSelected(this.data);
+            this.subscription = this.dataTable.tableService.selectionSource$.subscribe(() => {
+                this.selected = this.dataTable.isSelected(this.data);
             });
         }
     }
-    ngOnInit() {
+    onInit() {
         if (this.isEnabled()) {
-            this.selected = this.dt.isSelected(this.data);
+            this.selected = this.dataTable.isSelected(this.data);
         }
     }
     onClick(event) {
         if (this.isEnabled()) {
-            this.dt.handleRowClick({
+            this.dataTable.handleRowClick({
                 originalEvent: event,
                 rowData: this.data,
                 rowIndex: this.index
@@ -4878,15 +4906,15 @@ class SelectableRowDblClick {
     isEnabled() {
         return this.pSelectableRowDisabled !== true;
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SelectableRowDblClick, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.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.p-selectable-row": "isEnabled()", "class.p-highlight": "selected" } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SelectableRowDblClick, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectableRowDblClick, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSelectableRowDblClick]',
@@ -4909,28 +4937,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: HostListener,
                 args: ['dblclick', ['$event']]
             }] } });
-class ContextMenuRow {
-    dt;
+class ContextMenuRow extends BaseComponent {
+    dataTable;
     tableService;
-    el;
     data;
     index;
     pContextMenuRowDisabled;
     selected;
     subscription;
-    constructor(dt, tableService, el) {
-        this.dt = dt;
+    constructor(dataTable, tableService) {
+        super();
+        this.dataTable = dataTable;
         this.tableService = tableService;
-        this.el = el;
         if (this.isEnabled()) {
-            this.subscription = this.dt.tableService.contextMenuSource$.subscribe((data) => {
-                this.selected = this.dt.equals(this.data, data);
+            this.subscription = this.dataTable.tableService.contextMenuSource$.subscribe((data) => {
+                this.selected = this.dataTable.equals(this.data, data);
             });
         }
     }
     onContextMenu(event) {
         if (this.isEnabled()) {
-            this.dt.handleRowRightClick({
+            this.dataTable.handleRowRightClick({
                 originalEvent: event,
                 rowData: this.data,
                 rowIndex: this.index
@@ -4942,15 +4969,15 @@ class ContextMenuRow {
     isEnabled() {
         return this.pContextMenuRowDisabled !== true;
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ContextMenuRow, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.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.p-datatable-contextmenu-row-selected": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ContextMenuRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ContextMenuRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pContextMenuRow]',
@@ -4960,7 +4987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
                     }
                 }]
-        }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ElementRef }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { data: [{
                 type: Input,
                 args: ['pContextMenuRow']
             }], index: [{
@@ -4973,26 +5000,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
             }] } });
-class RowToggler {
-    dt;
+class RowToggler extends BaseComponent {
+    dataTable;
     data;
     pRowTogglerDisabled;
-    constructor(dt) {
-        this.dt = dt;
+    constructor(dataTable) {
+        super();
+        this.dataTable = dataTable;
     }
     onClick(event) {
         if (this.isEnabled()) {
-            this.dt.toggleRow(this.data, event);
+            this.dataTable.toggleRow(this.data, event);
             event.preventDefault();
         }
     }
     isEnabled() {
         return this.pRowTogglerDisabled !== true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RowToggler, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.0", type: RowToggler, isStandalone: false, selector: "[pRowToggler]", inputs: { data: ["pRowToggler", "data"], pRowTogglerDisabled: ["pRowTogglerDisabled", "pRowTogglerDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RowToggler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RowToggler, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pRowToggler]',
@@ -5009,8 +5037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['click', ['$event']]
             }] } });
 class ResizableColumn extends BaseComponent {
-    dt;
-    el;
+    dataTable;
     zone;
     pResizableColumnDisabled;
     resizer;
@@ -5021,14 +5048,12 @@ class ResizableColumn extends BaseComponent {
     documentMouseMoveListener;
     documentMouseUpListener;
     _componentStyle = inject(TableStyle);
-    constructor(dt, el, zone) {
+    constructor(dataTable, zone) {
         super();
-        this.dt = dt;
-        this.el = el;
+        this.dataTable = dataTable;
         this.zone = zone;
     }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
+    onAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
             if (this.isEnabled()) {
                 DomHandler.addClass(this.el.nativeElement, 'p-datatable-resizable-column');
@@ -5069,42 +5094,41 @@ class ResizableColumn extends BaseComponent {
         }
     }
     onMouseDown(event) {
-        this.dt.onColumnResizeBegin(event);
+        this.dataTable.onColumnResizeBegin(event);
         this.bindDocumentEvents();
     }
     onTouchStart(event) {
-        this.dt.onColumnResizeBegin(event);
+        this.dataTable.onColumnResizeBegin(event);
         this.bindDocumentEvents();
     }
     onTouchMove(event) {
-        this.dt.onColumnResize(event);
+        this.dataTable.onColumnResize(event);
     }
     onDocumentMouseMove(event) {
-        this.dt.onColumnResize(event);
+        this.dataTable.onColumnResize(event);
     }
     onDocumentMouseUp(event) {
-        this.dt.onColumnResizeEnd();
+        this.dataTable.onColumnResizeEnd();
         this.unbindDocumentEvents();
     }
     onTouchEnd(event) {
-        this.dt.onColumnResizeEnd();
+        this.dataTable.onColumnResizeEnd();
         this.unbindDocumentEvents();
     }
     isEnabled() {
         return this.pResizableColumnDisabled !== true;
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+    onDestroy() {
         if (this.resizerMouseDownListener) {
             this.resizerMouseDownListener();
             this.resizerMouseDownListener = null;
         }
         this.unbindDocumentEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ResizableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.0", 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: "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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ResizableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ResizableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pResizableColumn]',
@@ -5114,12 +5138,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     },
                     providers: [TableStyle]
                 }]
-        }], ctorParameters: () => [{ type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { pResizableColumnDisabled: [{
+        }], ctorParameters: () => [{ type: Table }, { type: i0.NgZone }], propDecorators: { pResizableColumnDisabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }] } });
 class ReorderableColumn extends BaseComponent {
-    dt;
+    dataTable;
     el;
     zone;
     pReorderableColumnDisabled;
@@ -5129,14 +5153,13 @@ class ReorderableColumn extends BaseComponent {
     dragLeaveListener;
     mouseDownListener;
     _componentStyle = inject(TableStyle);
-    constructor(dt, el, zone) {
+    constructor(dataTable, el, zone) {
         super();
-        this.dt = dt;
+        this.dataTable = dataTable;
         this.el = el;
         this.zone = zone;
     }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
+    onAfterViewInit() {
         if (this.isEnabled()) {
             this.bindEvents();
         }
@@ -5181,33 +5204,32 @@ class ReorderableColumn extends BaseComponent {
             this.el.nativeElement.draggable = true;
     }
     onDragStart(event) {
-        this.dt.onColumnDragStart(event, this.el.nativeElement);
+        this.dataTable.onColumnDragStart(event, this.el.nativeElement);
     }
     onDragOver(event) {
         event.preventDefault();
     }
     onDragEnter(event) {
-        this.dt.onColumnDragEnter(event, this.el.nativeElement);
+        this.dataTable.onColumnDragEnter(event, this.el.nativeElement);
     }
     onDragLeave(event) {
-        this.dt.onColumnDragLeave(event);
+        this.dataTable.onColumnDragLeave(event);
     }
     onDrop(event) {
         if (this.isEnabled()) {
-            this.dt.onColumnDrop(event, this.el.nativeElement);
+            this.dataTable.onColumnDrop(event, this.el.nativeElement);
         }
     }
     isEnabled() {
         return this.pReorderableColumnDisabled !== true;
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+    onDestroy() {
         this.unbindEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.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: "20.3.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 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ReorderableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReorderableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pReorderableColumn]',
@@ -5224,9 +5246,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: HostListener,
                 args: ['drop', ['$event']]
             }] } });
-class EditableColumn {
-    dt;
-    el;
+class EditableColumn extends BaseComponent {
+    dataTable;
     zone;
     data;
     field;
@@ -5234,27 +5255,27 @@ class EditableColumn {
     pEditableColumnDisabled;
     pFocusCellSelector;
     overlayEventListener;
-    constructor(dt, el, zone) {
-        this.dt = dt;
-        this.el = el;
+    constructor(dataTable, zone) {
+        super();
+        this.dataTable = dataTable;
         this.zone = zone;
     }
-    ngOnChanges(changes) {
+    onChanges(changes) {
         if (this.el.nativeElement && !changes.data?.firstChange) {
-            this.dt.updateEditingCell(this.el.nativeElement, this.data, this.field, this.rowIndex);
+            this.dataTable.updateEditingCell(this.el.nativeElement, this.data, this.field, this.rowIndex);
         }
     }
-    ngAfterViewInit() {
+    onAfterViewInit() {
         if (this.isEnabled()) {
             DomHandler.addClass(this.el.nativeElement, 'p-editable-column');
         }
     }
     onClick(event) {
         if (this.isEnabled()) {
-            this.dt.selfClick = true;
-            if (this.dt.editingCell) {
-                if (this.dt.editingCell !== this.el.nativeElement) {
-                    if (!this.dt.isEditingCellValid()) {
+            this.dataTable.selfClick = true;
+            if (this.dataTable.editingCell) {
+                if (this.dataTable.editingCell !== this.el.nativeElement) {
+                    if (!this.dataTable.isEditingCellValid()) {
                         return;
                     }
                     this.closeEditingCell(true, event);
@@ -5267,9 +5288,9 @@ class EditableColumn {
         }
     }
     openCell() {
-        this.dt.updateEditingCell(this.el.nativeElement, this.data, this.field, this.rowIndex);
+        this.dataTable.updateEditingCell(this.el.nativeElement, this.data, this.field, this.rowIndex);
         DomHandler.addClass(this.el.nativeElement, 'p-cell-editing');
-        this.dt.onEditInit.emit({
+        this.dataTable.onEditInit.emit({
             field: this.field,
             data: this.data,
             index: this.rowIndex
@@ -5285,41 +5306,41 @@ class EditableColumn {
         });
         this.overlayEventListener = (e) => {
             if (this.el && this.el.nativeElement.contains(e.target)) {
-                this.dt.selfClick = true;
+                this.dataTable.selfClick = true;
             }
         };
-        this.dt.overlaySubscription = this.dt.overlayService.clickObservable.subscribe(this.overlayEventListener);
+        this.dataTable.overlaySubscription = this.dataTable.overlayService.clickObservable.subscribe(this.overlayEventListener);
     }
     closeEditingCell(completed, event) {
         const eventData = {
-            field: this.dt.editingCellField,
-            data: this.dt.editingCellData,
+            field: this.dataTable.editingCellField,
+            data: this.dataTable.editingCellData,
             originalEvent: event,
-            index: this.dt.editingCellRowIndex
+            index: this.dataTable.editingCellRowIndex
         };
         if (completed) {
-            this.dt.onEditComplete.emit(eventData);
+            this.dataTable.onEditComplete.emit(eventData);
         }
         else {
-            this.dt.onEditCancel.emit(eventData);
-            this.dt.value.forEach((element) => {
-                if (element[this.dt.editingCellField] === this.data) {
-                    element[this.dt.editingCellField] = this.dt.editingCellData;
+            this.dataTable.onEditCancel.emit(eventData);
+            this.dataTable.value.forEach((element) => {
+                if (element[this.dataTable.editingCellField] === this.data) {
+                    element[this.dataTable.editingCellField] = this.dataTable.editingCellData;
                 }
             });
         }
-        DomHandler.removeClass(this.dt.editingCell, 'p-cell-editing');
-        this.dt.editingCell = null;
-        this.dt.editingCellData = null;
-        this.dt.editingCellField = null;
-        this.dt.unbindDocumentEditListener();
-        if (this.dt.overlaySubscription) {
-            this.dt.overlaySubscription.unsubscribe();
+        DomHandler.removeClass(this.dataTable.editingCell, 'p-cell-editing');
+        this.dataTable.editingCell = null;
+        this.dataTable.editingCellData = null;
+        this.dataTable.editingCellField = null;
+        this.dataTable.unbindDocumentEditListener();
+        if (this.dataTable.overlaySubscription) {
+            this.dataTable.overlaySubscription.unsubscribe();
         }
     }
     onEnterKeyDown(event) {
         if (this.isEnabled() && !event.shiftKey) {
-            if (this.dt.isEditingCellValid()) {
+            if (this.dataTable.isEditingCellValid()) {
                 this.closeEditingCell(true, event);
             }
             event.preventDefault();
@@ -5327,7 +5348,7 @@ class EditableColumn {
     }
     onTabKeyDown(event) {
         if (this.isEnabled()) {
-            if (this.dt.isEditingCellValid()) {
+            if (this.dataTable.isEditingCellValid()) {
                 this.closeEditingCell(true, event);
             }
             event.preventDefault();
@@ -5335,7 +5356,7 @@ class EditableColumn {
     }
     onEscapeKeyDown(event) {
         if (this.isEnabled()) {
-            if (this.dt.isEditingCellValid()) {
+            if (this.dataTable.isEditingCellValid()) {
                 this.closeEditingCell(false, event);
             }
             event.preventDefault();
@@ -5357,7 +5378,7 @@ class EditableColumn {
                 let cellIndex = DomHandler.index(currentCell);
                 let targetCell = this.findNextEditableColumnByIndex(currentCell, cellIndex);
                 if (targetCell) {
-                    if (this.dt.isEditingCellValid()) {
+                    if (this.dataTable.isEditingCellValid()) {
                         this.closeEditingCell(true, event);
                     }
                     DomHandler.invokeElementMethod(event.target, 'blur');
@@ -5374,7 +5395,7 @@ class EditableColumn {
                 let cellIndex = DomHandler.index(currentCell);
                 let targetCell = this.findPrevEditableColumnByIndex(currentCell, cellIndex);
                 if (targetCell) {
-                    if (this.dt.isEditingCellValid()) {
+                    if (this.dataTable.isEditingCellValid()) {
                         this.closeEditingCell(true, event);
                     }
                     DomHandler.invokeElementMethod(event.target, 'blur');
@@ -5411,7 +5432,7 @@ class EditableColumn {
         if (currentCell) {
             let targetCell = this.findPreviousEditableColumn(currentCell);
             if (targetCell) {
-                if (this.dt.isEditingCellValid()) {
+                if (this.dataTable.isEditingCellValid()) {
                     this.closeEditingCell(true, event);
                 }
                 DomHandler.invokeElementMethod(event.target, 'blur');
@@ -5425,7 +5446,7 @@ class EditableColumn {
         if (currentCell) {
             let targetCell = this.findNextEditableColumn(currentCell);
             if (targetCell) {
-                if (this.dt.isEditingCellValid()) {
+                if (this.dataTable.isEditingCellValid()) {
                     this.closeEditingCell(true, event);
                 }
                 DomHandler.invokeElementMethod(event.target, 'blur');
@@ -5433,7 +5454,7 @@ class EditableColumn {
                 event.preventDefault();
             }
             else {
-                if (this.dt.isEditingCellValid()) {
+                if (this.dataTable.isEditingCellValid()) {
                     this.closeEditingCell(true, event);
                 }
             }
@@ -5504,21 +5525,21 @@ class EditableColumn {
     isEnabled() {
         return this.pEditableColumnDisabled !== true;
     }
-    ngOnDestroy() {
-        if (this.dt.overlaySubscription) {
-            this.dt.overlaySubscription.unsubscribe();
+    onDestroy() {
+        if (this.dataTable.overlaySubscription) {
+            this.dataTable.overlaySubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: EditableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.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)" } }, usesOnChanges: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: EditableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EditableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pEditableColumn]',
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: Table }, { type: i0.NgZone }], propDecorators: { data: [{
                 type: Input,
                 args: ['pEditableColumn']
             }], field: [{
@@ -5566,47 +5587,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: HostListener,
                 args: ['keydown.arrowright', ['$event']]
             }] } });
-class EditableRow {
-    el;
+class EditableRow extends BaseComponent {
     data;
     pEditableRowDisabled;
-    constructor(el) {
-        this.el = el;
-    }
     isEnabled() {
         return this.pEditableRowDisabled !== true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: EditableRow, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.0", type: EditableRow, isStandalone: false, selector: "[pEditableRow]", inputs: { data: ["pEditableRow", "data"], pEditableRowDisabled: ["pEditableRowDisabled", "pEditableRowDisabled", booleanAttribute] }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: EditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pEditableRow]',
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
+        }], propDecorators: { data: [{
                 type: Input,
                 args: ['pEditableRow']
             }], pEditableRowDisabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }] } });
-class InitEditableRow {
-    dt;
+class InitEditableRow extends BaseComponent {
+    dataTable;
     editableRow;
-    constructor(dt, editableRow) {
-        this.dt = dt;
+    constructor(dataTable, editableRow) {
+        super();
+        this.dataTable = dataTable;
         this.editableRow = editableRow;
     }
     onClick(event) {
-        this.dt.initRowEdit(this.editableRow.data);
+        this.dataTable.initRowEdit(this.editableRow.data);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InitEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: InitEditableRow, isStandalone: false, selector: "[pInitEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-init" }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InitEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InitEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pInitEditableRow]',
@@ -5619,21 +5637,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
-class SaveEditableRow {
-    dt;
+class SaveEditableRow extends BaseComponent {
+    dataTable;
     editableRow;
-    constructor(dt, editableRow) {
-        this.dt = dt;
+    constructor(dataTable, editableRow) {
+        super();
+        this.dataTable = dataTable;
         this.editableRow = editableRow;
     }
     onClick(event) {
-        this.dt.saveRowEdit(this.editableRow.data, this.editableRow.el.nativeElement);
+        this.dataTable.saveRowEdit(this.editableRow.data, this.editableRow.el.nativeElement);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SaveEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: SaveEditableRow, isStandalone: false, selector: "[pSaveEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-save" }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SaveEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SaveEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSaveEditableRow]',
@@ -5647,22 +5666,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['click', ['$event']]
             }] } });
 class CancelEditableRow extends BaseComponent {
-    dt;
+    dataTable;
     editableRow;
-    constructor(dt, editableRow) {
+    constructor(dataTable, editableRow) {
         super();
-        this.dt = dt;
+        this.dataTable = dataTable;
         this.editableRow = editableRow;
     }
     _componentStyle = inject(TableStyle);
     onClick(event) {
-        this.dt.cancelRowEdit(this.editableRow.data);
+        this.dataTable.cancelRowEdit(this.editableRow.data);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CancelEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", 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: "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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CancelEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CancelEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pCancelEditableRow]',
@@ -5676,8 +5695,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
-class CellEditor {
-    dt;
+class CellEditor extends BaseComponent {
+    dataTable;
     editableColumn;
     editableRow;
     _templates;
@@ -5685,12 +5704,13 @@ class CellEditor {
     _outputTemplate;
     inputTemplate;
     outputTemplate;
-    constructor(dt, editableColumn, editableRow) {
-        this.dt = dt;
+    constructor(dataTable, editableColumn, editableRow) {
+        super();
+        this.dataTable = dataTable;
         this.editableColumn = editableColumn;
         this.editableRow = editableRow;
     }
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this._templates.forEach((item) => {
             switch (item.getType()) {
                 case 'input':
@@ -5703,19 +5723,19 @@ class CellEditor {
         });
     }
     get editing() {
-        return (this.dt.editingCell && this.editableColumn && this.dt.editingCell === this.editableColumn.el.nativeElement) || (this.editableRow && this.dt.editMode === 'row' && this.dt.isRowEditing(this.editableRow.data));
+        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.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: "20.3.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 }], ngImport: i0, template: `
+    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: `
         <ng-container *ngIf="editing">
             <ng-container *ngTemplateOutlet="inputTemplate || _inputTemplate"></ng-container>
         </ng-container>
         <ng-container *ngIf="!editing">
             <ng-container *ngTemplateOutlet="outputTemplate || _outputTemplate"></ng-container>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CellEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CellEditor, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-cellEditor',
@@ -5744,8 +5764,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: ContentChild,
                 args: ['output']
             }] } });
-class TableRadioButton {
-    dt;
+class TableRadioButton extends BaseComponent {
+    dataTable;
     cd;
     value;
     disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -5756,21 +5776,22 @@ class TableRadioButton {
     inputViewChild;
     checked;
     subscription;
-    constructor(dt, cd) {
-        this.dt = dt;
+    constructor(dataTable, cd) {
+        super();
+        this.dataTable = dataTable;
         this.cd = cd;
-        this.subscription = this.dt.tableService.selectionSource$.subscribe(() => {
-            this.checked = this.dt.isSelected(this.value);
-            this.ariaLabel = this.ariaLabel || this.dt.config.translation.aria ? (this.checked ? this.dt.config.translation.aria.selectRow : this.dt.config.translation.aria.unselectRow) : undefined;
+        this.subscription = this.dataTable.tableService.selectionSource$.subscribe(() => {
+            this.checked = this.dataTable.isSelected(this.value);
+            this.ariaLabel = this.ariaLabel || (this.dataTable.config.translation.aria ? (this.checked ? this.dataTable.config.translation.aria.selectRow : this.dataTable.config.translation.aria.unselectRow) : undefined);
             this.cd.markForCheck();
         });
     }
-    ngOnInit() {
-        this.checked = this.dt.isSelected(this.value);
+    onInit() {
+        this.checked = this.dataTable.isSelected(this.value);
     }
     onClick(event) {
         if (!this.disabled()) {
-            this.dt.toggleRowWithRadio({
+            this.dataTable.toggleRowWithRadio({
                 originalEvent: event.originalEvent,
                 rowIndex: this.index()
             }, this.value);
@@ -5778,20 +5799,20 @@ class TableRadioButton {
         }
         DomHandler.clearSelection();
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", 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.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 }], 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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.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: "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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableRadioButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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)" /> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
@@ -5803,10 +5824,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: ViewChild,
                 args: ['rb']
             }] } });
-class TableCheckbox {
-    dt;
+class TableCheckbox extends BaseComponent {
+    dataTable;
     tableService;
-    cd;
     value;
     disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     required = input(undefined, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -5816,52 +5836,52 @@ class TableCheckbox {
     ariaLabel;
     checked;
     subscription;
-    constructor(dt, tableService, cd) {
-        this.dt = dt;
+    constructor(dataTable, tableService) {
+        super();
+        this.dataTable = dataTable;
         this.tableService = tableService;
-        this.cd = cd;
-        this.subscription = this.dt.tableService.selectionSource$.subscribe(() => {
-            this.checked = this.dt.isSelected(this.value);
-            this.ariaLabel = this.ariaLabel || this.dt.config.translation.aria ? (this.checked ? this.dt.config.translation.aria.selectRow : this.dt.config.translation.aria.unselectRow) : undefined;
+        this.subscription = this.dataTable.tableService.selectionSource$.subscribe(() => {
+            this.checked = this.dataTable.isSelected(this.value);
+            this.ariaLabel = this.ariaLabel || (this.dataTable.config.translation.aria ? (this.checked ? this.dataTable.config.translation.aria.selectRow : this.dataTable.config.translation.aria.unselectRow) : undefined);
             this.cd.markForCheck();
         });
     }
-    ngOnInit() {
-        this.checked = this.dt.isSelected(this.value);
+    onInit() {
+        this.checked = this.dataTable.isSelected(this.value);
     }
     onClick({ originalEvent }) {
         if (!this.disabled()) {
-            this.dt.toggleRowWithCheckbox({
-                originalEvent,
-                rowIndex: this.index()
+            this.dataTable.toggleRowWithCheckbox({
+                originalEvent: originalEvent,
+                rowIndex: this.index() || 0
             }, this.value);
         }
         DomHandler.clearSelection();
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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 } }, ngImport: i0, template: `
+    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">
-            @if (dt.checkboxIconTemplate || dt._checkboxIconTemplate; as template) {
+            @if (dataTable.checkboxIconTemplate || dataTable._checkboxIconTemplate; as template) {
                 <ng-template pTemplate="icon">
                     <ng-template *ngTemplateOutlet="template; context: { $implicit: checked }" />
                 </ng-template>
             }
         </p-checkbox>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["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 });
+    `, 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.0", ngImport: i0, type: TableCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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">
-            @if (dt.checkboxIconTemplate || dt._checkboxIconTemplate; as template) {
+            @if (dataTable.checkboxIconTemplate || dataTable._checkboxIconTemplate; as template) {
                 <ng-template pTemplate="icon">
                     <ng-template *ngTemplateOutlet="template; context: { $implicit: checked }" />
                 </ng-template>
@@ -5871,15 +5891,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { value: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
             }] } });
-class TableHeaderCheckbox {
-    dt;
+class TableHeaderCheckbox extends BaseComponent {
+    dataTable;
     tableService;
-    cd;
+    hostName = 'Table';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('headerCheckbox'));
+    }
     disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
@@ -5887,33 +5911,33 @@ class TableHeaderCheckbox {
     checked;
     selectionChangeSubscription;
     valueChangeSubscription;
-    constructor(dt, tableService, cd) {
-        this.dt = dt;
+    constructor(dataTable, tableService) {
+        super();
+        this.dataTable = dataTable;
         this.tableService = tableService;
-        this.cd = cd;
-        this.valueChangeSubscription = this.dt.tableService.valueSource$.subscribe(() => {
+        this.valueChangeSubscription = this.dataTable.tableService.valueSource$.subscribe(() => {
             this.checked = this.updateCheckedState();
-            this.ariaLabel = this.ariaLabel || this.dt.config.translation.aria ? (this.checked ? this.dt.config.translation.aria.selectAll : this.dt.config.translation.aria.unselectAll) : undefined;
+            this.ariaLabel = this.ariaLabel || (this.dataTable.config.translation.aria ? (this.checked ? this.dataTable.config.translation.aria.selectAll : this.dataTable.config.translation.aria.unselectAll) : undefined);
         });
-        this.selectionChangeSubscription = this.dt.tableService.selectionSource$.subscribe(() => {
+        this.selectionChangeSubscription = this.dataTable.tableService.selectionSource$.subscribe(() => {
             this.checked = this.updateCheckedState();
         });
     }
-    ngOnInit() {
+    onInit() {
         this.checked = this.updateCheckedState();
     }
     onClick(event) {
         if (!this.disabled()) {
-            if (this.dt.value && this.dt.value.length > 0) {
-                this.dt.toggleRowsWithCheckbox(event, this.checked);
+            if (this.dataTable.value && this.dataTable.value.length > 0) {
+                this.dataTable.toggleRowsWithCheckbox(event, this.checked || false);
             }
         }
         DomHandler.clearSelection();
     }
     isDisabled() {
-        return this.disabled() || !this.dt.value || !this.dt.value.length;
+        return this.disabled() || !this.dataTable.value || !this.dataTable.value.length;
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.selectionChangeSubscription) {
             this.selectionChangeSubscription.unsubscribe();
         }
@@ -5923,35 +5947,35 @@ class TableHeaderCheckbox {
     }
     updateCheckedState() {
         this.cd.markForCheck();
-        if (this.dt._selectAll !== null) {
-            return this.dt._selectAll;
+        if (this.dataTable._selectAll !== null) {
+            return this.dataTable._selectAll;
         }
         else {
-            const data = this.dt.selectionPageOnly ? this.dt.dataToRender(this.dt.processedData) : this.dt.processedData;
-            const val = this.dt.frozenValue ? [...this.dt.frozenValue, ...data] : data;
-            const selectableVal = this.dt.rowSelectable ? val.filter((data, index) => this.dt.rowSelectable({ data, index })) : val;
-            return ObjectUtils.isNotEmpty(selectableVal) && ObjectUtils.isNotEmpty(this.dt.selection) && selectableVal.every((v) => this.dt.selection.some((s) => this.dt.equals(v, s)));
+            const data = this.dataTable.selectionPageOnly ? this.dataTable.dataToRender(this.dataTable.processedData) : this.dataTable.processedData;
+            const val = this.dataTable.frozenValue ? [...this.dataTable.frozenValue, ...data] : data;
+            const selectableVal = this.dataTable.rowSelectable ? val.filter((data, index) => this.dataTable.rowSelectable({ data, index })) : val;
+            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.0", ngImport: i0, type: TableHeaderCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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 } }, ngImport: i0, template: `
-        <p-checkbox [(ngModel)]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="isDisabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel">
-            @if (dt.headerCheckboxIconTemplate || dt._headerCheckboxIconTemplate; as template) {
+    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">
+            @if (dataTable.headerCheckboxIconTemplate || dataTable._headerCheckboxIconTemplate; as template) {
                 <ng-template pTemplate="icon">
                     <ng-template *ngTemplateOutlet="template; context: { $implicit: checked }" />
                 </ng-template>
             }
         </p-checkbox>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["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 });
+    `, 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.0", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableHeaderCheckbox',
                     standalone: false,
                     template: `
-        <p-checkbox [(ngModel)]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="isDisabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel">
-            @if (dt.headerCheckboxIconTemplate || dt._headerCheckboxIconTemplate; as template) {
+        <p-checkbox [pt]="ptm('pcCheckbox')" [(ngModel)]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="isDisabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel">
+            @if (dataTable.headerCheckboxIconTemplate || dataTable._headerCheckboxIconTemplate; as template) {
                 <ng-template pTemplate="icon">
                     <ng-template *ngTemplateOutlet="template; context: { $implicit: checked }" />
                 </ng-template>
@@ -5959,25 +5983,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         </p-checkbox>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { ariaLabel: [{
+        }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { ariaLabel: [{
                 type: Input
             }] } });
 class ReorderableRowHandle extends BaseComponent {
     el;
+    hostName = 'Table';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('reorderableRowHandle'));
+    }
     _componentStyle = inject(TableStyle);
     constructor(el) {
         super();
         this.el = el;
     }
-    ngAfterViewInit() {
+    onAfterViewInit() {
         // DomHandler.addClass(this.el.nativeElement, 'p-datatable-reorderable-row-handle');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ReorderableRowHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: ReorderableRowHandle, isStandalone: false, selector: "[pReorderableRowHandle]", host: { properties: { "class": "cx('reorderableRowHandle')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ReorderableRowHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReorderableRowHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pReorderableRowHandle]',
@@ -5985,14 +6015,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     host: {
                         '[class]': "cx('reorderableRowHandle')"
                     },
-                    providers: [TableStyle]
+                    providers: [TableStyle],
+                    hostDirectives: [Bind]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
-class ReorderableRow {
-    renderer;
-    dt;
-    el;
+class ReorderableRow extends BaseComponent {
+    dataTable;
     zone;
+    hostName = 'Table';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('reorderableRow'));
+    }
     index;
     pReorderableRowDisabled;
     mouseDownListener;
@@ -6001,13 +6035,12 @@ class ReorderableRow {
     dragOverListener;
     dragLeaveListener;
     dropListener;
-    constructor(renderer, dt, el, zone) {
-        this.renderer = renderer;
-        this.dt = dt;
-        this.el = el;
+    constructor(dataTable, zone) {
+        super();
+        this.dataTable = dataTable;
         this.zone = zone;
     }
-    ngAfterViewInit() {
+    onAfterViewInit() {
         if (this.isEnabled()) {
             this.el.nativeElement.droppable = true;
             this.bindEvents();
@@ -6059,41 +6092,42 @@ class ReorderableRow {
         return false;
     }
     onDragStart(event) {
-        this.dt.onRowDragStart(event, this.index);
+        this.dataTable.onRowDragStart(event, this.index);
     }
     onDragEnd(event) {
-        this.dt.onRowDragEnd(event);
+        this.dataTable.onRowDragEnd(event);
         this.el.nativeElement.draggable = false;
     }
     onDragOver(event) {
-        this.dt.onRowDragOver(event, this.index, this.el.nativeElement);
+        this.dataTable.onRowDragOver(event, this.index, this.el.nativeElement);
         event.preventDefault();
     }
     onDragLeave(event) {
-        this.dt.onRowDragLeave(event, this.el.nativeElement);
+        this.dataTable.onRowDragLeave(event, this.el.nativeElement);
     }
     isEnabled() {
         return this.pReorderableRowDisabled !== true;
     }
     onDrop(event) {
-        if (this.isEnabled() && this.dt.rowDragging) {
-            this.dt.onRowDrop(event, this.el.nativeElement);
+        if (this.isEnabled() && this.dataTable.rowDragging) {
+            this.dataTable.onRowDrop(event, this.el.nativeElement);
         }
         event.preventDefault();
     }
-    ngOnDestroy() {
+    onDestroy() {
         this.unbindEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ReorderableRow, deps: [{ token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.0", type: ReorderableRow, isStandalone: false, selector: "[pReorderableRow]", inputs: { index: ["pReorderableRow", "index"], pReorderableRowDisabled: ["pReorderableRowDisabled", "pReorderableRowDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ReorderableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReorderableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pReorderableRow]',
-                    standalone: false
+                    standalone: false,
+                    hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { index: [{
+        }], ctorParameters: () => [{ type: Table }, { type: i0.NgZone }], propDecorators: { index: [{
                 type: Input,
                 args: ['pReorderableRow']
             }], pReorderableRowDisabled: [{
@@ -6108,6 +6142,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * @group Components
  */
 class ColumnFilter extends BaseComponent {
+    hostName = 'Table';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('columnFilter'));
+    }
+    ptmFilterConstraintOptions(matchMode) {
+        return {
+            context: {
+                highlighted: matchMode && this.isRowMatchModeSelected(matchMode.value)
+            }
+        };
+    }
     /**
      * Property represented by the column.
      * @group Props
@@ -6341,7 +6387,7 @@ class ColumnFilter extends BaseComponent {
     overlayEventListener;
     overlayId;
     get fieldConstraints() {
-        return this.dt.filters ? this.dt.filters[this.field] : null;
+        return this.dataTable.filters ? this.dataTable.filters[this.field] : null;
     }
     get showRemoveIcon() {
         return this.fieldConstraints ? this.fieldConstraints.length > 1 : false;
@@ -6374,25 +6420,22 @@ class ColumnFilter extends BaseComponent {
         return this.config.getTranslation(TranslationKeys.NO_FILTER);
     }
     get filterMenuButtonAriaLabel() {
-        return this.config.translation ? (this.overlayVisible ? this.config.translation.aria.hideFilterMenu : this.config.translation.aria.showFilterMenu) : undefined;
+        return this.config?.translation ? (this.overlayVisible ? this.config?.translation?.aria?.hideFilterMenu : this.config?.translation?.aria?.showFilterMenu) : undefined;
     }
     get removeRuleButtonAriaLabel() {
-        return this.config.translation ? this.config.translation.removeRule : undefined;
+        return this.config?.translation ? this.config?.translation?.removeRule : undefined;
     }
     get filterOperatorAriaLabel() {
-        return this.config.translation ? this.config.translation.aria.filterOperator : undefined;
+        return this.config?.translation ? this.config?.translation?.aria?.filterOperator : undefined;
     }
     get filterConstraintAriaLabel() {
-        return this.config.translation ? this.config.translation.aria.filterConstraint : undefined;
+        return this.config?.translation ? this.config?.translation?.aria?.filterConstraint : undefined;
     }
-    dt = inject(Table);
+    dataTable = inject(Table);
     overlayService = inject(OverlayService);
-    hostName = 'Table';
-    parentInstance = inject(forwardRef(() => Table));
-    ngOnInit() {
-        super.ngOnInit();
+    onInit() {
         this.overlayId = UniqueComponentId();
-        if (!this.dt.filters[this.field]) {
+        if (!this.dataTable.filters[this.field]) {
             this.initFieldFilterConstraint();
         }
         this.translationSubscription = this.config.translationObserver.subscribe(() => {
@@ -6424,7 +6467,7 @@ class ColumnFilter extends BaseComponent {
             }
         ];
     }
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this._templates.forEach((item) => {
             switch (item.getType()) {
                 case 'header':
@@ -6456,7 +6499,7 @@ class ColumnFilter extends BaseComponent {
     }
     initFieldFilterConstraint() {
         let defaultMatchMode = this.getDefaultMatchMode();
-        this.dt.filters[this.field] =
+        this.dataTable.filters[this.field] =
             this.display == 'row'
                 ? { value: null, matchMode: defaultMatchMode }
                 : [
@@ -6470,14 +6513,14 @@ class ColumnFilter extends BaseComponent {
     onMenuMatchModeChange(value, filterMeta) {
         filterMeta.matchMode = value;
         if (!this.showApplyButton) {
-            this.dt._filter();
+            this.dataTable._filter();
         }
     }
     onRowMatchModeChange(matchMode) {
-        const fieldFilter = this.dt.filters[this.field];
+        const fieldFilter = this.dataTable.filters[this.field];
         fieldFilter.matchMode = matchMode;
         if (fieldFilter.value) {
-            this.dt._filter();
+            this.dataTable._filter();
         }
         this.hide();
     }
@@ -6509,30 +6552,30 @@ class ColumnFilter extends BaseComponent {
         this.hide();
     }
     isRowMatchModeSelected(matchMode) {
-        return this.dt.filters[this.field].matchMode === matchMode;
+        return this.dataTable.filters[this.field].matchMode === matchMode;
     }
     addConstraint() {
-        this.dt.filters[this.field].push({
+        this.dataTable.filters[this.field].push({
             value: null,
             matchMode: this.getDefaultMatchMode(),
             operator: this.getDefaultOperator()
         });
-        DomHandler.focus(this.clearButtonViewChild.nativeElement);
+        DomHandler.focus(this.clearButtonViewChild?.nativeElement);
     }
     removeConstraint(filterMeta) {
-        this.dt.filters[this.field] = this.dt.filters[this.field].filter((meta) => meta !== filterMeta);
+        this.dataTable.filters[this.field] = this.dataTable.filters[this.field].filter((meta) => meta !== filterMeta);
         if (!this.showApplyButton) {
-            this.dt._filter();
+            this.dataTable._filter();
         }
-        DomHandler.focus(this.clearButtonViewChild.nativeElement);
+        DomHandler.focus(this.clearButtonViewChild?.nativeElement);
     }
     onOperatorChange(value) {
-        this.dt.filters[this.field].forEach((filterMeta) => {
+        this.dataTable.filters[this.field].forEach((filterMeta) => {
             filterMeta.operator = value;
             this.operator = value;
         });
         if (!this.showApplyButton) {
-            this.dt._filter();
+            this.dataTable._filter();
         }
     }
     toggleMenu(event) {
@@ -6643,18 +6686,18 @@ class ColumnFilter extends BaseComponent {
         }
     }
     getDefaultOperator() {
-        return this.dt.filters ? this.dt.filters[this.field][0].operator : this.operator;
+        return this.dataTable.filters ? this.dataTable.filters[this.field][0].operator : this.operator;
     }
     hasRowFilter() {
-        return this.dt.filters[this.field] && !this.dt.isFilterBlank(this.dt.filters[this.field].value);
+        return this.dataTable.filters[this.field] && !this.dataTable.isFilterBlank(this.dataTable.filters[this.field].value);
     }
     get hasFilter() {
-        let fieldFilter = this.dt.filters[this.field];
+        let fieldFilter = this.dataTable.filters[this.field];
         if (fieldFilter) {
             if (Array.isArray(fieldFilter))
-                return !this.dt.isFilterBlank(fieldFilter[0].value);
+                return !this.dataTable.isFilterBlank(fieldFilter[0].value);
             else
-                return !this.dt.isFilterBlank(fieldFilter.value);
+                return !this.dataTable.isFilterBlank(fieldFilter.value);
         }
         return false;
     }
@@ -6732,15 +6775,15 @@ class ColumnFilter extends BaseComponent {
     }
     clearFilter() {
         this.initFieldFilterConstraint();
-        this.dt._filter();
+        this.dataTable._filter();
         if (this.hideOnClear)
             this.hide();
     }
     applyFilter() {
-        this.dt._filter();
+        this.dataTable._filter();
         this.hide();
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.overlay) {
             this.renderer.appendChild(this.el.nativeElement, this.overlay);
             ZIndexUtils.clear(this.overlay);
@@ -6755,18 +6798,17 @@ class ColumnFilter extends BaseComponent {
         if (this.overlaySubscription) {
             this.overlaySubscription.unsubscribe();
         }
-        super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", 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, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], 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, ngImport: i0, template: `
-        <div [class]="cx('filter')">
+    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')">
             <p-columnFilterFormElement
                 *ngIf="display === 'row'"
                 class="p-fluid"
                 [type]="type"
                 [field]="field"
                 [ariaLabel]="ariaLabel"
-                [filterConstraint]="dt.filters[field]"
+                [filterConstraint]="dataTable.filters[field]"
                 [filterTemplate]="filterTemplate || _filterTemplate"
                 [placeholder]="placeholder"
                 [minFractionDigits]="minFractionDigits"
@@ -6780,10 +6822,12 @@ class ColumnFilter extends BaseComponent {
                 [useGrouping]="useGrouping"
                 [showButtons]="showButtons"
                 [filterOn]="filterOn"
+                [pt]="pt()"
             ></p-columnFilterFormElement>
             <p-button
                 *ngIf="showMenuButton"
                 [styleClass]="cx('pcColumnFilterButton')"
+                [pt]="ptm('pcColumnFilterButton')"
                 [attr.aria-haspopup]="true"
                 [ariaLabel]="filterMenuButtonAriaLabel"
                 [attr.aria-controls]="overlayVisible ? overlayId : null"
@@ -6794,9 +6838,9 @@ class ColumnFilter extends BaseComponent {
             >
                 <ng-template #icon>
                     <ng-container>
-                        <svg data-p-icon="filter" *ngIf="!filterIconTemplate && !_filterIconTemplate && !hasFilter" />
-                        <svg data-p-icon="filter-fill" *ngIf="!filterIconTemplate && !_filterIconTemplate && hasFilter" />
-                        <span class="pi-filter-icon" *ngIf="filterIconTemplate || _filterIconTemplate">
+                        <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']">
                             <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate; context: { hasFilter: hasFilter }"></ng-template>
                         </span>
                     </ng-container>
@@ -6806,6 +6850,7 @@ class ColumnFilter extends BaseComponent {
             <div
                 *ngIf="showMenu && overlayVisible"
                 [class]="cx('filterOverlay')"
+                [pBind]="ptm('filterOverlay')"
                 [id]="overlayId"
                 [attr.aria-modal]="true"
                 role="dialog"
@@ -6816,35 +6861,37 @@ class ColumnFilter extends BaseComponent {
                 (keydown.escape)="onEscape()"
             >
                 <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: field }"></ng-container>
-                <ul *ngIf="display === 'row'; else menu" [class]="cx('filterConstraintList')">
+                <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')"></li>
-                    <li [class]="cx('filterConstraint')" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">
+                    <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')" *ngIf="isShowOperator">
-                        <p-select [options]="operatorOptions" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" [styleClass]="cx('pcFilterOperatorDropdown')"></p-select>
+                    <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')">
-                        <div *ngFor="let fieldConstraint of fieldConstraints; let i = index" [ngClass]="cx('filterRule')">
+                    <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"
@@ -6862,11 +6909,13 @@ class ColumnFilter extends BaseComponent {
                                 [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"
@@ -6876,16 +6925,17 @@ class ColumnFilter extends BaseComponent {
                                     [buttonProps]="filterButtonProps?.popover?.removeRule"
                                 >
                                     <ng-template #icon>
-                                        <svg data-p-icon="trash" *ngIf="!removeRuleIconTemplate && !_removeRuleIconTemplate" />
+                                        <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 *ngIf="isShowAddConstraint">
+                    @if (isShowAddConstraint) {
                         <p-button
                             type="button"
+                            [pt]="ptm('pcAddRuleButtonLabel')"
                             [label]="addRuleButtonLabel"
                             [attr.aria-label]="addRuleButtonLabel"
                             [styleClass]="cx('pcFilterAddRuleButton')"
@@ -6895,35 +6945,44 @@ class ColumnFilter extends BaseComponent {
                             [buttonProps]="filterButtonProps?.popover?.addRule"
                         >
                             <ng-template #icon>
-                                <svg data-p-icon="plus" *ngIf="!addRuleIconTemplate && !_addRuleIconTemplate" />
+                                <svg data-p-icon="plus" *ngIf="!addRuleIconTemplate && !_addRuleIconTemplate" [pBind]="ptm('pcAddRuleButtonLabel')['icon']" />
                                 <ng-template *ngTemplateOutlet="addRuleIconTemplate || _addRuleIconTemplate"></ng-template>
                             </ng-template>
                         </p-button>
-                    </div>
-                    <div [class]="cx('filterButtonbar')">
-                        <p-button #clearBtn *ngIf="showClearButton" [outlined]="true" (onClick)="clearFilter()" [attr.aria-label]="clearButtonLabel" [label]="clearButtonLabel" [buttonProps]="filterButtonProps?.popover?.clear" />
-                        <p-button *ngIf="showApplyButton" (onClick)="applyFilter()" size="small" [label]="applyButtonLabel" [attr.aria-label]="applyButtonLabel" [buttonProps]="filterButtonProps?.popover?.apply" />
+                    }
+                    <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>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => i9.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(() => i6.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i6.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => i10.Button), selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "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: "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$1({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style$1({ 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"], 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColumnFilter, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-columnFilter, p-column-filter, p-columnfilter',
                     standalone: false,
                     template: `
-        <div [class]="cx('filter')">
+        <div [class]="cx('filter')" [pBind]="ptm('filter')">
             <p-columnFilterFormElement
                 *ngIf="display === 'row'"
                 class="p-fluid"
                 [type]="type"
                 [field]="field"
                 [ariaLabel]="ariaLabel"
-                [filterConstraint]="dt.filters[field]"
+                [filterConstraint]="dataTable.filters[field]"
                 [filterTemplate]="filterTemplate || _filterTemplate"
                 [placeholder]="placeholder"
                 [minFractionDigits]="minFractionDigits"
@@ -6937,10 +6996,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 [useGrouping]="useGrouping"
                 [showButtons]="showButtons"
                 [filterOn]="filterOn"
+                [pt]="pt()"
             ></p-columnFilterFormElement>
             <p-button
                 *ngIf="showMenuButton"
                 [styleClass]="cx('pcColumnFilterButton')"
+                [pt]="ptm('pcColumnFilterButton')"
                 [attr.aria-haspopup]="true"
                 [ariaLabel]="filterMenuButtonAriaLabel"
                 [attr.aria-controls]="overlayVisible ? overlayId : null"
@@ -6951,9 +7012,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             >
                 <ng-template #icon>
                     <ng-container>
-                        <svg data-p-icon="filter" *ngIf="!filterIconTemplate && !_filterIconTemplate && !hasFilter" />
-                        <svg data-p-icon="filter-fill" *ngIf="!filterIconTemplate && !_filterIconTemplate && hasFilter" />
-                        <span class="pi-filter-icon" *ngIf="filterIconTemplate || _filterIconTemplate">
+                        <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']">
                             <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate; context: { hasFilter: hasFilter }"></ng-template>
                         </span>
                     </ng-container>
@@ -6963,6 +7024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             <div
                 *ngIf="showMenu && overlayVisible"
                 [class]="cx('filterOverlay')"
+                [pBind]="ptm('filterOverlay')"
                 [id]="overlayId"
                 [attr.aria-modal]="true"
                 role="dialog"
@@ -6973,35 +7035,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 (keydown.escape)="onEscape()"
             >
                 <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: field }"></ng-container>
-                <ul *ngIf="display === 'row'; else menu" [class]="cx('filterConstraintList')">
+                <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')"></li>
-                    <li [class]="cx('filterConstraint')" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">
+                    <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')" *ngIf="isShowOperator">
-                        <p-select [options]="operatorOptions" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" [styleClass]="cx('pcFilterOperatorDropdown')"></p-select>
+                    <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')">
-                        <div *ngFor="let fieldConstraint of fieldConstraints; let i = index" [ngClass]="cx('filterRule')">
+                    <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"
@@ -7019,11 +7083,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                                 [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"
@@ -7033,16 +7099,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                                     [buttonProps]="filterButtonProps?.popover?.removeRule"
                                 >
                                     <ng-template #icon>
-                                        <svg data-p-icon="trash" *ngIf="!removeRuleIconTemplate && !_removeRuleIconTemplate" />
+                                        <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 *ngIf="isShowAddConstraint">
+                    @if (isShowAddConstraint) {
                         <p-button
                             type="button"
+                            [pt]="ptm('pcAddRuleButtonLabel')"
                             [label]="addRuleButtonLabel"
                             [attr.aria-label]="addRuleButtonLabel"
                             [styleClass]="cx('pcFilterAddRuleButton')"
@@ -7052,22 +7119,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             [buttonProps]="filterButtonProps?.popover?.addRule"
                         >
                             <ng-template #icon>
-                                <svg data-p-icon="plus" *ngIf="!addRuleIconTemplate && !_addRuleIconTemplate" />
+                                <svg data-p-icon="plus" *ngIf="!addRuleIconTemplate && !_addRuleIconTemplate" [pBind]="ptm('pcAddRuleButtonLabel')['icon']" />
                                 <ng-template *ngTemplateOutlet="addRuleIconTemplate || _addRuleIconTemplate"></ng-template>
                             </ng-template>
                         </p-button>
-                    </div>
-                    <div [class]="cx('filterButtonbar')">
-                        <p-button #clearBtn *ngIf="showClearButton" [outlined]="true" (onClick)="clearFilter()" [attr.aria-label]="clearButtonLabel" [label]="clearButtonLabel" [buttonProps]="filterButtonProps?.popover?.clear" />
-                        <p-button *ngIf="showApplyButton" (onClick)="applyFilter()" size="small" [label]="applyButtonLabel" [attr.aria-label]="applyButtonLabel" [buttonProps]="filterButtonProps?.popover?.apply" />
+                    }
+                    <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>
         </div>
     `,
-                    animations: [trigger('overlayAnimation', [transition(':enter', [style$1({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style$1({ opacity: 0 }))])])],
-                    encapsulation: ViewEncapsulation.None
+                    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: ViewEncapsulation.None,
+                    hostDirectives: [Bind]
                 }]
         }], propDecorators: { field: [{
                 type: Input
@@ -7109,10 +7186,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: [{ transform: numberAttribute }]
             }], minFractionDigits: [{
                 type: Input,
-                args: [{ transform: (value) => numberAttribute(value, null) }]
+                args: [{ transform: (value) => numberAttribute(value, undefined) }]
             }], maxFractionDigits: [{
                 type: Input,
-                args: [{ transform: (value) => numberAttribute(value, null) }]
+                args: [{ transform: (value) => numberAttribute(value, undefined) }]
             }], prefix: [{
                 type: Input
             }], suffix: [{
@@ -7172,9 +7249,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: ContentChild,
                 args: ['clearfiltericon', { descendants: false }]
             }] } });
-class ColumnFilterFormElement {
-    dt;
+class ColumnFilterFormElement extends BaseComponent {
+    dataTable;
     colFilter;
+    hostName = 'Table';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('columnFilterFormElement'));
+    }
     field;
     type;
     filterConstraint;
@@ -7195,34 +7277,35 @@ class ColumnFilterFormElement {
         return this.colFilter.showButtons;
     }
     filterCallback;
-    constructor(dt, colFilter) {
-        this.dt = dt;
+    constructor(dataTable, colFilter) {
+        super();
+        this.dataTable = dataTable;
         this.colFilter = colFilter;
     }
-    ngOnInit() {
+    onInit() {
         this.filterCallback = (value) => {
             this.filterConstraint.value = value;
-            this.dt._filter();
+            this.dataTable._filter();
         };
     }
     onModelChange(value) {
         this.filterConstraint.value = value;
         if (this.type === 'date' || this.type === 'boolean' || ((this.type === 'text' || this.type === 'numeric') && this.filterOn === 'input') || !value) {
-            this.dt._filter();
+            this.dataTable._filter();
         }
     }
     onTextInputEnterKeyDown(event) {
-        this.dt._filter();
+        this.dataTable._filter();
         event.preventDefault();
     }
     onNumericInputKeyDown(event) {
         if (event.key === 'Enter') {
-            this.dt._filter();
+            this.dataTable._filter();
             event.preventDefault();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: Table }, { token: ColumnFilter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.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, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel", filterOn: "filterOn" }, ngImport: i0, template: `
+    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: `
         <ng-container *ngIf="filterTemplate; else builtInElement">
             <ng-container
                 *ngTemplateOutlet="
@@ -7255,6 +7338,7 @@ class ColumnFilterFormElement {
                     type="text"
                     [ariaLabel]="ariaLabel"
                     pInputText
+                    [pt]="ptm('pcFilterInputText')"
                     [value]="filterConstraint?.value"
                     (input)="onModelChange($event.target.value)"
                     (keydown.enter)="onTextInputEnterKeyDown($event)"
@@ -7278,15 +7362,16 @@ class ColumnFilterFormElement {
                     [currency]="currency"
                     [currencyDisplay]="currencyDisplay"
                     [useGrouping]="useGrouping"
+                    [pt]="ptm('pcFilterInputNumber')"
                 ></p-inputNumber>
-                <p-checkbox [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)" />
 
-                <p-datepicker [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"></p-datepicker>
             </ng-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i12.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: i13.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: i8.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["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: 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-columnFilterFormElement',
@@ -7324,6 +7409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     type="text"
                     [ariaLabel]="ariaLabel"
                     pInputText
+                    [pt]="ptm('pcFilterInputText')"
                     [value]="filterConstraint?.value"
                     (input)="onModelChange($event.target.value)"
                     (keydown.enter)="onTextInputEnterKeyDown($event)"
@@ -7347,14 +7433,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     [currency]="currency"
                     [currencyDisplay]="currencyDisplay"
                     [useGrouping]="useGrouping"
+                    [pt]="ptm('pcFilterInputNumber')"
                 ></p-inputNumber>
-                <p-checkbox [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)" />
 
-                <p-datepicker [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"></p-datepicker>
             </ng-container>
         </ng-template>
     `,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [Bind]
                 }]
         }], ctorParameters: () => [{ type: Table }, { type: ColumnFilter }], propDecorators: { field: [{
                 type: Input
@@ -7368,10 +7456,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], minFractionDigits: [{
                 type: Input,
-                args: [{ transform: (value) => numberAttribute(value, null) }]
+                args: [{ transform: (value) => numberAttribute(value, undefined) }]
             }], maxFractionDigits: [{
                 type: Input,
-                args: [{ transform: (value) => numberAttribute(value, null) }]
+                args: [{ transform: (value) => numberAttribute(value, undefined) }]
             }], prefix: [{
                 type: Input
             }], suffix: [{
@@ -7393,8 +7481,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }] } });
 class TableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.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,
+    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,
             PaginatorModule,
             InputTextModule,
             SelectModule,
@@ -7417,8 +7505,9 @@ class TableModule {
             FilterSlashIcon,
             PlusIcon,
             TrashIcon,
-            RadioButtonModule], 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.0", ngImport: i0, type: TableModule, providers: [TableStyle], imports: [CommonModule,
+            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,
             PaginatorModule,
             InputTextModule,
             SelectModule,
@@ -7441,10 +7530,11 @@ class TableModule {
             FilterSlashIcon,
             PlusIcon,
             TrashIcon,
-            RadioButtonModule, SharedModule,
+            RadioButtonModule,
+            BindModule, SharedModule,
             ScrollerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7471,7 +7561,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         FilterSlashIcon,
                         PlusIcon,
                         TrashIcon,
-                        RadioButtonModule
+                        RadioButtonModule,
+                        BindModule
                     ],
                     exports: [
                         Table,