primeng 19.1.3 → 20.0.0-rc.1

package/fesm2022/primeng-treetable.mjs

@@ -1,12 +1,14 @@
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, EventEmitter, NgZone, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, Component, PLATFORM_ID, Inject, HostListener, Directive, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i4 from '@angular/forms';
+import { Injectable, inject, EventEmitter, NgZone, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, Component, HostListener, Directive, ChangeDetectionStrategy, PLATFORM_ID, Inject, NgModule } from '@angular/core';
+import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { resolveFieldData, isEmpty, getOffset, addClass, findSingle, getIndex, calculateScrollbarWidth, removeClass, hasClass, getHiddenElementOuterWidth, getHiddenElementOuterHeight, reorderArray, equals, find, calculateScrollbarHeight, clearSelection, invokeElementMethod, focus, isNotEmpty, getAttribute } from '@primeuix/utils';
 import * as i3 from 'primeng/api';
 import { FilterService, PrimeTemplate, SharedModule } from 'primeng/api';
+import * as i4 from 'primeng/badge';
+import { BadgeModule } from 'primeng/badge';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Checkbox } from 'primeng/checkbox';
 import { DomHandler } from 'primeng/dom';
@@ -41,6 +43,14 @@ const theme = ({ dt }) => `
     vertical-align: middle;
 }
 
+.p-treetable-sort-icon {
+    color: dt('treetable.sort.icon.color');
+    font-size: dt('treetable.sort.icon.size');
+    width: dt('treetable.sort.icon.size');
+    height: dt('treetable.sort.icon.size');
+    transition: color dt('treetable.transition.duration');
+}
+
 .p-treetable .p-sortable-column .p-sortable-column-badge {
     display: inline-flex;
     align-items: center;
@@ -387,34 +397,78 @@ const theme = ({ dt }) => `
     color: ${dt('treetable.row.hover.color')};
 }
 
-.p-treetable.p-treetable-gridlines .p-datatable-header {
+.p-treetable-gridlines .p-treetable-header {
     border-width: 1px 1px 0 1px;
 }
 
-.p-treetable.p-treetable-gridlines .p-treetable-footer {
+.p-treetable-gridlines .p-treetable-footer {
     border-width: 0 1px 1px 1px;
 }
 
-.p-treetable.p-treetable-gridlines .p-treetable-top {
-    border-width: 0 1px 0 1px;
+.p-treetable-gridlines .p-treetable-paginator-top {
+    border-width: 1px 1px 0 1px;
 }
 
-.p-treetable.p-treetable-gridlines .p-treetable-bottom {
+.p-treetable-gridlines .p-treetable-paginator-bottom {
     border-width: 0 1px 1px 1px;
 }
 
-.p-treetable.p-treetable-gridlines .p-treetable-thead>tr>th {
-    border-width: 1px;
+.p-treetable-gridlines .p-treetable-thead > tr > th {
+    border-width: 1px 0 1px 1px;
 }
 
-.p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td {
+.p-treetable-gridlines .p-treetable-thead > tr > th:last-child {
     border-width: 1px;
 }
 
-.p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td {
+.p-treetable-gridlines .p-treetable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+}
+
+.p-treetable-gridlines .p-treetable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+}
+
+.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+}
+
+.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td:last-child {
     border-width: 1px;
 }
 
+.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+}
+
+.p-treetable-gridlines .p-treetable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+}
+
+.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+}
+
+.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+}
+
+.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+}
+
+.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+}
+
+.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+}
+
+.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+}
+
 .p-treetable.p-treetable-sm .p-treetable-header {
     padding: 0.65625rem 0.875rem;
 }
@@ -466,24 +520,30 @@ p-treetable-toggler + p-treetable-checkbox + span,
 p-tree-table-toggler + p-tree-table-checkbox + span {
     vertical-align: middle;
 }
+
+p-treetable-sort-icon {
+    display: inline-flex;
+    align-items: center;
+    gap: ${dt('treetable.header.cell.gap')};
+}
 `;
 const classes = {
-    root: ({ instance }) => ({
-        'p-treetable p-component': true,
-        'p-treetable-hoverable': instance.rowHover || instance.selectionMode,
-        'p-treetable-resizable': instance.resizableColumns,
-        'p-treetable-resizable-fit': instance.resizableColumns && instance.columnResizeMode === 'fit',
-        'p-treetable-scrollable': instance.scrollable,
-        'p-treetable-flex-scrollable': instance.scrollable && instance.scrollHeight === 'flex',
-        'p-treetable-gridlines': instance.showGridlines,
-        'p-treetable-sm': instance.size === 'small',
-        'p-treetable-lg': instance.size === 'large'
-    }),
+    root: ({ instance }) => [
+        'p-treetable p-component',
+        {
+            'p-treetable-gridlines': instance.showGridlines,
+            'p-treetable-hoverable-rows': instance.rowHover || instance.selectionMode === 'single' || instance.selectionMode === 'multiple',
+            'p-treetable-auto-layout': instance.autoLayout,
+            'p-treetable-resizable': instance.resizableColumns,
+            'p-treetable-resizable-fit': instance.resizableColumns && instance.columnResizeMode === 'fit',
+            'p-treetable-flex-scrollable': instance.scrollable && instance.scrollHeight === 'flex'
+        }
+    ],
     loading: 'p-treetable-loading', //TODO: required?
     mask: 'p-treetable-mask p-overlay-mask',
     loadingIcon: 'p-treetable-loading-icon',
     header: 'p-treetable-header',
-    paginator: ({ instance }) => 'p-treetable-paginator-' + instance.paginatorPosition,
+    pcPaginator: ({ instance }) => ['p-treetable-paginator-' + instance.paginatorPosition, instance.paginatorStyleClass],
     tableContainer: 'p-treetable-table-container',
     table: ({ instance }) => ({
         'p-treetable-table': true,
@@ -492,13 +552,12 @@ const classes = {
         'p-treetable-resizable-table-fit': instance.resizableColumns && instance.columnResizeMode === 'fit'
     }),
     thead: 'p-treetable-thead',
-    headerCell: ({ instance }) => ({
-        'p-treetable-header-cell': true,
-        'p-treetable-sortable-column': instance.sortable,
-        'p-treetable-resizable-column': instance.resizableColumns,
-        'p-treetable-column-sorted': instance?.sorted,
-        'p-treetable-frozen-column': instance.columnProp('frozen')
+    sortableColumn: ({ instance }) => ({
+        'p-sortable-column': instance.isEnabled(),
+        'p-treetable-column-sorted': instance.sorted
     }),
+    sortableColumnIcon: 'p-treetable-sort-icon',
+    sortableColumnBadge: 'p-sortable-column-badge',
     columnResizer: 'p-treetable-column-resizer',
     columnHeaderContent: 'p-treetable-column-header-content',
     columnTitle: 'p-treetable-column-title',
@@ -508,39 +567,42 @@ const classes = {
     row: ({ instance }) => ({
         'p-treetable-row-selected': instance.selected
     }),
-    bodyCell: ({ instance }) => ({
-        'p-treetable-frozen-column': instance.columnProp('frozen')
-    }),
-    bodyCellContent: ({ instance }) => ({
-        'p-treetable-body-cell-content': true,
-        'p-treetable-body-cell-content-expander': instance.columnProp('expander')
+    contextMenuRow: ({ instance }) => ({
+        'p-treetable-contextmenu-row-selected': instance.selected
     }),
-    toggler: 'p-treetable-body-cell-content-expander',
+    toggler: 'p-treetable-toggler',
     nodeToggleButton: 'p-treetable-node-toggle-button',
     nodeToggleIcon: 'p-treetable-node-toggle-icon',
     pcNodeCheckbox: 'p-treetable-node-checkbox',
-    emptyMessage: 'p-treetable-empty-message',
     tfoot: 'p-treetable-tfoot',
     footerCell: ({ instance }) => ({
         'p-treetable-frozen-column': instance.columnProp('frozen')
     }),
     footer: 'p-treetable-footer',
-    columnResizeIndicator: 'p-treetable-column-resize-indicator'
-};
-const inlineStyles = {
-    tableContainer: { overflow: 'auto' },
-    thead: { position: 'sticky' },
-    tfoot: { position: 'sticky' }
+    columnResizeIndicator: 'p-treetable-column-resize-indicator',
+    wrapper: 'p-treetable-wrapper',
+    scrollableWrapper: 'p-treetable-scrollable-wrapper',
+    scrollableView: 'p-treetable-scrollable-view',
+    frozenView: 'p-treetable-frozen-view',
+    columnResizerHelper: 'p-column-resizer-helper',
+    reorderIndicatorUp: 'p-treetable-reorder-indicator-up',
+    reorderIndicatorDown: 'p-treetable-reorder-indicator-down',
+    scrollableHeader: 'p-treetable-scrollable-header',
+    scrollableHeaderBox: 'p-treetable-scrollable-header-box',
+    scrollableHeaderTable: 'p-treetable-scrollable-header-table',
+    scrollableBody: 'p-treetable-scrollable-body',
+    scrollableFooter: 'p-treetable-scrollable-footer',
+    scrollableFooterBox: 'p-treetable-scrollable-footer-box',
+    scrollableFooterTable: 'p-treetable-scrollable-footer-table'
 };
 class TreeTableStyle extends BaseStyle {
     name = 'treetable';
     theme = theme;
     classes = classes;
-    inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -577,7 +639,7 @@ var TreeTableClasses;
     /**
      * Class name of the paginator element
      */
-    TreeTableClasses["paginator"] = "p-treetable-paginator-[position]";
+    TreeTableClasses["pcPaginator"] = "p-treetable-paginator-[position]";
     /**
      * Class name of the table container element
      */
@@ -638,6 +700,66 @@ var TreeTableClasses;
      * Class name of the column resize indicator element
      */
     TreeTableClasses["columnResizeIndicator"] = "p-treetable-column-resize-indicator";
+    /**
+     * Class name of the wrapper element
+     */
+    TreeTableClasses["wrapper"] = "p-treetable-wrapper";
+    /**
+     * Class name of the scrollable wrapper element
+     */
+    TreeTableClasses["scrollableWrapper"] = "p-treetable-scrollable-wrapper";
+    /**
+     * Class name of the scrollable view element
+     */
+    TreeTableClasses["scrollableView"] = "p-treetable-scrollable-view";
+    /**
+     * Class name of the frozen view element
+     */
+    TreeTableClasses["frozenView"] = "p-treetable-frozen-view";
+    /**
+     * Class name of the column resizer helper element
+     */
+    TreeTableClasses["columnResizerHelper"] = "p-treetable-column-resizer-helper";
+    /**
+     * Class name of the reorder indicator up element
+     */
+    TreeTableClasses["reorderIndicatorUp"] = "p-treetable-reorder-indicator-up";
+    /**
+     * Class name of the reorder indicator down element
+     */
+    TreeTableClasses["reorderIndicatorDown"] = "p-treetable-reorder-indicator-down";
+    /**
+     * Class name of the scrollable header element
+     */
+    TreeTableClasses["scrollableHeader"] = "p-treetable-scrollable-header";
+    /**
+     * Class name of the scrollable header box element
+     */
+    TreeTableClasses["scrollableHeaderBox"] = "p-treetable-scrollable-header-box";
+    /**
+     * Class name of the scrollable header table element
+     */
+    TreeTableClasses["scrollableHeaderTable"] = "p-treetable-scrollable-header-table";
+    /**
+     * Class name of the scrollable body element
+     */
+    TreeTableClasses["scrollableBody"] = "p-treetable-scrollable-body";
+    /**
+     * Class name of the scrollable footer element
+     */
+    TreeTableClasses["scrollableFooter"] = "p-treetable-scrollable-footer";
+    /**
+     * Class name of the scrollable footer box element
+     */
+    TreeTableClasses["scrollableFooterBox"] = "p-treetable-scrollable-footer-box";
+    /**
+     * Class name of the scrollable footer table element
+     */
+    TreeTableClasses["scrollableFooterTable"] = "p-treetable-scrollable-footer-table";
+    /**
+     * Class name of the sortable column icon element
+     */
+    TreeTableClasses["sortableColumnIcon"] = "p-sortable-column-icon";
 })(TreeTableClasses || (TreeTableClasses = {}));
 
 class TreeTableService {
@@ -666,10 +788,10 @@ class TreeTableService {
     onTotalRecordsChange(value) {
         this.totalRecordsSource.next(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -683,13 +805,9 @@ class TreeTable extends BaseComponent {
      * @group Props
      */
     columns;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -1162,7 +1280,6 @@ class TreeTable extends BaseComponent {
      * @group Emits
      */
     selectionKeysChange = new EventEmitter();
-    containerViewChild;
     resizeHelperViewChild;
     reorderIndicatorUpViewChild;
     reorderIndicatorDownViewChild;
@@ -1708,16 +1825,16 @@ class TreeTable extends BaseComponent {
         return this.el.nativeElement.children[0];
     }
     onColumnResizeBegin(event) {
-        let containerLeft = getOffset(this.containerViewChild?.nativeElement).left;
-        this.lastResizerHelperX = event.pageX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft;
+        let containerLeft = getOffset(this.el?.nativeElement).left;
+        this.lastResizerHelperX = event.pageX - containerLeft + this.el?.nativeElement.scrollLeft;
         event.preventDefault();
     }
     onColumnResize(event) {
-        let containerLeft = getOffset(this.containerViewChild?.nativeElement).left;
-        addClass(this.containerViewChild?.nativeElement, 'p-unselectable-text');
-        this.resizeHelperViewChild.nativeElement.style.height = this.containerViewChild?.nativeElement.offsetHeight + 'px';
+        let containerLeft = getOffset(this.el?.nativeElement).left;
+        addClass(this.el?.nativeElement, 'p-unselectable-text');
+        this.resizeHelperViewChild.nativeElement.style.height = this.el?.nativeElement.offsetHeight + 'px';
         this.resizeHelperViewChild.nativeElement.style.top = 0 + 'px';
-        this.resizeHelperViewChild.nativeElement.style.left = event.pageX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft + 'px';
+        this.resizeHelperViewChild.nativeElement.style.left = event.pageX - containerLeft + this.el?.nativeElement.scrollLeft + 'px';
         this.resizeHelperViewChild.nativeElement.style.display = 'block';
     }
     onColumnResizeEnd(event, column) {
@@ -1771,7 +1888,7 @@ class TreeTable extends BaseComponent {
                     let resizeColumnIndex = getIndex(column);
                     const scrollableBodyTableWidth = column ? scrollableBodyTable.offsetWidth + delta : newColumnWidth;
                     const scrollableHeaderTableWidth = column ? scrollableHeaderTable.offsetWidth + delta : newColumnWidth;
-                    const isContainerInViewport = this.containerViewChild?.nativeElement.offsetWidth >= scrollableBodyTableWidth;
+                    const isContainerInViewport = this.el?.nativeElement.offsetWidth >= scrollableBodyTableWidth;
                     let setWidth = (container, table, width, isContainerInViewport) => {
                         if (container && table) {
                             container.style.width = isContainerInViewport ? width + calculateScrollbarWidth(scrollableBody) + 'px' : 'auto';
@@ -1789,7 +1906,7 @@ class TreeTable extends BaseComponent {
                     this.tableViewChild.nativeElement.style.width = this.tableViewChild?.nativeElement.offsetWidth + delta + 'px';
                     column.style.width = newColumnWidth + 'px';
                     let containerWidth = this.tableViewChild?.nativeElement.style.width;
-                    this.containerViewChild.nativeElement.style.width = containerWidth + 'px';
+                    this.el.nativeElement.style.width = containerWidth + 'px';
                 }
             }
             this.onColResize.emit({
@@ -1798,7 +1915,7 @@ class TreeTable extends BaseComponent {
             });
         }
         this.resizeHelperViewChild.nativeElement.style.display = 'none';
-        removeClass(this.containerViewChild?.nativeElement, 'p-unselectable-text');
+        removeClass(this.el?.nativeElement, 'p-unselectable-text');
     }
     findParentScrollableView(column) {
         if (column) {
@@ -1837,7 +1954,7 @@ class TreeTable extends BaseComponent {
     onColumnDragEnter(event, dropHeader) {
         if (this.reorderableColumns && this.draggedColumn && dropHeader) {
             event.preventDefault();
-            let containerOffset = getOffset(this.containerViewChild?.nativeElement);
+            let containerOffset = getOffset(this.el?.nativeElement);
             let dropHeaderOffset = getOffset(dropHeader);
             if (this.draggedColumn != dropHeader) {
                 let targetLeft = dropHeaderOffset.left - containerOffset.left;
@@ -2514,316 +2631,282 @@ class TreeTable extends BaseComponent {
         this.initialized = null;
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTable, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: TreeTable, isStandalone: false, selector: "p-treeTable, p-treetable, p-tree-table", inputs: { columns: "columns", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", autoLayout: ["autoLayout", "autoLayout", booleanAttribute], lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], paginator: ["paginator", "paginator", booleanAttribute], rows: ["rows", "rows", numberAttribute], first: ["first", "first", numberAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], selectionMode: "selectionMode", contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], compareSelectionBy: "compareSelectionBy", rowHover: ["rowHover", "rowHover", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], scrollable: ["scrollable", "scrollable", booleanAttribute], scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", frozenColumns: "frozenColumns", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], contextMenu: "contextMenu", rowTrackBy: "rowTrackBy", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterMode: "filterMode", filterLocale: "filterLocale", paginatorLocale: "paginatorLocale", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", value: "value", virtualRowHeight: "virtualRowHeight", selectionKeys: "selectionKeys", showGridlines: ["showGridlines", "showGridlines", booleanAttribute] }, outputs: { selectionChange: "selectionChange", contextMenuSelectionChange: "contextMenuSelectionChange", onFilter: "onFilter", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onPage: "onPage", onSort: "onSort", onLazyLoad: "onLazyLoad", sortFunction: "sortFunction", onColResize: "onColResize", onColReorder: "onColReorder", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onContextMenuSelect: "onContextMenuSelect", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", selectionKeysChange: "selectionKeysChange" }, providers: [TreeTableService, TreeTableStyle], queries: [{ propertyName: "_colGroupTemplate", first: true, predicate: ["colgroup"] }, { propertyName: "_captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_summaryTemplate", first: true, predicate: ["summary"] }, { 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: "_frozenHeaderTemplate", first: true, predicate: ["frozenheader"] }, { propertyName: "_frozenBodyTemplate", first: true, predicate: ["frozenbody"] }, { propertyName: "_frozenFooterTemplate", first: true, predicate: ["frozenfooter"] }, { propertyName: "_frozenColGroupTemplate", first: true, predicate: ["frozencolgroup"] }, { 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: "_togglerIconTemplate", first: true, predicate: ["togglericon"] }, { 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: "_loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { 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: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "scrollableViewChild", first: true, predicate: ["scrollableView"], descendants: true }, { propertyName: "scrollableFrozenViewChild", first: true, predicate: ["scrollableFrozenView"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div
-            #container
-            [ngStyle]="style"
-            [class]="styleClass"
-            data-scrollselectors=".p-treetable-scrollable-body"
-            [ngClass]="{
-                'p-treetable p-component': true,
-                'p-treetable-gridlines': showGridlines,
-                'p-treetable-hoverable-rows': rowHover || selectionMode === 'single' || selectionMode === 'multiple',
-                'p-treetable-auto-layout': autoLayout,
-                'p-treetable-resizable': resizableColumns,
-                'p-treetable-resizable-fit': resizableColumns && columnResizeMode === 'fit',
-                'p-treetable-flex-scrollable': scrollable && scrollHeight === 'flex'
-            }"
-        >
-            <div class="p-treetable-loading" *ngIf="loading && showLoader">
-                <div class="p-overlay-mask p-treetable-mask">
-                    <i *ngIf="loadingIcon" [class]="'p-treetable-loading-icon pi-spin ' + loadingIcon"></i>
-                    <ng-container *ngIf="!loadingIcon">
-                        <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="'p-treetable-loading-icon'" />
-                        <span *ngIf="loadingIconTemplate || _loadingIconTemplate" class="p-treetable-loading-icon">
-                            <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
-                        </span>
-                    </ng-container>
-                </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTable, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: TreeTable, isStandalone: false, selector: "p-treeTable, p-treetable, p-tree-table", inputs: { columns: "columns", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", autoLayout: ["autoLayout", "autoLayout", booleanAttribute], lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], paginator: ["paginator", "paginator", booleanAttribute], rows: ["rows", "rows", numberAttribute], first: ["first", "first", numberAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], selectionMode: "selectionMode", contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], compareSelectionBy: "compareSelectionBy", rowHover: ["rowHover", "rowHover", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], scrollable: ["scrollable", "scrollable", booleanAttribute], scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", frozenColumns: "frozenColumns", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], contextMenu: "contextMenu", rowTrackBy: "rowTrackBy", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterMode: "filterMode", filterLocale: "filterLocale", paginatorLocale: "paginatorLocale", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", value: "value", virtualRowHeight: "virtualRowHeight", selectionKeys: "selectionKeys", showGridlines: ["showGridlines", "showGridlines", booleanAttribute] }, outputs: { selectionChange: "selectionChange", contextMenuSelectionChange: "contextMenuSelectionChange", onFilter: "onFilter", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onPage: "onPage", onSort: "onSort", onLazyLoad: "onLazyLoad", sortFunction: "sortFunction", onColResize: "onColResize", onColReorder: "onColReorder", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onContextMenuSelect: "onContextMenuSelect", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", selectionKeysChange: "selectionKeysChange" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "attr.data-scrollselectors": "'.p-treetable-scrollable-body'" } }, providers: [TreeTableService, TreeTableStyle], queries: [{ propertyName: "_colGroupTemplate", first: true, predicate: ["colgroup"] }, { propertyName: "_captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_summaryTemplate", first: true, predicate: ["summary"] }, { 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: "_frozenHeaderTemplate", first: true, predicate: ["frozenheader"] }, { propertyName: "_frozenBodyTemplate", first: true, predicate: ["frozenbody"] }, { propertyName: "_frozenFooterTemplate", first: true, predicate: ["frozenfooter"] }, { propertyName: "_frozenColGroupTemplate", first: true, predicate: ["frozencolgroup"] }, { 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: "_togglerIconTemplate", first: true, predicate: ["togglericon"] }, { 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: "_loaderTemplate", first: true, predicate: ["loader"] }, { 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: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "scrollableViewChild", first: true, predicate: ["scrollableView"], descendants: true }, { propertyName: "scrollableFrozenViewChild", first: true, predicate: ["scrollableFrozenView"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <div [class]="cx('loading')" *ngIf="loading && showLoader">
+            <div [class]="cx('mask')">
+                <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
+                <ng-container *ngIf="!loadingIcon">
+                    <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="cx('loadingIcon')" />
+                    <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
+                        <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
+                    </span>
+                </ng-container>
             </div>
-            <div *ngIf="captionTemplate || _captionTemplate" class="p-treetable-header">
-                <ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
-            </div>
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                styleClass="p-paginator-top"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="onPageChange($event)"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
-                [templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
-                [templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="paginatorStyleClass"
-                [locale]="paginatorLocale"
-            >
-                <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
-                </ng-template>
-
-                <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
-                </ng-template>
+        </div>
+        <div *ngIf="captionTemplate || _captionTemplate" [class]="cx('header')">
+            <ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
+        </div>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [styleClass]="cx('pcPaginator')"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="onPageChange($event)"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
+            [templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
+            [templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
+            [appendTo]="paginatorDropdownAppendTo"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showPageLinks]="showPageLinks"
+            [locale]="paginatorLocale"
+        >
+            <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
-                </ng-template>
-            </p-paginator>
+            <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-            <div class="p-treetable-wrapper" *ngIf="!scrollable">
-                <table role="table" #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
-                    <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: columns }"></ng-container>
-                    <thead role="rowgroup" class="p-treetable-thead">
-                        <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: columns }"></ng-container>
-                    </thead>
-                    <tbody class="p-treetable-tbody" role="rowgroup" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="bodyTemplate ?? _bodyTemplate"></tbody>
-                    <tfoot class="p-treetable-tfoot" role="rowgroup">
-                        <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: columns }"></ng-container>
-                    </tfoot>
-                </table>
-            </div>
+            <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
+            </ng-template>
+        </p-paginator>
 
-            <div class="p-treetable-scrollable-wrapper" *ngIf="scrollable">
-                <div
-                    class="p-treetable-scrollable-view p-treetable-frozen-view"
-                    *ngIf="frozenColumns || frozenBodyTemplate || _frozenBodyTemplate"
-                    #scrollableFrozenView
-                    [ttScrollableView]="frozenColumns"
-                    [frozen]="true"
-                    [ngStyle]="{ width: frozenWidth }"
-                    [scrollHeight]="scrollHeight"
-                ></div>
-                <div class="p-treetable-scrollable-view" #scrollableView [ttScrollableView]="columns" [frozen]="false" [scrollHeight]="scrollHeight" [ngStyle]="{ left: frozenWidth, width: 'calc(100% - ' + frozenWidth + ')' }"></div>
-            </div>
+        <div [class]="cx('wrapper')" *ngIf="!scrollable">
+            <table role="table" #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
+                <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: columns }"></ng-container>
+                <thead role="rowgroup" [class]="cx('thead')">
+                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: columns }"></ng-container>
+                </thead>
+                <tbody [class]="cx('tbody')" role="rowgroup" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="bodyTemplate ?? _bodyTemplate"></tbody>
+                <tfoot [class]="cx('tfoot')" role="rowgroup">
+                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: columns }"></ng-container>
+                </tfoot>
+            </table>
+        </div>
 
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                styleClass="p-paginator-bottom"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="onPageChange($event)"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
-                [templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
-                [templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="paginatorStyleClass"
-                [locale]="paginatorLocale"
-            >
-                <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
-                </ng-template>
+        <div [class]="cx('scrollableWrapper')" *ngIf="scrollable">
+            <div
+                [ngClass]="[cx('scrollableView'), cx('frozenView')]"
+                *ngIf="frozenColumns || frozenBodyTemplate || _frozenBodyTemplate"
+                #scrollableFrozenView
+                [ttScrollableView]="frozenColumns"
+                [frozen]="true"
+                [ngStyle]="{ width: frozenWidth }"
+                [scrollHeight]="scrollHeight"
+            ></div>
+            <div [class]="cx('scrollableView')" #scrollableView [ttScrollableView]="columns" [frozen]="false" [scrollHeight]="scrollHeight" [ngStyle]="{ left: frozenWidth, width: 'calc(100% - ' + frozenWidth + ')' }"></div>
+        </div>
 
-                <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
-                </ng-template>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [styleClass]="cx('pcPaginator')"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="onPageChange($event)"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
+            [templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
+            [templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
+            [appendTo]="paginatorDropdownAppendTo"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showPageLinks]="showPageLinks"
+            [locale]="paginatorLocale"
+        >
+            <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
-                </ng-template>
-            </p-paginator>
-            <div *ngIf="summaryTemplate || _summaryTemplate" class="p-treetable-footer">
-                <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
-            </div>
+            <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-            <div #resizeHelper class="p-column-resizer-helper" style="display:none" *ngIf="resizableColumns"></div>
-            <span #reorderIndicatorUp class="p-treetable-reorder-indicator-up" style="display: none;" *ngIf="reorderableColumns">
-                <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
-                <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
-            </span>
-            <span #reorderIndicatorDown class="p-treetable-reorder-indicator-down" style="display: none;" *ngIf="reorderableColumns">
-                <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
-                <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
-            </span>
+            <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
+            </ng-template>
+        </p-paginator>
+        <div *ngIf="summaryTemplate || _summaryTemplate" [class]="cx('footer')">
+            <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
         </div>
-    `, 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", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i0.forwardRef(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => SpinnerIcon), selector: "SpinnerIcon" }, { kind: "component", type: i0.forwardRef(() => ArrowDownIcon), selector: "ArrowDownIcon" }, { kind: "component", type: i0.forwardRef(() => ArrowUpIcon), selector: "ArrowUpIcon" }, { kind: "component", type: i0.forwardRef(() => TTScrollableView), selector: "[ttScrollableView]", inputs: ["ttScrollableView", "frozen", "scrollHeight"] }, { kind: "component", type: i0.forwardRef(() => TTBody), selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], encapsulation: i0.ViewEncapsulation.None });
+
+        <div #resizeHelper [class]="cx('columnResizerHelper')" style="display:none" *ngIf="resizableColumns"></div>
+        <span #reorderIndicatorUp [class]="cx('reorderIndicatorUp')" style="display: none;" *ngIf="reorderableColumns">
+            <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
+            <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
+        </span>
+        <span #reorderIndicatorDown [class]="cx('reorderIndicatorDown')" style="display: none;" *ngIf="reorderableColumns">
+            <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
+            <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(() => SpinnerIcon), selector: "SpinnerIcon" }, { kind: "component", type: i0.forwardRef(() => ArrowDownIcon), selector: "ArrowDownIcon" }, { kind: "component", type: i0.forwardRef(() => ArrowUpIcon), selector: "ArrowUpIcon" }, { kind: "component", type: i0.forwardRef(() => TTScrollableView), selector: "[ttScrollableView]", inputs: ["ttScrollableView", "frozen", "scrollHeight"] }, { kind: "component", type: i0.forwardRef(() => TTBody), selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTable, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTable, p-treetable, p-tree-table',
                     standalone: false,
                     template: `
-        <div
-            #container
-            [ngStyle]="style"
-            [class]="styleClass"
-            data-scrollselectors=".p-treetable-scrollable-body"
-            [ngClass]="{
-                'p-treetable p-component': true,
-                'p-treetable-gridlines': showGridlines,
-                'p-treetable-hoverable-rows': rowHover || selectionMode === 'single' || selectionMode === 'multiple',
-                'p-treetable-auto-layout': autoLayout,
-                'p-treetable-resizable': resizableColumns,
-                'p-treetable-resizable-fit': resizableColumns && columnResizeMode === 'fit',
-                'p-treetable-flex-scrollable': scrollable && scrollHeight === 'flex'
-            }"
-        >
-            <div class="p-treetable-loading" *ngIf="loading && showLoader">
-                <div class="p-overlay-mask p-treetable-mask">
-                    <i *ngIf="loadingIcon" [class]="'p-treetable-loading-icon pi-spin ' + loadingIcon"></i>
-                    <ng-container *ngIf="!loadingIcon">
-                        <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="'p-treetable-loading-icon'" />
-                        <span *ngIf="loadingIconTemplate || _loadingIconTemplate" class="p-treetable-loading-icon">
-                            <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
-                        </span>
-                    </ng-container>
-                </div>
+        <div [class]="cx('loading')" *ngIf="loading && showLoader">
+            <div [class]="cx('mask')">
+                <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
+                <ng-container *ngIf="!loadingIcon">
+                    <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="cx('loadingIcon')" />
+                    <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
+                        <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
+                    </span>
+                </ng-container>
             </div>
-            <div *ngIf="captionTemplate || _captionTemplate" class="p-treetable-header">
-                <ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
-            </div>
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                styleClass="p-paginator-top"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="onPageChange($event)"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
-                [templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
-                [templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="paginatorStyleClass"
-                [locale]="paginatorLocale"
-            >
-                <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
-                </ng-template>
-
-                <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
-                </ng-template>
+        </div>
+        <div *ngIf="captionTemplate || _captionTemplate" [class]="cx('header')">
+            <ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
+        </div>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [styleClass]="cx('pcPaginator')"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="onPageChange($event)"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
+            [templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
+            [templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
+            [appendTo]="paginatorDropdownAppendTo"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showPageLinks]="showPageLinks"
+            [locale]="paginatorLocale"
+        >
+            <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
-                </ng-template>
-            </p-paginator>
+            <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-            <div class="p-treetable-wrapper" *ngIf="!scrollable">
-                <table role="table" #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
-                    <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: columns }"></ng-container>
-                    <thead role="rowgroup" class="p-treetable-thead">
-                        <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: columns }"></ng-container>
-                    </thead>
-                    <tbody class="p-treetable-tbody" role="rowgroup" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="bodyTemplate ?? _bodyTemplate"></tbody>
-                    <tfoot class="p-treetable-tfoot" role="rowgroup">
-                        <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: columns }"></ng-container>
-                    </tfoot>
-                </table>
-            </div>
+            <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
+            </ng-template>
+        </p-paginator>
 
-            <div class="p-treetable-scrollable-wrapper" *ngIf="scrollable">
-                <div
-                    class="p-treetable-scrollable-view p-treetable-frozen-view"
-                    *ngIf="frozenColumns || frozenBodyTemplate || _frozenBodyTemplate"
-                    #scrollableFrozenView
-                    [ttScrollableView]="frozenColumns"
-                    [frozen]="true"
-                    [ngStyle]="{ width: frozenWidth }"
-                    [scrollHeight]="scrollHeight"
-                ></div>
-                <div class="p-treetable-scrollable-view" #scrollableView [ttScrollableView]="columns" [frozen]="false" [scrollHeight]="scrollHeight" [ngStyle]="{ left: frozenWidth, width: 'calc(100% - ' + frozenWidth + ')' }"></div>
-            </div>
+        <div [class]="cx('wrapper')" *ngIf="!scrollable">
+            <table role="table" #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
+                <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: columns }"></ng-container>
+                <thead role="rowgroup" [class]="cx('thead')">
+                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: columns }"></ng-container>
+                </thead>
+                <tbody [class]="cx('tbody')" role="rowgroup" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="bodyTemplate ?? _bodyTemplate"></tbody>
+                <tfoot [class]="cx('tfoot')" role="rowgroup">
+                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: columns }"></ng-container>
+                </tfoot>
+            </table>
+        </div>
 
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                styleClass="p-paginator-bottom"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="onPageChange($event)"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
-                [templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
-                [templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="paginatorStyleClass"
-                [locale]="paginatorLocale"
-            >
-                <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
-                </ng-template>
+        <div [class]="cx('scrollableWrapper')" *ngIf="scrollable">
+            <div
+                [ngClass]="[cx('scrollableView'), cx('frozenView')]"
+                *ngIf="frozenColumns || frozenBodyTemplate || _frozenBodyTemplate"
+                #scrollableFrozenView
+                [ttScrollableView]="frozenColumns"
+                [frozen]="true"
+                [ngStyle]="{ width: frozenWidth }"
+                [scrollHeight]="scrollHeight"
+            ></div>
+            <div [class]="cx('scrollableView')" #scrollableView [ttScrollableView]="columns" [frozen]="false" [scrollHeight]="scrollHeight" [ngStyle]="{ left: frozenWidth, width: 'calc(100% - ' + frozenWidth + ')' }"></div>
+        </div>
 
-                <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
-                </ng-template>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [styleClass]="cx('pcPaginator')"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="onPageChange($event)"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
+            [templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
+            [templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
+            [appendTo]="paginatorDropdownAppendTo"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showPageLinks]="showPageLinks"
+            [locale]="paginatorLocale"
+        >
+            <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
-                </ng-template>
-            </p-paginator>
-            <div *ngIf="summaryTemplate || _summaryTemplate" class="p-treetable-footer">
-                <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
-            </div>
+            <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-            <div #resizeHelper class="p-column-resizer-helper" style="display:none" *ngIf="resizableColumns"></div>
-            <span #reorderIndicatorUp class="p-treetable-reorder-indicator-up" style="display: none;" *ngIf="reorderableColumns">
-                <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
-                <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
-            </span>
-            <span #reorderIndicatorDown class="p-treetable-reorder-indicator-down" style="display: none;" *ngIf="reorderableColumns">
-                <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
-                <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
-            </span>
+            <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
+            </ng-template>
+        </p-paginator>
+        <div *ngIf="summaryTemplate || _summaryTemplate" [class]="cx('footer')">
+            <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
         </div>
+
+        <div #resizeHelper [class]="cx('columnResizerHelper')" style="display:none" *ngIf="resizableColumns"></div>
+        <span #reorderIndicatorUp [class]="cx('reorderIndicatorUp')" style="display: none;" *ngIf="reorderableColumns">
+            <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
+            <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
+        </span>
+        <span #reorderIndicatorDown [class]="cx('reorderIndicatorDown')" style="display: none;" *ngIf="reorderableColumns">
+            <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
+            <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
+        </span>
     `,
                     providers: [TreeTableService, TreeTableStyle],
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[attr.data-scrollselectors]': "'.p-treetable-scrollable-body'"
+                    }
                 }]
         }], propDecorators: { columns: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], tableStyle: [{
@@ -3013,9 +3096,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Output
             }], selectionKeysChange: [{
                 type: Output
-            }], containerViewChild: [{
-                type: ViewChild,
-                args: ['container']
             }], resizeHelperViewChild: [{
                 type: ViewChild,
                 args: ['resizeHelper']
@@ -3152,8 +3232,8 @@ class TTBody {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTBody, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: TTBody, isStandalone: false, selector: "[pTreeTableBody]", inputs: { columns: ["pTreeTableBody", "columns"], template: ["pTreeTableBodyTemplate", "template"], frozen: ["frozen", "frozen", booleanAttribute], serializedNodes: "serializedNodes", scrollerOptions: "scrollerOptions" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTBody, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: TTBody, isStandalone: false, selector: "[pTreeTableBody]", inputs: { columns: ["pTreeTableBody", "columns"], template: ["pTreeTableBodyTemplate", "template"], frozen: ["frozen", "frozen", booleanAttribute], serializedNodes: "serializedNodes", scrollerOptions: "scrollerOptions" }, ngImport: i0, template: `
         <ng-template ngFor let-serializedNode let-rowIndex="index" [ngForOf]="serializedNodes || tt.serializedValue" [ngForTrackBy]="tt.rowTrackBy">
             <ng-container *ngIf="serializedNode.visible">
                 <ng-container
@@ -3174,7 +3254,7 @@ class TTBody {
         </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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTBody, decorators: [{
             type: Component,
             args: [{
                     selector: '[pTreeTableBody]',
@@ -3215,9 +3295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], scrollerOptions: [{
                 type: Input
             }] } });
-class TTScrollableView {
-    platformId;
-    renderer;
+class TTScrollableView extends BaseComponent {
     tt;
     el;
     zone;
@@ -3239,6 +3317,7 @@ class TTScrollableView {
     totalRecordsSubscription;
     _scrollHeight;
     preventBodyScrollPropagation;
+    _componentStyle = inject(TreeTableStyle);
     get scrollHeight() {
         return this._scrollHeight;
     }
@@ -3248,14 +3327,14 @@ class TTScrollableView {
             console.log('Percentage scroll height calculation is removed in favor of the more performant CSS based flex mode, use scrollHeight="flex" instead.');
         }
     }
-    constructor(platformId, renderer, tt, el, zone) {
-        this.platformId = platformId;
-        this.renderer = renderer;
+    constructor(tt, el, zone) {
+        super();
         this.tt = tt;
         this.el = el;
         this.zone = zone;
     }
     ngAfterViewInit() {
+        super.ngAfterViewInit();
         if (isPlatformBrowser(this.platformId)) {
             if (!this.frozen) {
                 if (this.tt.frozenColumns || this.tt.frozenBodyTemplate || this.tt._frozenBodyTemplate) {
@@ -3383,18 +3462,19 @@ class TTScrollableView {
         }
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this.unbindEvents();
         this.frozenSiblingBody = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTScrollableView, deps: [{ token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: TTScrollableView, isStandalone: false, selector: "[ttScrollableView]", inputs: { columns: ["ttScrollableView", "columns"], frozen: ["frozen", "frozen", booleanAttribute], scrollHeight: "scrollHeight" }, viewQueries: [{ propertyName: "scrollHeaderViewChild", first: true, predicate: ["scrollHeader"], descendants: true }, { propertyName: "scrollHeaderBoxViewChild", first: true, predicate: ["scrollHeaderBox"], descendants: true }, { propertyName: "scrollBodyViewChild", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "scrollTableViewChild", first: true, predicate: ["scrollTable"], descendants: true }, { propertyName: "scrollLoadingTableViewChild", first: true, predicate: ["loadingTable"], descendants: true }, { propertyName: "scrollFooterViewChild", first: true, predicate: ["scrollFooter"], descendants: true }, { propertyName: "scrollFooterBoxViewChild", first: true, predicate: ["scrollFooterBox"], descendants: true }, { propertyName: "scrollableAlignerViewChild", first: true, predicate: ["scrollableAligner"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], ngImport: i0, template: `
-        <div #scrollHeader class="p-treetable-scrollable-header">
-            <div #scrollHeaderBox class="p-treetable-scrollable-header-box">
-                <table class="p-treetable-scrollable-header-table" [ngClass]="tt.tableStyleClass" [ngStyle]="tt.tableStyle">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTScrollableView, deps: [{ token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: TTScrollableView, isStandalone: false, selector: "[ttScrollableView]", inputs: { columns: ["ttScrollableView", "columns"], frozen: ["frozen", "frozen", booleanAttribute], scrollHeight: "scrollHeight" }, providers: [TreeTableStyle], viewQueries: [{ propertyName: "scrollHeaderViewChild", first: true, predicate: ["scrollHeader"], descendants: true }, { propertyName: "scrollHeaderBoxViewChild", first: true, predicate: ["scrollHeaderBox"], descendants: true }, { propertyName: "scrollBodyViewChild", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "scrollTableViewChild", first: true, predicate: ["scrollTable"], descendants: true }, { propertyName: "scrollLoadingTableViewChild", first: true, predicate: ["loadingTable"], descendants: true }, { propertyName: "scrollFooterViewChild", first: true, predicate: ["scrollFooter"], descendants: true }, { propertyName: "scrollFooterBoxViewChild", first: true, predicate: ["scrollFooterBox"], descendants: true }, { propertyName: "scrollableAlignerViewChild", first: true, predicate: ["scrollableAligner"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div #scrollHeader [class]="cx('scrollableHeader')">
+            <div #scrollHeaderBox [class]="cx('scrollableHeaderBox')">
+                <table [class]="cn(cx('scrollableHeaderTable'), tt.tableStyleClass)" [ngStyle]="tt.tableStyle">
                     <ng-container
                         *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt._frozenColGroupTemplate || tt.colGroupTemplate || tt._colGroupTemplate : tt.colGroupTemplate || tt._colGroupTemplate; context: { $implicit: columns }"
                     ></ng-container>
-                    <thead role="rowgroup" class="p-treetable-thead">
+                    <thead role="rowgroup" [class]="cx('thead')">
                         <ng-container
                             *ngTemplateOutlet="frozen ? tt.frozenHeaderTemplate || tt._frozenHeaderTemplate || tt.headerTemplate || tt._headerTemplate : tt.headerTemplate || tt._headerTemplate; context: { $implicit: columns }"
                         ></ng-container>
@@ -3407,7 +3487,7 @@ class TTScrollableView {
             *ngIf="tt.virtualScroll"
             #scroller
             [items]="tt.serializedValue"
-            styleClass="p-treetable-scrollable-body"
+            [styleClass]="cx('scrollableBody')"
             [style]="{ height: tt.scrollHeight !== 'flex' ? tt.scrollHeight : undefined }"
             [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
             [itemSize]="tt.virtualScrollItemSize || tt._virtualRowHeight"
@@ -3427,7 +3507,7 @@ class TTScrollableView {
         <ng-container *ngIf="!tt.virtualScroll">
             <div
                 #scrollBody
-                class="p-treetable-scrollable-body"
+                [class]="cx('scrollableBody')"
                 [ngStyle]="{
                     'max-height': tt.scrollHeight !== 'flex' ? scrollHeight : undefined,
                     'overflow-y': !frozen && tt.scrollHeight ? 'scroll' : undefined
@@ -3444,7 +3524,7 @@ class TTScrollableView {
                 ></ng-container>
                 <tbody
                     role="rowgroup"
-                    class="p-treetable-tbody"
+                    [class]="cx('tbody')"
                     [pTreeTableBody]="columns"
                     [pTreeTableBodyTemplate]="frozen ? tt.frozenBodyTemplate || tt._frozenBodyTemplate || tt.bodyTemplate || tt._bodyTemplate : tt.bodyTemplate || tt._bodyTemplate"
                     [serializedNodes]="items"
@@ -3454,13 +3534,13 @@ class TTScrollableView {
             <div #scrollableAligner style="background-color:transparent" *ngIf="frozen"></div>
         </ng-template>
 
-        <div #scrollFooter *ngIf="tt.footerTemplate || tt._footerTemplate" class="p-treetable-scrollable-footer">
-            <div #scrollFooterBox class="p-treetable-scrollable-footer-box">
-                <table class="p-treetable-scrollable-footer-table" [ngClass]="tt.tableStyleClass" [ngStyle]="tt.tableStyle">
+        <div #scrollFooter *ngIf="tt.footerTemplate || tt._footerTemplate" [class]="cx('scrollableFooter')">
+            <div #scrollFooterBox [class]="cx('scrollableFooterBox')">
+                <table [class]="cx('scrollableFooterTable')" [ngClass]="tt.tableStyleClass" [ngStyle]="tt.tableStyle">
                     <ng-container
                         *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt._frozenColGroupTemplate || tt.colGroupTemplate || tt._colGroupTemplate : tt.colGroupTemplate || tt._colGroupTemplate; context: { $implicit: columns }"
                     ></ng-container>
-                    <tfoot role="rowgroup" class="p-treetable-tfoot">
+                    <tfoot role="rowgroup" [class]="cx('tfoot')">
                         <ng-container
                             *ngTemplateOutlet="frozen ? tt.frozenFooterTemplate || tt._frozenFooterTemplate || tt.footerTemplate || tt._footerTemplate : tt.footerTemplate || tt._footerTemplate; context: { $implicit: columns }"
                         ></ng-container>
@@ -3470,19 +3550,19 @@ class TTScrollableView {
         </div>
     `, 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(() => 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(() => TTBody), selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTScrollableView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTScrollableView, decorators: [{
             type: Component,
             args: [{
                     selector: '[ttScrollableView]',
                     standalone: false,
                     template: `
-        <div #scrollHeader class="p-treetable-scrollable-header">
-            <div #scrollHeaderBox class="p-treetable-scrollable-header-box">
-                <table class="p-treetable-scrollable-header-table" [ngClass]="tt.tableStyleClass" [ngStyle]="tt.tableStyle">
+        <div #scrollHeader [class]="cx('scrollableHeader')">
+            <div #scrollHeaderBox [class]="cx('scrollableHeaderBox')">
+                <table [class]="cn(cx('scrollableHeaderTable'), tt.tableStyleClass)" [ngStyle]="tt.tableStyle">
                     <ng-container
                         *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt._frozenColGroupTemplate || tt.colGroupTemplate || tt._colGroupTemplate : tt.colGroupTemplate || tt._colGroupTemplate; context: { $implicit: columns }"
                     ></ng-container>
-                    <thead role="rowgroup" class="p-treetable-thead">
+                    <thead role="rowgroup" [class]="cx('thead')">
                         <ng-container
                             *ngTemplateOutlet="frozen ? tt.frozenHeaderTemplate || tt._frozenHeaderTemplate || tt.headerTemplate || tt._headerTemplate : tt.headerTemplate || tt._headerTemplate; context: { $implicit: columns }"
                         ></ng-container>
@@ -3495,7 +3575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             *ngIf="tt.virtualScroll"
             #scroller
             [items]="tt.serializedValue"
-            styleClass="p-treetable-scrollable-body"
+            [styleClass]="cx('scrollableBody')"
             [style]="{ height: tt.scrollHeight !== 'flex' ? tt.scrollHeight : undefined }"
             [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
             [itemSize]="tt.virtualScrollItemSize || tt._virtualRowHeight"
@@ -3515,7 +3595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         <ng-container *ngIf="!tt.virtualScroll">
             <div
                 #scrollBody
-                class="p-treetable-scrollable-body"
+                [class]="cx('scrollableBody')"
                 [ngStyle]="{
                     'max-height': tt.scrollHeight !== 'flex' ? scrollHeight : undefined,
                     'overflow-y': !frozen && tt.scrollHeight ? 'scroll' : undefined
@@ -3532,7 +3612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 ></ng-container>
                 <tbody
                     role="rowgroup"
-                    class="p-treetable-tbody"
+                    [class]="cx('tbody')"
                     [pTreeTableBody]="columns"
                     [pTreeTableBodyTemplate]="frozen ? tt.frozenBodyTemplate || tt._frozenBodyTemplate || tt.bodyTemplate || tt._bodyTemplate : tt.bodyTemplate || tt._bodyTemplate"
                     [serializedNodes]="items"
@@ -3542,13 +3622,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             <div #scrollableAligner style="background-color:transparent" *ngIf="frozen"></div>
         </ng-template>
 
-        <div #scrollFooter *ngIf="tt.footerTemplate || tt._footerTemplate" class="p-treetable-scrollable-footer">
-            <div #scrollFooterBox class="p-treetable-scrollable-footer-box">
-                <table class="p-treetable-scrollable-footer-table" [ngClass]="tt.tableStyleClass" [ngStyle]="tt.tableStyle">
+        <div #scrollFooter *ngIf="tt.footerTemplate || tt._footerTemplate" [class]="cx('scrollableFooter')">
+            <div #scrollFooterBox [class]="cx('scrollableFooterBox')">
+                <table [class]="cx('scrollableFooterTable')" [ngClass]="tt.tableStyleClass" [ngStyle]="tt.tableStyle">
                     <ng-container
                         *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt._frozenColGroupTemplate || tt.colGroupTemplate || tt._colGroupTemplate : tt.colGroupTemplate || tt._colGroupTemplate; context: { $implicit: columns }"
                     ></ng-container>
-                    <tfoot role="rowgroup" class="p-treetable-tfoot">
+                    <tfoot role="rowgroup" [class]="cx('tfoot')">
                         <ng-container
                             *ngTemplateOutlet="frozen ? tt.frozenFooterTemplate || tt._frozenFooterTemplate || tt.footerTemplate || tt._footerTemplate : tt.footerTemplate || tt._footerTemplate; context: { $implicit: columns }"
                         ></ng-container>
@@ -3557,12 +3637,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             </div>
         </div>
     `,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [TreeTableStyle]
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.Renderer2 }, { type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { columns: [{
+        }], ctorParameters: () => [{ type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { columns: [{
                 type: Input,
                 args: ['ttScrollableView']
             }], frozen: [{
@@ -3598,12 +3676,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], scrollHeight: [{
                 type: Input
             }] } });
-class TTSortableColumn {
+class TTSortableColumn extends BaseComponent {
     tt;
     field;
     ttSortableColumnDisabled;
     sorted;
     subscription;
+    _componentStyle = inject(TreeTableStyle);
     get ariaSorted() {
         if (this.sorted && this.tt.sortOrder < 0)
             return 'descending';
@@ -3613,6 +3692,7 @@ class TTSortableColumn {
             return 'none';
     }
     constructor(tt) {
+        super();
         this.tt = tt;
         if (this.isEnabled()) {
             this.subscription = this.tt.tableService.sortSource$.subscribe((sortMeta) => {
@@ -3621,6 +3701,7 @@ class TTSortableColumn {
         }
     }
     ngOnInit() {
+        super.ngOnInit();
         if (this.isEnabled()) {
             this.updateSortState();
         }
@@ -3645,25 +3726,26 @@ class TTSortableColumn {
         return this.ttSortableColumnDisabled !== true;
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTSortableColumn, deps: [{ token: TreeTable }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: TTSortableColumn, isStandalone: false, selector: "[ttSortableColumn]", inputs: { field: ["ttSortableColumn", "field"], ttSortableColumnDisabled: ["ttSortableColumnDisabled", "ttSortableColumnDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class.p-sortable-column": "isEnabled()", "class.p-treetable-column-sorted": "sorted", "attr.tabindex": "isEnabled() ? \"0\" : null", "attr.role": "\"columnheader\"", "attr.aria-sort": "ariaSorted" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTSortableColumn, deps: [{ token: TreeTable }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: TTSortableColumn, isStandalone: false, selector: "[ttSortableColumn]", inputs: { field: ["ttSortableColumn", "field"], ttSortableColumnDisabled: ["ttSortableColumnDisabled", "ttSortableColumnDisabled", booleanAttribute] }, host: { attributes: { "role": "columnheader" }, listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class": "cx(\"sortableColumn\")", "tabindex": "isEnabled() ? \"0\" : null", "aria-sort": "ariaSorted" } }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTSortableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTSortableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttSortableColumn]',
                     standalone: false,
                     host: {
-                        '[class.p-sortable-column]': 'isEnabled()',
-                        '[class.p-treetable-column-sorted]': 'sorted',
-                        '[attr.tabindex]': 'isEnabled() ? "0" : null',
-                        '[attr.role]': '"columnheader"',
-                        '[attr.aria-sort]': 'ariaSorted'
-                    }
+                        '[class]': 'cx("sortableColumn")',
+                        '[tabindex]': 'isEnabled() ? "0" : null',
+                        role: 'columnheader',
+                        '[aria-sort]': 'ariaSorted'
+                    },
+                    providers: [TreeTableStyle]
                 }]
         }], ctorParameters: () => [{ type: TreeTable }], propDecorators: { field: [{
                 type: Input,
@@ -3678,7 +3760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
             }] } });
-class TTSortIcon {
+class TTSortIcon extends BaseComponent {
     tt;
     cd;
     field;
@@ -3686,7 +3768,9 @@ class TTSortIcon {
     ariaLabelAsc;
     subscription;
     sortOrder;
+    _componentStyle = inject(TreeTableStyle);
     constructor(tt, cd) {
+        super();
         this.tt = tt;
         this.cd = cd;
         this.subscription = this.tt.tableService.sortSource$.subscribe((sortMeta) => {
@@ -3695,11 +3779,26 @@ class TTSortIcon {
         });
     }
     ngOnInit() {
+        super.ngOnInit();
         this.updateSortState();
     }
     onClick(event) {
         event.preventDefault();
     }
+    getMultiSortMetaIndex() {
+        let multiSortMeta = this.tt._multiSortMeta;
+        let index = -1;
+        if (multiSortMeta && this.tt.sortMode === 'multiple' && multiSortMeta.length > 1) {
+            for (let i = 0; i < multiSortMeta.length; i++) {
+                let meta = multiSortMeta[i];
+                if (meta.field === this.field || meta.field === this.field) {
+                    index = i;
+                    break;
+                }
+            }
+        }
+        return index;
+    }
     updateSortState() {
         if (this.tt.sortMode === 'single') {
             this.sortOrder = this.tt.isSorted(this.field) ? this.tt.sortOrder : 0;
@@ -3709,36 +3808,46 @@ class TTSortIcon {
             this.sortOrder = sortMeta ? sortMeta.order : 0;
         }
     }
+    getBadgeValue() {
+        return this.getMultiSortMetaIndex() + 1;
+    }
+    isMultiSorted() {
+        return this.tt.sortMode === 'multiple' && this.getMultiSortMetaIndex() > -1;
+    }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTSortIcon, deps: [{ token: TreeTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: TTSortIcon, isStandalone: false, selector: "p-treeTableSortIcon, p-treetable-sort-icon, p-tree-table-sort-icon", inputs: { field: "field", ariaLabelDesc: "ariaLabelDesc", ariaLabelAsc: "ariaLabelAsc" }, ngImport: i0, template: ` <ng-container *ngIf="!tt.sortIconTemplate && !tt._sortIconTemplate">
-            <SortAltIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === 0" />
-            <SortAmountUpAltIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === 1" />
-            <SortAmountDownIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === -1" />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTSortIcon, deps: [{ token: TreeTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TTSortIcon, isStandalone: false, selector: "p-treeTableSortIcon, p-treetable-sort-icon, p-tree-table-sort-icon", inputs: { field: "field", ariaLabelDesc: "ariaLabelDesc", ariaLabelAsc: "ariaLabelAsc" }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0, template: ` <ng-container *ngIf="!tt.sortIconTemplate && !tt._sortIconTemplate">
+            <SortAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 0" />
+            <SortAmountUpAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" />
+            <SortAmountDownIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" />
         </ng-container>
-        <span *ngIf="tt.sortIconTemplate || tt._sortIconTemplate" class="p-sortable-column-icon">
+        <span *ngIf="tt.sortIconTemplate || tt._sortIconTemplate" [class]="cx('sortableColumnIcon')">
             <ng-template *ngTemplateOutlet="tt.sortIconTemplate || tt._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
-        </span>`, 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(() => SortAltIcon), selector: "SortAltIcon" }, { kind: "component", type: i0.forwardRef(() => SortAmountUpAltIcon), selector: "SortAmountUpAltIcon" }, { kind: "component", type: i0.forwardRef(() => SortAmountDownIcon), selector: "SortAmountDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        </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(() => SortAltIcon), selector: "SortAltIcon" }, { kind: "component", type: i0.forwardRef(() => SortAmountUpAltIcon), selector: "SortAmountUpAltIcon" }, { kind: "component", type: i0.forwardRef(() => SortAmountDownIcon), selector: "SortAmountDownIcon" }, { kind: "component", type: i0.forwardRef(() => i4.Badge), selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTSortIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTSortIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableSortIcon, p-treetable-sort-icon, p-tree-table-sort-icon',
                     standalone: false,
                     template: ` <ng-container *ngIf="!tt.sortIconTemplate && !tt._sortIconTemplate">
-            <SortAltIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === 0" />
-            <SortAmountUpAltIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === 1" />
-            <SortAmountDownIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === -1" />
+            <SortAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 0" />
+            <SortAmountUpAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" />
+            <SortAmountDownIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" />
         </ng-container>
-        <span *ngIf="tt.sortIconTemplate || tt._sortIconTemplate" class="p-sortable-column-icon">
+        <span *ngIf="tt.sortIconTemplate || tt._sortIconTemplate" [class]="cx('sortableColumnIcon')">
             <ng-template *ngTemplateOutlet="tt.sortIconTemplate || tt._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
-        </span>`,
+        </span>
+        <p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small"></p-badge>`,
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [TreeTableStyle]
                 }]
         }], ctorParameters: () => [{ type: TreeTable }, { type: i0.ChangeDetectorRef }], propDecorators: { field: [{
                 type: Input
@@ -3817,10 +3926,10 @@ class TTResizableColumn {
         }
         this.unbindDocumentEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTResizableColumn, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: TTResizableColumn, isStandalone: false, selector: "[ttResizableColumn]", inputs: { ttResizableColumnDisabled: ["ttResizableColumnDisabled", "ttResizableColumnDisabled", booleanAttribute] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTResizableColumn, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: TTResizableColumn, isStandalone: false, selector: "[ttResizableColumn]", inputs: { ttResizableColumnDisabled: ["ttResizableColumnDisabled", "ttResizableColumnDisabled", booleanAttribute] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTResizableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTResizableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttResizableColumn]',
@@ -3922,10 +4031,10 @@ class TTReorderableColumn {
     ngOnDestroy() {
         this.unbindEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTReorderableColumn, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: TTReorderableColumn, isStandalone: false, selector: "[ttReorderableColumn]", inputs: { ttReorderableColumnDisabled: ["ttReorderableColumnDisabled", "ttReorderableColumnDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTReorderableColumn, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: TTReorderableColumn, isStandalone: false, selector: "[ttReorderableColumn]", inputs: { ttReorderableColumnDisabled: ["ttReorderableColumnDisabled", "ttReorderableColumnDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTReorderableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTReorderableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttReorderableColumn]',
@@ -3944,14 +4053,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: HostListener,
                 args: ['drop', ['$event']]
             }] } });
-class TTSelectableRow {
+class TTSelectableRow extends BaseComponent {
     tt;
     tableService;
     rowNode;
     ttSelectableRowDisabled;
     selected;
     subscription;
+    _componentStyle = inject(TreeTableStyle);
     constructor(tt, tableService) {
+        super();
         this.tt = tt;
         this.tableService = tableService;
         if (this.isEnabled()) {
@@ -3961,6 +4072,7 @@ class TTSelectableRow {
         }
     }
     ngOnInit() {
+        super.ngOnInit();
         if (this.isEnabled()) {
             this.selected = this.tt.isSelected(this.rowNode.node);
         }
@@ -4004,22 +4116,24 @@ class TTSelectableRow {
         return this.ttSelectableRowDisabled !== true;
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTSelectableRow, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: TTSelectableRow, isStandalone: false, selector: "[ttSelectableRow]", inputs: { rowNode: ["ttSelectableRow", "rowNode"], ttSelectableRowDisabled: ["ttSelectableRowDisabled", "ttSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "touchend": "onTouchEnd($event)" }, properties: { "class.p-treetable-row-selected": "selected", "attr.aria-checked": "selected" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTSelectableRow, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: TTSelectableRow, isStandalone: false, selector: "[ttSelectableRow]", inputs: { rowNode: ["ttSelectableRow", "rowNode"], ttSelectableRowDisabled: ["ttSelectableRowDisabled", "ttSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "touchend": "onTouchEnd($event)" }, properties: { "class": "cx(\"row\")", "aria-checked": "selected" } }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTSelectableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTSelectableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttSelectableRow]',
                     standalone: false,
                     host: {
-                        '[class.p-treetable-row-selected]': 'selected',
-                        '[attr.aria-checked]': 'selected'
-                    }
+                        '[class]': 'cx("row")',
+                        '[aria-checked]': 'selected'
+                    },
+                    providers: [TreeTableStyle]
                 }]
         }], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }], propDecorators: { rowNode: [{
                 type: Input,
@@ -4037,14 +4151,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: HostListener,
                 args: ['touchend', ['$event']]
             }] } });
-class TTSelectableRowDblClick {
+class TTSelectableRowDblClick extends BaseComponent {
     tt;
     tableService;
     rowNode;
     ttSelectableRowDisabled;
     selected;
     subscription;
+    _componentStyle = inject(TreeTableStyle);
     constructor(tt, tableService) {
+        super();
         this.tt = tt;
         this.tableService = tableService;
         if (this.isEnabled()) {
@@ -4054,6 +4170,7 @@ class TTSelectableRowDblClick {
         }
     }
     ngOnInit() {
+        super.ngOnInit();
         if (this.isEnabled()) {
             this.selected = this.tt.isSelected(this.rowNode.node);
         }
@@ -4070,21 +4187,23 @@ class TTSelectableRowDblClick {
         return this.ttSelectableRowDisabled !== true;
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTSelectableRowDblClick, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: TTSelectableRowDblClick, isStandalone: false, selector: "[ttSelectableRowDblClick]", inputs: { rowNode: ["ttSelectableRowDblClick", "rowNode"], ttSelectableRowDisabled: ["ttSelectableRowDisabled", "ttSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class.p-treetable-row-selected": "selected" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTSelectableRowDblClick, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: TTSelectableRowDblClick, isStandalone: false, selector: "[ttSelectableRowDblClick]", inputs: { rowNode: ["ttSelectableRowDblClick", "rowNode"], ttSelectableRowDisabled: ["ttSelectableRowDisabled", "ttSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class": "cx(\"row\")" } }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTSelectableRowDblClick, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTSelectableRowDblClick, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttSelectableRowDblClick]',
                     standalone: false,
                     host: {
-                        '[class.p-treetable-row-selected]': 'selected'
-                    }
+                        '[class]': 'cx("row")'
+                    },
+                    providers: [TreeTableStyle]
                 }]
         }], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }], propDecorators: { rowNode: [{
                 type: Input,
@@ -4096,18 +4215,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: HostListener,
                 args: ['dblclick', ['$event']]
             }] } });
-class TTContextMenuRow {
+class TTContextMenuRow extends BaseComponent {
     tt;
     tableService;
-    el;
     rowNode;
     ttContextMenuRowDisabled;
     selected;
     subscription;
-    constructor(tt, tableService, el) {
+    _componentStyle = inject(TreeTableStyle);
+    constructor(tt, tableService) {
+        super();
         this.tt = tt;
         this.tableService = tableService;
-        this.el = el;
         if (this.isEnabled()) {
             this.subscription = this.tt.tableService.contextMenuSource$.subscribe((node) => {
                 this.selected = this.tt.equals(this.rowNode.node, node);
@@ -4128,24 +4247,26 @@ class TTContextMenuRow {
         return this.ttContextMenuRowDisabled !== true;
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTContextMenuRow, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: TTContextMenuRow, isStandalone: false, selector: "[ttContextMenuRow]", inputs: { rowNode: ["ttContextMenuRow", "rowNode"], ttContextMenuRowDisabled: ["ttContextMenuRowDisabled", "ttContextMenuRowDisabled", booleanAttribute] }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class.p-treetable-contextmenu-row-selected": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTContextMenuRow, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: TTContextMenuRow, isStandalone: false, selector: "[ttContextMenuRow]", inputs: { rowNode: ["ttContextMenuRow", "rowNode"], ttContextMenuRowDisabled: ["ttContextMenuRowDisabled", "ttContextMenuRowDisabled", booleanAttribute] }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class": "cx(\"contextMenuRow\")", "tabindex": "isEnabled() ? 0 : undefined" } }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTContextMenuRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTContextMenuRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttContextMenuRow]',
                     standalone: false,
                     host: {
-                        '[class.p-treetable-contextmenu-row-selected]': 'selected',
-                        '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
-                    }
+                        '[class]': 'cx("contextMenuRow")',
+                        '[tabindex]': 'isEnabled() ? 0 : undefined'
+                    },
+                    providers: [TreeTableStyle]
                 }]
-        }], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }, { type: i0.ElementRef }], propDecorators: { rowNode: [{
+        }], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }], propDecorators: { rowNode: [{
                 type: Input,
                 args: ['ttContextMenuRow']
             }], ttContextMenuRowDisabled: [{
@@ -4155,7 +4276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
             }] } });
-class TTCheckbox {
+class TTCheckbox extends BaseComponent {
     tt;
     tableService;
     cd;
@@ -4165,7 +4286,9 @@ class TTCheckbox {
     partialChecked;
     focused;
     subscription;
+    _componentStyle = inject(TreeTableStyle);
     constructor(tt, tableService, cd) {
+        super();
         this.tt = tt;
         this.tableService = tableService;
         this.cd = cd;
@@ -4182,6 +4305,7 @@ class TTCheckbox {
         });
     }
     ngOnInit() {
+        super.ngOnInit();
         if (this.tt.selectionKeys) {
             this.checked = this.tt.isNodeSelected(this.rowNode.node);
             this.partialChecked = this.tt.isNodePartialSelected(this.rowNode.node);
@@ -4218,28 +4342,29 @@ class TTCheckbox {
         this.focused = false;
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTCheckbox, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: TTCheckbox, isStandalone: false, selector: "p-treeTableCheckbox, p-treetable-checkbox, p-tree-table-checkbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], rowNode: ["value", "rowNode"] }, ngImport: i0, template: `
-        <p-checkbox [ngModel]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="disabled" [indeterminate]="partialChecked" styleClass="p-treetable-node-checkbox" [tabIndex]="-1">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTCheckbox, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: TTCheckbox, isStandalone: false, selector: "p-treeTableCheckbox, p-treetable-checkbox, p-tree-table-checkbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], rowNode: ["value", "rowNode"] }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0, template: `
+        <p-checkbox [ngModel]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="disabled" [indeterminate]="partialChecked" [styleClass]="cx('pcNodeCheckbox')" [tabIndex]="-1">
             <ng-container *ngIf="tt.checkboxIconTemplate || tt._checkboxIconTemplate">
                 <ng-template pTemplate="icon">
                     <ng-template *ngTemplateOutlet="tt.checkboxIconTemplate || tt._checkboxIconTemplate; context: { $implicit: checked, partialSelected: partialChecked }"></ng-template>
                 </ng-template>
             </ng-container>
         </p-checkbox>
-    `, 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: "directive", type: i0.forwardRef(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => Checkbox), selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, 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: "directive", type: i0.forwardRef(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => 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"] }, { kind: "directive", type: i0.forwardRef(() => i5.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i5.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableCheckbox, p-treetable-checkbox, p-tree-table-checkbox',
                     standalone: false,
                     template: `
-        <p-checkbox [ngModel]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="disabled" [indeterminate]="partialChecked" styleClass="p-treetable-node-checkbox" [tabIndex]="-1">
+        <p-checkbox [ngModel]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="disabled" [indeterminate]="partialChecked" [styleClass]="cx('pcNodeCheckbox')" [tabIndex]="-1">
             <ng-container *ngIf="tt.checkboxIconTemplate || tt._checkboxIconTemplate">
                 <ng-template pTemplate="icon">
                     <ng-template *ngTemplateOutlet="tt.checkboxIconTemplate || tt._checkboxIconTemplate; context: { $implicit: checked, partialSelected: partialChecked }"></ng-template>
@@ -4248,7 +4373,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         </p-checkbox>
     `,
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [TreeTableStyle]
                 }]
         }], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input,
@@ -4327,8 +4453,8 @@ class TTHeaderCheckbox {
         }
         return checked;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTHeaderCheckbox, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: TTHeaderCheckbox, isStandalone: false, selector: "p-treeTableHeaderCheckbox", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTHeaderCheckbox, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TTHeaderCheckbox, isStandalone: false, selector: "p-treeTableHeaderCheckbox", ngImport: i0, template: `
         <p-checkbox [ngModel]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="!tt.value || tt.value.length === 0">
             <ng-container *ngIf="tt.headerCheckboxIconTemplate || tt._headerCheckboxIconTemplate">
                 <ng-template pTemplate="icon">
@@ -4336,9 +4462,9 @@ class TTHeaderCheckbox {
                 </ng-template>
             </ng-container>
         </p-checkbox>
-    `, 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: "directive", type: i0.forwardRef(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => Checkbox), selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, 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: "directive", type: i0.forwardRef(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => 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"] }, { kind: "directive", type: i0.forwardRef(() => i5.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i5.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTHeaderCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTHeaderCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableHeaderCheckbox',
@@ -4456,6 +4582,7 @@ class TTEditableColumn {
         let row = currentCell.parentElement;
         let targetCell = this.findPreviousEditableColumn(currentCell);
         if (targetCell) {
+            // @ts-ignore
             invokeElementMethod(targetCell, 'click', undefined);
             event.preventDefault();
         }
@@ -4465,6 +4592,7 @@ class TTEditableColumn {
         let row = currentCell.parentElement;
         let targetCell = this.findNextEditableColumn(currentCell);
         if (targetCell) {
+            // @ts-ignore
             invokeElementMethod(targetCell, 'click', undefined);
             event.preventDefault();
         }
@@ -4508,10 +4636,10 @@ class TTEditableColumn {
     isEnabled() {
         return this.ttEditableColumnDisabled !== true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTEditableColumn, deps: [{ token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: TTEditableColumn, isStandalone: false, selector: "[ttEditableColumn]", inputs: { data: ["ttEditableColumn", "data"], field: ["ttEditableColumnField", "field"], ttEditableColumnDisabled: ["ttEditableColumnDisabled", "ttEditableColumnDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTEditableColumn, deps: [{ token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: TTEditableColumn, isStandalone: false, selector: "[ttEditableColumn]", inputs: { data: ["ttEditableColumn", "data"], field: ["ttEditableColumnField", "field"], ttEditableColumnDisabled: ["ttEditableColumnDisabled", "ttEditableColumnDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTEditableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTEditableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttEditableColumn]',
@@ -4556,8 +4684,8 @@ class TreeTableCellEditor extends BaseComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableCellEditor, deps: [{ token: TreeTable }, { token: TTEditableColumn }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: TreeTableCellEditor, isStandalone: false, selector: "p-treeTableCellEditor, p-treetablecelleditor, p-treetable-cell-editor", queries: [{ propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableCellEditor, deps: [{ token: TreeTable }, { token: TTEditableColumn }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TreeTableCellEditor, isStandalone: false, selector: "p-treeTableCellEditor, p-treetablecelleditor, p-treetable-cell-editor", queries: [{ propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="tt.editingCell === editableColumn.el.nativeElement">
             <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
         </ng-container>
@@ -4566,7 +4694,7 @@ class TreeTableCellEditor extends BaseComponent {
         </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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableCellEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableCellEditor, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableCellEditor, p-treetablecelleditor, p-treetable-cell-editor',
@@ -4585,7 +4713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: ContentChildren,
                 args: [PrimeTemplate]
             }] } });
-class TTRow {
+class TTRow extends BaseComponent {
     tt;
     el;
     zone;
@@ -4599,7 +4727,9 @@ class TTRow {
         return this.rowNode?.node['expanded'];
     }
     rowNode;
+    _componentStyle = inject(TreeTableStyle);
     constructor(tt, el, zone) {
+        super();
         this.tt = tt;
         this.el = el;
         this.zone = zone;
@@ -4655,7 +4785,7 @@ class TTRow {
         event.preventDefault();
     }
     onArrowLeftKey(event) {
-        const container = this.tt.containerViewChild?.nativeElement;
+        const container = this.tt.el?.nativeElement;
         const expandedRows = find(container, '[aria-expanded="true"]');
         const lastExpandedRow = expandedRows[expandedRows.length - 1];
         if (this.expanded) {
@@ -4668,12 +4798,12 @@ class TTRow {
         event.preventDefault();
     }
     onHomeKey(event) {
-        const firstElement = findSingle(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`);
+        const firstElement = findSingle(this.tt.el?.nativeElement, `tr[aria-level="${this.level}"]`);
         firstElement && focus(firstElement);
         event.preventDefault();
     }
     onEndKey(event) {
-        const nodes = find(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`);
+        const nodes = find(this.tt.el?.nativeElement, `tr[aria-level="${this.level}"]`);
         const lastElement = nodes[nodes.length - 1];
         focus(lastElement);
         event.preventDefault();
@@ -4718,7 +4848,7 @@ class TTRow {
     restoreFocus(index) {
         this.zone.runOutsideAngular(() => {
             setTimeout(() => {
-                const container = this.tt.containerViewChild?.nativeElement;
+                const container = this.tt.el?.nativeElement;
                 const row = findSingle(container, '.p-treetable-tbody').children[index || this.tt.toggleRowIndex];
                 const rows = [...find(container, 'tr')];
                 rows &&
@@ -4734,22 +4864,23 @@ class TTRow {
             }, 25);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTRow, deps: [{ token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: TTRow, isStandalone: false, selector: "[ttRow]", inputs: { rowNode: ["ttRow", "rowNode"] }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class": "'p-element ' + styleClass", "attr.tabindex": "'0'", "attr.aria-expanded": "expanded", "attr.aria-level": "level", "attr.data-pc-section": "row", "attr.role": "row" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTRow, deps: [{ token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: TTRow, isStandalone: false, selector: "[ttRow]", inputs: { rowNode: ["ttRow", "rowNode"] }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class": "'p-element ' + styleClass", "tabindex": "'0'", "aria-expanded": "expanded", "aria-level": "level", "data-pc-section": "row", "role": "row" } }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TTRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttRow]',
                     standalone: false,
                     host: {
                         '[class]': `'p-element ' + styleClass`,
-                        '[attr.tabindex]': "'0'",
-                        '[attr.aria-expanded]': 'expanded',
-                        '[attr.aria-level]': 'level',
-                        '[attr.data-pc-section]': 'row',
-                        '[attr.role]': 'row'
-                    }
+                        '[tabindex]': "'0'",
+                        '[aria-expanded]': 'expanded',
+                        '[aria-level]': 'level',
+                        '[data-pc-section]': 'row',
+                        '[role]': 'row'
+                    },
+                    providers: [TreeTableStyle]
                 }]
         }], ctorParameters: () => [{ type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { rowNode: [{
                 type: Input,
@@ -4761,6 +4892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 class TreeTableToggler extends BaseComponent {
     tt;
     rowNode;
+    _componentStyle = inject(TreeTableStyle);
     constructor(tt) {
         super();
         this.tt = tt;
@@ -4786,11 +4918,11 @@ class TreeTableToggler extends BaseComponent {
         this.tt.tableService.onUIUpdate(this.tt.value);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableToggler, deps: [{ token: TreeTable }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: TreeTableToggler, isStandalone: false, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: { rowNode: "rowNode" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableToggler, deps: [{ token: TreeTable }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TreeTableToggler, isStandalone: false, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: { rowNode: "rowNode" }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0, template: `
         <button
             type="button"
-            class="p-treetable-toggler"
+            [class]="cx('toggler')"
             (click)="onClick($event)"
             tabindex="-1"
             pRipple
@@ -4808,7 +4940,7 @@ class TreeTableToggler extends BaseComponent {
         </button>
     `, 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: "directive", type: i0.forwardRef(() => Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "ChevronRightIcon" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableToggler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableToggler, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableToggler, p-treetabletoggler, p-treetable-toggler',
@@ -4816,7 +4948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     template: `
         <button
             type="button"
-            class="p-treetable-toggler"
+            [class]="cx('toggler')"
             (click)="onClick($event)"
             tabindex="-1"
             pRipple
@@ -4833,14 +4965,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             <ng-template *ngTemplateOutlet="tt.togglerIconTemplate || tt._togglerIconTemplate; context: { $implicit: rowNode.node.expanded }"></ng-template>
         </button>
     `,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [TreeTableStyle]
                 }]
         }], ctorParameters: () => [{ type: TreeTable }], propDecorators: { rowNode: [{
                 type: Input
             }] } });
 class TreeTableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: TreeTableModule, declarations: [TreeTable, TreeTableToggler, TTScrollableView, TTBody, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: TreeTableModule, declarations: [TreeTable, TreeTableToggler, TTScrollableView, TTBody, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor], imports: [CommonModule,
             PaginatorModule,
             Ripple,
             Scroller,
@@ -4850,6 +4983,7 @@ class TreeTableModule {
             SortAltIcon,
             SortAmountUpAltIcon,
             SortAmountDownIcon,
+            BadgeModule,
             CheckIcon,
             MinusIcon,
             ChevronDownIcon,
@@ -4857,7 +4991,7 @@ class TreeTableModule {
             Checkbox,
             SharedModule,
             FormsModule], exports: [TreeTable, SharedModule, TreeTableToggler, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor, Scroller] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableModule, imports: [CommonModule,
             PaginatorModule,
             Scroller,
             SpinnerIcon,
@@ -4866,6 +5000,7 @@ class TreeTableModule {
             SortAltIcon,
             SortAmountUpAltIcon,
             SortAmountDownIcon,
+            BadgeModule,
             CheckIcon,
             MinusIcon,
             ChevronDownIcon,
@@ -4874,7 +5009,7 @@ class TreeTableModule {
             SharedModule,
             FormsModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4888,6 +5023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         SortAltIcon,
                         SortAmountUpAltIcon,
                         SortAmountDownIcon,
+                        BadgeModule,
                         CheckIcon,
                         MinusIcon,
                         ChevronDownIcon,