primeng 14.1.2 → 14.2.0

package/fesm2020/primeng-treetable.mjs

@@ -1,18 +1,18 @@
-import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, Directive, HostListener, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, Directive, HostListener, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i1 from 'primeng/api';
+import { PrimeTemplate, SharedModule } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
 import * as i3 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i1 from 'primeng/api';
-import { PrimeTemplate, SharedModule } from 'primeng/api';
-import { ObjectUtils } from 'primeng/utils';
 import * as i5 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i4 from 'primeng/scroller';
 import { ScrollerModule } from 'primeng/scroller';
+import { ObjectUtils } from 'primeng/utils';
+import { Subject } from 'rxjs';
 
 class TreeTableService {
     constructor() {
@@ -69,7 +69,7 @@ class TreeTable {
         this.resetPageOnSort = true;
         this.selectionChange = new EventEmitter();
         this.contextMenuSelectionChange = new EventEmitter();
-        this.contextMenuSelectionMode = "separate";
+        this.contextMenuSelectionMode = 'separate';
         this.compareSelectionBy = 'deepEquals';
         this.loadingIcon = 'pi pi-spinner';
         this.showLoader = true;
@@ -107,7 +107,7 @@ class TreeTable {
     }
     set virtualRowHeight(val) {
         this._virtualRowHeight = val;
-        console.warn("The virtualRowHeight property is deprecated, use virtualScrollItemSize property instead.");
+        console.warn('The virtualRowHeight property is deprecated, use virtualScrollItemSize property instead.');
     }
     ngOnInit() {
         if (this.lazy && this.lazyLoadOnInit && !this.virtualScroll) {
@@ -170,12 +170,13 @@ class TreeTable {
         if (simpleChange.value) {
             this._value = simpleChange.value.currentValue;
             if (!this.lazy) {
-                this.totalRecords = (this._value ? this._value.length : 0);
+                this.totalRecords = this._value ? this._value.length : 0;
                 if (this.sortMode == 'single' && this.sortField)
                     this.sortSingle();
                 else if (this.sortMode == 'multiple' && this.multiSortMeta)
                     this.sortMultiple();
-                else if (this.hasFilter()) //sort already filters
+                else if (this.hasFilter())
+                    //sort already filters
                     this._filter();
             }
             this.updateSerializedValue();
@@ -249,7 +250,7 @@ class TreeTable {
         this.serializedValue = [];
         if (data && data.length) {
             const first = this.lazy ? 0 : this.first;
-            for (let i = first; i < (first + this.rows); i++) {
+            for (let i = first; i < first + this.rows; i++) {
                 let node = data[i];
                 if (node) {
                     this.serializedValue.push({
@@ -326,7 +327,7 @@ class TreeTable {
     sort(event) {
         let originalEvent = event.originalEvent;
         if (this.sortMode === 'single') {
-            this._sortOrder = (this.sortField === event.field) ? this.sortOrder * -1 : this.defaultSortOrder;
+            this._sortOrder = this.sortField === event.field ? this.sortOrder * -1 : this.defaultSortOrder;
             this._sortField = event.field;
             this.sortSingle();
             if (this.resetPageOnSort && this.scrollable) {
@@ -405,8 +406,8 @@ class TreeTable {
                 else if (typeof value1 === 'string' && typeof value2 === 'string')
                     result = value1.localeCompare(value2, undefined, { numeric: true });
                 else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
-                return (this.sortOrder * result);
+                    result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+                return this.sortOrder * result;
             });
         }
         for (let node of nodes) {
@@ -465,17 +466,17 @@ class TreeTable {
         else if (value1 == null && value2 == null)
             result = 0;
         if (typeof value1 == 'string' || value1 instanceof String) {
-            if (value1.localeCompare && (value1 != value2)) {
-                return (multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
+            if (value1.localeCompare && value1 != value2) {
+                return multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true });
             }
         }
         else {
-            result = (value1 < value2) ? -1 : 1;
+            result = value1 < value2 ? -1 : 1;
         }
         if (value1 == value2) {
-            return (multiSortMeta.length - 1) > (index) ? (this.multisortField(node1, node2, multiSortMeta, index + 1)) : 0;
+            return multiSortMeta.length - 1 > index ? this.multisortField(node1, node2, multiSortMeta, index + 1) : 0;
         }
-        return (multiSortMeta[index].order * result);
+        return multiSortMeta[index].order * result;
     }
     getSortMeta(field) {
         if (this.multiSortMeta && this.multiSortMeta.length) {
@@ -489,7 +490,7 @@ class TreeTable {
     }
     isSorted(field) {
         if (this.sortMode === 'single') {
-            return (this.sortField && this.sortField === field);
+            return this.sortField && this.sortField === field;
         }
         else if (this.sortMode === 'multiple') {
             let sorted = false;
@@ -554,7 +555,7 @@ class TreeTable {
     }
     onColumnResizeBegin(event) {
         let containerLeft = DomHandler.getOffset(this.containerViewChild.nativeElement).left;
-        this.lastResizerHelperX = (event.pageX - containerLeft + this.containerViewChild.nativeElement.scrollLeft);
+        this.lastResizerHelperX = event.pageX - containerLeft + this.containerViewChild.nativeElement.scrollLeft;
         event.preventDefault();
     }
     onColumnResize(event) {
@@ -562,7 +563,7 @@ class TreeTable {
         DomHandler.addClass(this.containerViewChild.nativeElement, 'p-unselectable-text');
         this.resizeHelperViewChild.nativeElement.style.height = this.containerViewChild.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.containerViewChild.nativeElement.scrollLeft + 'px';
         this.resizeHelperViewChild.nativeElement.style.display = 'block';
     }
     onColumnResizeEnd(event, column) {
@@ -669,7 +670,7 @@ class TreeTable {
                 }
             }
             else {
-                throw "Scrollable tables require a colgroup to support resizable columns";
+                throw 'Scrollable tables require a colgroup to support resizable columns';
             }
         }
     }
@@ -691,13 +692,13 @@ class TreeTable {
                 this.reorderIndicatorUpViewChild.nativeElement.style.top = dropHeaderOffset.top - containerOffset.top - (this.reorderIconHeight - 1) + 'px';
                 this.reorderIndicatorDownViewChild.nativeElement.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
                 if (event.pageX > columnCenter) {
-                    this.reorderIndicatorUpViewChild.nativeElement.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.reorderIconWidth / 2)) + 'px';
-                    this.reorderIndicatorDownViewChild.nativeElement.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.reorderIconWidth / 2)) + 'px';
+                    this.reorderIndicatorUpViewChild.nativeElement.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.reorderIconWidth / 2) + 'px';
+                    this.reorderIndicatorDownViewChild.nativeElement.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.reorderIconWidth / 2) + 'px';
                     this.dropPosition = 1;
                 }
                 else {
-                    this.reorderIndicatorUpViewChild.nativeElement.style.left = (targetLeft - Math.ceil(this.reorderIconWidth / 2)) + 'px';
-                    this.reorderIndicatorDownViewChild.nativeElement.style.left = (targetLeft - Math.ceil(this.reorderIconWidth / 2)) + 'px';
+                    this.reorderIndicatorUpViewChild.nativeElement.style.left = targetLeft - Math.ceil(this.reorderIconWidth / 2) + 'px';
+                    this.reorderIndicatorDownViewChild.nativeElement.style.left = targetLeft - Math.ceil(this.reorderIconWidth / 2) + 'px';
                     this.dropPosition = -1;
                 }
                 this.reorderIndicatorUpViewChild.nativeElement.style.display = 'block';
@@ -720,14 +721,14 @@ class TreeTable {
         if (this.draggedColumn) {
             let dragIndex = DomHandler.indexWithinGroup(this.draggedColumn, 'ttreorderablecolumn');
             let dropIndex = DomHandler.indexWithinGroup(dropColumn, 'ttreorderablecolumn');
-            let allowDrop = (dragIndex != dropIndex);
+            let allowDrop = dragIndex != dropIndex;
             if (allowDrop && ((dropIndex - dragIndex == 1 && this.dropPosition === -1) || (dragIndex - dropIndex == 1 && this.dropPosition === 1))) {
                 allowDrop = false;
             }
-            if (allowDrop && ((dropIndex < dragIndex && this.dropPosition === 1))) {
+            if (allowDrop && dropIndex < dragIndex && this.dropPosition === 1) {
                 dropIndex = dropIndex + 1;
             }
-            if (allowDrop && ((dropIndex > dragIndex && this.dropPosition === -1))) {
+            if (allowDrop && dropIndex > dragIndex && this.dropPosition === -1) {
                 dropIndex = dropIndex - 1;
             }
             if (allowDrop) {
@@ -747,7 +748,7 @@ class TreeTable {
     }
     handleRowClick(event) {
         let targetNode = event.originalEvent.target.nodeName;
-        if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || (DomHandler.hasClass(event.originalEvent.target, 'p-clickable'))) {
+        if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || DomHandler.hasClass(event.originalEvent.target, 'p-clickable')) {
             return;
         }
         if (this.selectionMode) {
@@ -931,7 +932,7 @@ class TreeTable {
                     childPartialSelected = true;
             }
             if (select && selectedChildCount == node.children.length) {
-                this._selection = [...this.selection || [], node];
+                this._selection = [...(this.selection || []), node];
                 node.partialSelected = false;
                 if (dataKeyValue) {
                     this.selectionKeys[dataKeyValue] = 1;
@@ -947,7 +948,7 @@ class TreeTable {
                         }
                     }
                 }
-                if (childPartialSelected || selectedChildCount > 0 && selectedChildCount != node.children.length)
+                if (childPartialSelected || (selectedChildCount > 0 && selectedChildCount != node.children.length))
                     node.partialSelected = true;
                 else
                     node.partialSelected = false;
@@ -962,7 +963,7 @@ class TreeTable {
         let index = this.findIndexInSelection(node);
         let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(node.data, this.dataKey)) : null;
         if (select && index == -1) {
-            this._selection = [...this.selection || [], node];
+            this._selection = [...(this.selection || []), node];
             if (dataKeyValue) {
                 this.selectionKeys[dataKeyValue] = 1;
             }
@@ -1013,7 +1014,7 @@ class TreeTable {
         return this.selectionMode === 'multiple';
     }
     equals(node1, node2) {
-        return this.compareSelectionBy === 'equals' ? (node1 === node2) : ObjectUtils.equals(node1.data, node2.data, this.dataKey);
+        return this.compareSelectionBy === 'equals' ? node1 === node2 : ObjectUtils.equals(node1.data, node2.data, this.dataKey);
     }
     filter(value, field, matchMode) {
         if (this.filterTimeout) {
@@ -1187,7 +1188,7 @@ class TreeTable {
             this.onLazyLoad.emit(this.createLazyLoadMetadata());
         }
         else {
-            this.totalRecords = (this._value ? this._value.length : 0);
+            this.totalRecords = this._value ? this._value.length : 0;
         }
     }
     updateEditingCell(cell, data, field) {
@@ -1197,7 +1198,7 @@ class TreeTable {
         this.bindDocumentEditListener();
     }
     isEditingCellValid() {
-        return (this.editingCell && DomHandler.find(this.editingCell, '.ng-invalid.ng-dirty').length === 0);
+        return this.editingCell && DomHandler.find(this.editingCell, '.ng-invalid.ng-dirty').length === 0;
     }
     bindDocumentEditListener() {
         if (!this.documentEditListener) {
@@ -1231,13 +1232,20 @@ class TreeTable {
 }
 TreeTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeTable, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TreeTableService }, { token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
 TreeTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TreeTable, selector: "p-treeTable", inputs: { columns: "columns", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", autoLayout: "autoLayout", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", paginator: "paginator", rows: "rows", first: "first", pageLinks: "pageLinks", rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: "alwaysShowPaginator", paginatorPosition: "paginatorPosition", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: "showCurrentPageReport", showJumpToPageDropdown: "showJumpToPageDropdown", showFirstLastIcon: "showFirstLastIcon", showPageLinks: "showPageLinks", defaultSortOrder: "defaultSortOrder", sortMode: "sortMode", resetPageOnSort: "resetPageOnSort", customSort: "customSort", selectionMode: "selectionMode", contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: "metaKeySelection", compareSelectionBy: "compareSelectionBy", rowHover: "rowHover", loading: "loading", loadingIcon: "loadingIcon", showLoader: "showLoader", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: "virtualScrollDelay", frozenWidth: "frozenWidth", frozenColumns: "frozenColumns", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode", reorderableColumns: "reorderableColumns", contextMenu: "contextMenu", rowTrackBy: "rowTrackBy", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: "filterDelay", filterMode: "filterMode", filterLocale: "filterLocale", virtualRowHeight: "virtualRowHeight", value: "value", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection" }, 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" }, host: { classAttribute: "p-element" }, providers: [TreeTableService], queries: [{ 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 }], 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-hoverable-rows': (rowHover||(selectionMode === 'single' || selectionMode === 'multiple')),
+        <div
+            #container
+            [ngStyle]="style"
+            [class]="styleClass"
+            data-scrollselectors=".p-treetable-scrollable-body"
+            [ngClass]="{
+                'p-treetable p-component': true,
+                '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')}">
+                '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-treetable-loading-overlay p-component-overlay">
                     <i [class]="'p-treetable-loading-icon pi-spin ' + loadingIcon"></i>
@@ -1246,33 +1254,73 @@ TreeTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14
             <div *ngIf="captionTemplate" class="p-treetable-header">
                 <ng-container *ngTemplateOutlet="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" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks"></p-paginator>
+            <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"
+                [templateRight]="paginatorRightTemplate"
+                [dropdownAppendTo]="paginatorDropdownAppendTo"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatorDropdownItemTemplate"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+            ></p-paginator>
 
             <div class="p-treetable-wrapper" *ngIf="!scrollable">
                 <table #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
-                    <ng-container *ngTemplateOutlet="colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <ng-container *ngTemplateOutlet="colGroupTemplate; context: { $implicit: columns }"></ng-container>
                     <thead class="p-treetable-thead">
-                        <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: columns}"></ng-container>
+                        <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: columns }"></ng-container>
                     </thead>
                     <tbody class="p-treetable-tbody" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="bodyTemplate"></tbody>
                     <tfoot class="p-treetable-tfoot">
-                        <ng-container *ngTemplateOutlet="footerTemplate; context {$implicit: columns}"></ng-container>
+                        <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: columns }"></ng-container>
                     </tfoot>
                 </table>
             </div>
 
             <div class="p-treetable-scrollable-wrapper" *ngIf="scrollable">
-               <div class="p-treetable-scrollable-view p-treetable-frozen-view" *ngIf="frozenColumns||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
+                    class="p-treetable-scrollable-view p-treetable-frozen-view"
+                    *ngIf="frozenColumns || 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>
 
-            <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" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks"></p-paginator>
+            <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"
+                [templateRight]="paginatorRightTemplate"
+                [dropdownAppendTo]="paginatorDropdownAppendTo"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatorDropdownItemTemplate"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+            ></p-paginator>
             <div *ngIf="summaryTemplate" class="p-treetable-footer">
                 <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
             </div>
@@ -1286,13 +1334,20 @@ TreeTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeTable, decorators: [{
             type: Component,
             args: [{ selector: 'p-treeTable', template: `
-        <div #container [ngStyle]="style" [class]="styleClass" data-scrollselectors=".p-treetable-scrollable-body"
-                [ngClass]="{'p-treetable p-component': true,
-                'p-treetable-hoverable-rows': (rowHover||(selectionMode === 'single' || selectionMode === 'multiple')),
+        <div
+            #container
+            [ngStyle]="style"
+            [class]="styleClass"
+            data-scrollselectors=".p-treetable-scrollable-body"
+            [ngClass]="{
+                'p-treetable p-component': true,
+                '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')}">
+                '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-treetable-loading-overlay p-component-overlay">
                     <i [class]="'p-treetable-loading-icon pi-spin ' + loadingIcon"></i>
@@ -1301,33 +1356,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             <div *ngIf="captionTemplate" class="p-treetable-header">
                 <ng-container *ngTemplateOutlet="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" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks"></p-paginator>
+            <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"
+                [templateRight]="paginatorRightTemplate"
+                [dropdownAppendTo]="paginatorDropdownAppendTo"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatorDropdownItemTemplate"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+            ></p-paginator>
 
             <div class="p-treetable-wrapper" *ngIf="!scrollable">
                 <table #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
-                    <ng-container *ngTemplateOutlet="colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <ng-container *ngTemplateOutlet="colGroupTemplate; context: { $implicit: columns }"></ng-container>
                     <thead class="p-treetable-thead">
-                        <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: columns}"></ng-container>
+                        <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: columns }"></ng-container>
                     </thead>
                     <tbody class="p-treetable-tbody" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="bodyTemplate"></tbody>
                     <tfoot class="p-treetable-tfoot">
-                        <ng-container *ngTemplateOutlet="footerTemplate; context {$implicit: columns}"></ng-container>
+                        <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: columns }"></ng-container>
                     </tfoot>
                 </table>
             </div>
 
             <div class="p-treetable-scrollable-wrapper" *ngIf="scrollable">
-               <div class="p-treetable-scrollable-view p-treetable-frozen-view" *ngIf="frozenColumns||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
+                    class="p-treetable-scrollable-view p-treetable-frozen-view"
+                    *ngIf="frozenColumns || 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>
 
-            <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" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks"></p-paginator>
+            <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"
+                [templateRight]="paginatorRightTemplate"
+                [dropdownAppendTo]="paginatorDropdownAppendTo"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatorDropdownItemTemplate"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+            ></p-paginator>
             <div *ngIf="summaryTemplate" class="p-treetable-footer">
                 <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
             </div>
@@ -1338,7 +1433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             <span #reorderIndicatorDown class="pi pi-arrow-up p-treetable-reorder-indicator-down" *ngIf="reorderableColumns"></span>
         </div>
     `, providers: [TreeTableService], encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }, styles: [".p-treetable{position:relative}.p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}.p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}.p-treetable .p-sortable-column .p-column-title,.p-treetable .p-sortable-column .p-sortable-column-icon,.p-treetable .p-sortable-column .p-sortable-column-badge{vertical-align:middle}.p-treetable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.p-treetable-auto-layout>.p-treetable-wrapper{overflow-x:auto}.p-treetable-auto-layout>.p-treetable-wrapper>table{table-layout:auto}.p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:pointer}.p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}p-treetabletoggler+p-treetablecheckbox .p-checkbox{vertical-align:middle}p-treetabletoggler+p-treetablecheckbox+span{vertical-align:middle}.p-treetable-scrollable-wrapper{position:relative}.p-treetable-scrollable-header,.p-treetable-scrollable-footer{overflow:hidden}.p-treetable-scrollable-body{overflow:auto;position:relative}.p-treetable-scrollable-body>table>.p-treetable-tbody>tr:first-child>td{border-top:0 none}.p-treetable-virtual-table{position:absolute}.p-treetable-frozen-view .p-treetable-scrollable-body{overflow:hidden}.p-treetable-frozen-view>.p-treetable-scrollable-body>table>.p-treetable-tbody>tr>td:last-child{border-right:0 none}.p-treetable-unfrozen-view{position:absolute;top:0}.p-treetable-flex-scrollable,.p-treetable-flex-scrollable .p-treetable-scrollable-wrapper,.p-treetable-flex-scrollable .p-treetable-scrollable-view{display:flex;flex-direction:column;flex:1;height:100%}.p-treetable-flex-scrollable .p-treetable-virtual-scrollable-body{flex:1}.p-treetable-resizable>.p-treetable-wrapper{overflow-x:auto}.p-treetable-resizable .p-treetable-thead>tr>th,.p-treetable-resizable .p-treetable-tfoot>tr>td,.p-treetable-resizable .p-treetable-tbody>tr>td{overflow:hidden}.p-treetable-resizable .p-resizable-column{background-clip:padding-box;position:relative}.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer{display:none}.p-treetable .p-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.p-treetable .p-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.p-treetable .p-row-editor-init,.p-treetable .p-row-editor-save,.p-treetable .p-row-editor-cancel,.p-treetable .p-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-treetable-reorder-indicator-up,.p-treetable-reorder-indicator-down{position:absolute;display:none}[ttReorderableColumn]{cursor:move}.p-treetable .p-treetable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}.p-treetable .p-scroller-loading{transform:none!important;min-height:0;position:sticky;top:0;left:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TreeTableService }, { type: i1.FilterService }]; }, propDecorators: { columns: [{
                 type: Input
@@ -1551,13 +1646,13 @@ class TTBody {
 }
 TTBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TTBody, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TTBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TTBody, selector: "[pTreeTableBody]", inputs: { columns: ["pTreeTableBody", "columns"], template: ["pTreeTableBodyTemplate", "template"], frozen: "frozen", serializedNodes: "serializedNodes", scrollerOptions: "scrollerOptions" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <ng-template ngFor let-serializedNode let-rowIndex="index" [ngForOf]="serializedNodes||tt.serializedValue" [ngForTrackBy]="tt.rowTrackBy">
+        <ng-template ngFor let-serializedNode let-rowIndex="index" [ngForOf]="serializedNodes || tt.serializedValue" [ngForTrackBy]="tt.rowTrackBy">
             <ng-container *ngIf="serializedNode.visible">
-                <ng-container *ngTemplateOutlet="template; context: {$implicit: serializedNode, node: serializedNode.node, rowData: serializedNode.node.data, columns: columns}"></ng-container>
+                <ng-container *ngTemplateOutlet="template; context: { $implicit: serializedNode, node: serializedNode.node, rowData: serializedNode.node.data, columns: columns }"></ng-container>
             </ng-container>
         </ng-template>
         <ng-container *ngIf="tt.isEmpty()">
-            <ng-container *ngTemplateOutlet="tt.emptyMessageTemplate; context: {$implicit: columns, frozen: frozen}"></ng-container>
+            <ng-container *ngTemplateOutlet="tt.emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TTBody, decorators: [{
@@ -1565,26 +1660,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: '[pTreeTableBody]',
                     template: `
-        <ng-template ngFor let-serializedNode let-rowIndex="index" [ngForOf]="serializedNodes||tt.serializedValue" [ngForTrackBy]="tt.rowTrackBy">
+        <ng-template ngFor let-serializedNode let-rowIndex="index" [ngForOf]="serializedNodes || tt.serializedValue" [ngForTrackBy]="tt.rowTrackBy">
             <ng-container *ngIf="serializedNode.visible">
-                <ng-container *ngTemplateOutlet="template; context: {$implicit: serializedNode, node: serializedNode.node, rowData: serializedNode.node.data, columns: columns}"></ng-container>
+                <ng-container *ngTemplateOutlet="template; context: { $implicit: serializedNode, node: serializedNode.node, rowData: serializedNode.node.data, columns: columns }"></ng-container>
             </ng-container>
         </ng-template>
         <ng-container *ngIf="tt.isEmpty()">
-            <ng-container *ngTemplateOutlet="tt.emptyMessageTemplate; context: {$implicit: columns, frozen: frozen}"></ng-container>
+            <ng-container *ngTemplateOutlet="tt.emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
         </ng-container>
     `,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: TreeTableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
                 type: Input,
-                args: ["pTreeTableBody"]
+                args: ['pTreeTableBody']
             }], template: [{
                 type: Input,
-                args: ["pTreeTableBodyTemplate"]
+                args: ['pTreeTableBodyTemplate']
             }], frozen: [{
                 type: Input
             }], serializedNodes: [{
@@ -1725,35 +1820,45 @@ TTScrollableView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
         <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">
-                    <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate||tt.colGroupTemplate : tt.colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt.colGroupTemplate : tt.colGroupTemplate; context: { $implicit: columns }"></ng-container>
                     <thead class="p-treetable-thead">
-                        <ng-container *ngTemplateOutlet="frozen ? tt.frozenHeaderTemplate||tt.headerTemplate : tt.headerTemplate; context {$implicit: columns}"></ng-container>
+                        <ng-container *ngTemplateOutlet="frozen ? tt.frozenHeaderTemplate || tt.headerTemplate : tt.headerTemplate; context: { $implicit: columns }"></ng-container>
                     </thead>
                 </table>
             </div>
         </div>
 
-        <p-scroller *ngIf="tt.virtualScroll" #scroller [items]="tt.serializedValue" styleClass="p-treetable-scrollable-body" [style]="{'height': tt.scrollHeight !== 'flex' ? tt.scrollHeight : undefined}" [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'" [itemSize]="tt.virtualScrollItemSize||tt._virtualRowHeight"
-            [lazy]="tt.lazy" (onLazyLoad)="tt.onLazyItemLoad($event)" [options]="tt.virtualScrollOptions">
+        <p-scroller
+            *ngIf="tt.virtualScroll"
+            #scroller
+            [items]="tt.serializedValue"
+            styleClass="p-treetable-scrollable-body"
+            [style]="{ height: tt.scrollHeight !== 'flex' ? tt.scrollHeight : undefined }"
+            [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
+            [itemSize]="tt.virtualScrollItemSize || tt._virtualRowHeight"
+            [lazy]="tt.lazy"
+            (onLazyLoad)="tt.onLazyItemLoad($event)"
+            [options]="tt.virtualScrollOptions"
+        >
             <ng-template pTemplate="content" let-items let-scrollerOptions="options">
-                <ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: items, options: scrollerOptions}"></ng-container>
+                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
             </ng-template>
             <ng-container *ngIf="loaderTemplate">
                 <ng-template pTemplate="loader" let-scrollerOptions="options">
-                    <ng-container *ngTemplateOutlet="loaderTemplate; context: {options: scrollerOptions}"></ng-container>
+                    <ng-container *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"></ng-container>
                 </ng-template>
             </ng-container>
         </p-scroller>
         <ng-container *ngIf="!tt.virtualScroll">
-            <div #scrollBody class="p-treetable-scrollable-body" [ngStyle]="{'max-height': tt.scrollHeight !== 'flex' ? scrollHeight : undefined, 'overflow-y': !frozen && tt.scrollHeight ? 'scroll' : undefined}">
-                <ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: serializedValue, options: {}}"></ng-container>
+            <div #scrollBody class="p-treetable-scrollable-body" [ngStyle]="{ 'max-height': tt.scrollHeight !== 'flex' ? scrollHeight : undefined, 'overflow-y': !frozen && tt.scrollHeight ? 'scroll' : undefined }">
+                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: serializedValue, options: {} }"></ng-container>
             </div>
         </ng-container>
 
         <ng-template #buildInItems let-items let-scrollerOptions="options">
             <table #scrollTable [class]="tt.tableStyleClass" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="tt.tableStyle" [style]="scrollerOptions.contentStyle">
-                <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate||tt.colGroupTemplate : tt.colGroupTemplate; context {$implicit: columns}"></ng-container>
-                <tbody class="p-treetable-tbody" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="frozen ? tt.frozenBodyTemplate||tt.bodyTemplate : tt.bodyTemplate" [serializedNodes]="items" [frozen]="frozen"></tbody>
+                <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt.colGroupTemplate : tt.colGroupTemplate; context: { $implicit: columns }"></ng-container>
+                <tbody class="p-treetable-tbody" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="frozen ? tt.frozenBodyTemplate || tt.bodyTemplate : tt.bodyTemplate" [serializedNodes]="items" [frozen]="frozen"></tbody>
             </table>
             <div #scrollableAligner style="background-color:transparent" *ngIf="frozen"></div>
         </ng-template>
@@ -1761,14 +1866,14 @@ TTScrollableView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
         <div #scrollFooter *ngIf="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">
-                    <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate||tt.colGroupTemplate : tt.colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt.colGroupTemplate : tt.colGroupTemplate; context: { $implicit: columns }"></ng-container>
                     <tfoot class="p-treetable-tfoot">
-                        <ng-container *ngTemplateOutlet="frozen ? tt.frozenFooterTemplate||tt.footerTemplate : tt.footerTemplate; context {$implicit: columns}"></ng-container>
+                        <ng-container *ngTemplateOutlet="frozen ? tt.frozenFooterTemplate || tt.footerTemplate : tt.footerTemplate; context: { $implicit: columns }"></ng-container>
                     </tfoot>
                 </table>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Scroller, selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "delay", "resizeDelay", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "component", type: TTBody, selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Scroller, selector: "p-scroller", 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: TTBody, selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TTScrollableView, decorators: [{
             type: Component,
             args: [{
@@ -1777,35 +1882,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
         <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">
-                    <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate||tt.colGroupTemplate : tt.colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt.colGroupTemplate : tt.colGroupTemplate; context: { $implicit: columns }"></ng-container>
                     <thead class="p-treetable-thead">
-                        <ng-container *ngTemplateOutlet="frozen ? tt.frozenHeaderTemplate||tt.headerTemplate : tt.headerTemplate; context {$implicit: columns}"></ng-container>
+                        <ng-container *ngTemplateOutlet="frozen ? tt.frozenHeaderTemplate || tt.headerTemplate : tt.headerTemplate; context: { $implicit: columns }"></ng-container>
                     </thead>
                 </table>
             </div>
         </div>
 
-        <p-scroller *ngIf="tt.virtualScroll" #scroller [items]="tt.serializedValue" styleClass="p-treetable-scrollable-body" [style]="{'height': tt.scrollHeight !== 'flex' ? tt.scrollHeight : undefined}" [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'" [itemSize]="tt.virtualScrollItemSize||tt._virtualRowHeight"
-            [lazy]="tt.lazy" (onLazyLoad)="tt.onLazyItemLoad($event)" [options]="tt.virtualScrollOptions">
+        <p-scroller
+            *ngIf="tt.virtualScroll"
+            #scroller
+            [items]="tt.serializedValue"
+            styleClass="p-treetable-scrollable-body"
+            [style]="{ height: tt.scrollHeight !== 'flex' ? tt.scrollHeight : undefined }"
+            [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
+            [itemSize]="tt.virtualScrollItemSize || tt._virtualRowHeight"
+            [lazy]="tt.lazy"
+            (onLazyLoad)="tt.onLazyItemLoad($event)"
+            [options]="tt.virtualScrollOptions"
+        >
             <ng-template pTemplate="content" let-items let-scrollerOptions="options">
-                <ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: items, options: scrollerOptions}"></ng-container>
+                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
             </ng-template>
             <ng-container *ngIf="loaderTemplate">
                 <ng-template pTemplate="loader" let-scrollerOptions="options">
-                    <ng-container *ngTemplateOutlet="loaderTemplate; context: {options: scrollerOptions}"></ng-container>
+                    <ng-container *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"></ng-container>
                 </ng-template>
             </ng-container>
         </p-scroller>
         <ng-container *ngIf="!tt.virtualScroll">
-            <div #scrollBody class="p-treetable-scrollable-body" [ngStyle]="{'max-height': tt.scrollHeight !== 'flex' ? scrollHeight : undefined, 'overflow-y': !frozen && tt.scrollHeight ? 'scroll' : undefined}">
-                <ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: serializedValue, options: {}}"></ng-container>
+            <div #scrollBody class="p-treetable-scrollable-body" [ngStyle]="{ 'max-height': tt.scrollHeight !== 'flex' ? scrollHeight : undefined, 'overflow-y': !frozen && tt.scrollHeight ? 'scroll' : undefined }">
+                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: serializedValue, options: {} }"></ng-container>
             </div>
         </ng-container>
 
         <ng-template #buildInItems let-items let-scrollerOptions="options">
             <table #scrollTable [class]="tt.tableStyleClass" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="tt.tableStyle" [style]="scrollerOptions.contentStyle">
-                <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate||tt.colGroupTemplate : tt.colGroupTemplate; context {$implicit: columns}"></ng-container>
-                <tbody class="p-treetable-tbody" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="frozen ? tt.frozenBodyTemplate||tt.bodyTemplate : tt.bodyTemplate" [serializedNodes]="items" [frozen]="frozen"></tbody>
+                <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt.colGroupTemplate : tt.colGroupTemplate; context: { $implicit: columns }"></ng-container>
+                <tbody class="p-treetable-tbody" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="frozen ? tt.frozenBodyTemplate || tt.bodyTemplate : tt.bodyTemplate" [serializedNodes]="items" [frozen]="frozen"></tbody>
             </table>
             <div #scrollableAligner style="background-color:transparent" *ngIf="frozen"></div>
         </ng-template>
@@ -1813,9 +1928,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
         <div #scrollFooter *ngIf="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">
-                    <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate||tt.colGroupTemplate : tt.colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt.colGroupTemplate : tt.colGroupTemplate; context: { $implicit: columns }"></ng-container>
                     <tfoot class="p-treetable-tfoot">
-                        <ng-container *ngTemplateOutlet="frozen ? tt.frozenFooterTemplate||tt.footerTemplate : tt.footerTemplate; context {$implicit: columns}"></ng-container>
+                        <ng-container *ngTemplateOutlet="frozen ? tt.frozenFooterTemplate || tt.footerTemplate : tt.footerTemplate; context: { $implicit: columns }"></ng-container>
                     </tfoot>
                 </table>
             </div>
@@ -1823,12 +1938,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
     `,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { columns: [{
                 type: Input,
-                args: ["ttScrollableView"]
+                args: ['ttScrollableView']
             }], frozen: [{
                 type: Input
             }], scrollHeaderViewChild: [{
@@ -1865,7 +1980,7 @@ class TTSortableColumn {
     constructor(tt) {
         this.tt = tt;
         if (this.isEnabled()) {
-            this.subscription = this.tt.tableService.sortSource$.subscribe(sortMeta => {
+            this.subscription = this.tt.tableService.sortSource$.subscribe((sortMeta) => {
                 this.updateSortState();
             });
         }
@@ -1907,7 +2022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: '[ttSortableColumn]',
                     host: {
-                        'class': 'p-element',
+                        class: 'p-element',
                         '[class.p-sortable-column]': 'isEnabled()',
                         '[class.p-highlight]': 'sorted',
                         '[attr.tabindex]': 'isEnabled() ? "0" : null',
@@ -1916,7 +2031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }]; }, propDecorators: { field: [{
                 type: Input,
-                args: ["ttSortableColumn"]
+                args: ['ttSortableColumn']
             }], ttSortableColumnDisabled: [{
                 type: Input
             }], onClick: [{
@@ -1930,7 +2045,7 @@ class TTSortIcon {
     constructor(tt, cd) {
         this.tt = tt;
         this.cd = cd;
-        this.subscription = this.tt.tableService.sortSource$.subscribe(sortMeta => {
+        this.subscription = this.tt.tableService.sortSource$.subscribe((sortMeta) => {
             this.updateSortState();
             this.cd.markForCheck();
         });
@@ -1957,20 +2072,16 @@ class TTSortIcon {
     }
 }
 TTSortIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TTSortIcon, deps: [{ token: TreeTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TTSortIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TTSortIcon, selector: "p-treeTableSortIcon", inputs: { field: "field", ariaLabelDesc: "ariaLabelDesc", ariaLabelAsc: "ariaLabelAsc" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <i class="p-sortable-column-icon pi pi-fw" [ngClass]="{'pi-sort-amount-up-alt': sortOrder === 1, 'pi-sort-amount-down': sortOrder === -1, 'pi-sort-alt': sortOrder === 0}"></i>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TTSortIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TTSortIcon, selector: "p-treeTableSortIcon", inputs: { field: "field", ariaLabelDesc: "ariaLabelDesc", ariaLabelAsc: "ariaLabelAsc" }, host: { classAttribute: "p-element" }, ngImport: i0, template: ` <i class="p-sortable-column-icon pi pi-fw" [ngClass]="{ 'pi-sort-amount-up-alt': sortOrder === 1, 'pi-sort-amount-down': sortOrder === -1, 'pi-sort-alt': sortOrder === 0 }"></i> `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TTSortIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableSortIcon',
-                    template: `
-        <i class="p-sortable-column-icon pi pi-fw" [ngClass]="{'pi-sort-amount-up-alt': sortOrder === 1, 'pi-sort-amount-down': sortOrder === -1, 'pi-sort-alt': sortOrder === 0}"></i>
-    `,
+                    template: ` <i class="p-sortable-column-icon pi pi-fw" [ngClass]="{ 'pi-sort-amount-up-alt': sortOrder === 1, 'pi-sort-amount-down': sortOrder === -1, 'pi-sort-alt': sortOrder === 0 }"></i> `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { field: [{
@@ -2044,7 +2155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: '[ttResizableColumn]',
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { ttResizableColumnDisabled: [{
@@ -2134,7 +2245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: '[ttReorderableColumn]',
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { ttReorderableColumnDisabled: [{
@@ -2192,13 +2303,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: '[ttSelectableRow]',
                     host: {
-                        'class': 'p-element',
+                        class: 'p-element',
                         '[class.p-highlight]': 'selected'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: TreeTableService }]; }, propDecorators: { rowNode: [{
                 type: Input,
-                args: ["ttSelectableRow"]
+                args: ['ttSelectableRow']
             }], ttSelectableRowDisabled: [{
                 type: Input
             }], onClick: [{
@@ -2250,13 +2361,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: '[ttSelectableRowDblClick]',
                     host: {
-                        'class': 'p-element',
+                        class: 'p-element',
                         '[class.p-highlight]': 'selected'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: TreeTableService }]; }, propDecorators: { rowNode: [{
                 type: Input,
-                args: ["ttSelectableRowDblClick"]
+                args: ['ttSelectableRowDblClick']
             }], ttSelectableRowDisabled: [{
                 type: Input
             }], onClick: [{
@@ -2300,14 +2411,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: '[ttContextMenuRow]',
                     host: {
-                        'class': 'p-element',
+                        class: 'p-element',
                         '[class.p-highlight-contextmenu]': 'selected',
                         '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: TreeTableService }, { type: i0.ElementRef }]; }, propDecorators: { rowNode: [{
                 type: Input,
-                args: ["ttContextMenuRow"]
+                args: ['ttContextMenuRow']
             }], ttContextMenuRowDisabled: [{
                 type: Input
             }], onContextMenu: [{
@@ -2350,13 +2461,12 @@ class TTCheckbox {
 }
 TTCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TTCheckbox, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TTCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TTCheckbox, selector: "p-treeTableCheckbox", inputs: { disabled: "disabled", rowNode: ["value", "rowNode"] }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <div class="p-checkbox p-component" [ngClass]="{'p-checkbox-focused':focused}" (click)="onClick($event)">
+        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused }" (click)="onClick($event)">
             <div class="p-hidden-accessible">
-                <input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()">
+                <input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" />
             </div>
-            <div #box [ngClass]="{'p-checkbox-box':true,
-                'p-highlight':checked, 'p-focus':focused, 'p-indeterminate': rowNode.node.partialSelected, 'p-disabled':disabled}"  role="checkbox" [attr.aria-checked]="checked">
-                <span class="p-checkbox-icon pi" [ngClass]="{'pi-check':checked, 'pi-minus': rowNode.node.partialSelected}"></span>
+            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-indeterminate': rowNode.node.partialSelected, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
+                <span class="p-checkbox-icon pi" [ngClass]="{ 'pi-check': checked, 'pi-minus': rowNode.node.partialSelected }"></span>
             </div>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -2365,27 +2475,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: 'p-treeTableCheckbox',
                     template: `
-        <div class="p-checkbox p-component" [ngClass]="{'p-checkbox-focused':focused}" (click)="onClick($event)">
+        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused }" (click)="onClick($event)">
             <div class="p-hidden-accessible">
-                <input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()">
+                <input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" />
             </div>
-            <div #box [ngClass]="{'p-checkbox-box':true,
-                'p-highlight':checked, 'p-focus':focused, 'p-indeterminate': rowNode.node.partialSelected, 'p-disabled':disabled}"  role="checkbox" [attr.aria-checked]="checked">
-                <span class="p-checkbox-icon pi" [ngClass]="{'pi-check':checked, 'pi-minus': rowNode.node.partialSelected}"></span>
+            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-indeterminate': rowNode.node.partialSelected, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
+                <span class="p-checkbox-icon pi" [ngClass]="{ 'pi-check': checked, 'pi-minus': rowNode.node.partialSelected }"></span>
             </div>
         </div>
     `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: TreeTableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
                 type: Input
             }], rowNode: [{
                 type: Input,
-                args: ["value"]
+                args: ['value']
             }] } });
 class TTHeaderCheckbox {
     constructor(tt, tableService, cd) {
@@ -2445,13 +2554,12 @@ class TTHeaderCheckbox {
 }
 TTHeaderCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TTHeaderCheckbox, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TTHeaderCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox", host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "boxViewChild", first: true, predicate: ["box"], descendants: true }], ngImport: i0, template: `
-        <div class="p-checkbox p-component" [ngClass]="{'p-checkbox-focused':focused}" (click)="onClick($event, cb.checked)">
+        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused }" (click)="onClick($event, cb.checked)">
             <div class="p-hidden-accessible">
-                <input #cb type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="!tt.value||tt.value.length === 0">
+                <input #cb type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="!tt.value || tt.value.length === 0" />
             </div>
-            <div #box [ngClass]="{'p-checkbox-box':true,
-                'p-highlight':checked, 'p-focus':focused, 'p-disabled': (!tt.value || tt.value.length === 0)}"  role="checkbox" [attr.aria-checked]="checked">
-                <span class="p-checkbox-icon" [ngClass]="{'pi pi-check':checked}"></span>
+            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': !tt.value || tt.value.length === 0 }" role="checkbox" [attr.aria-checked]="checked">
+                <span class="p-checkbox-icon" [ngClass]="{ 'pi pi-check': checked }"></span>
             </div>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -2460,20 +2568,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: 'p-treeTableHeaderCheckbox',
                     template: `
-        <div class="p-checkbox p-component" [ngClass]="{'p-checkbox-focused':focused}" (click)="onClick($event, cb.checked)">
+        <div class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-focused': focused }" (click)="onClick($event, cb.checked)">
             <div class="p-hidden-accessible">
-                <input #cb type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="!tt.value||tt.value.length === 0">
+                <input #cb type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="!tt.value || tt.value.length === 0" />
             </div>
-            <div #box [ngClass]="{'p-checkbox-box':true,
-                'p-highlight':checked, 'p-focus':focused, 'p-disabled': (!tt.value || tt.value.length === 0)}"  role="checkbox" [attr.aria-checked]="checked">
-                <span class="p-checkbox-icon" [ngClass]="{'pi pi-check':checked}"></span>
+            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-disabled': !tt.value || tt.value.length === 0 }" role="checkbox" [attr.aria-checked]="checked">
+                <span class="p-checkbox-icon" [ngClass]="{ 'pi pi-check': checked }"></span>
             </div>
         </div>
     `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: TreeTableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { boxViewChild: [{
@@ -2634,15 +2741,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: '[ttEditableColumn]',
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
                 type: Input,
-                args: ["ttEditableColumn"]
+                args: ['ttEditableColumn']
             }], field: [{
                 type: Input,
-                args: ["ttEditableColumnField"]
+                args: ['ttEditableColumnField']
             }], ttEditableColumnDisabled: [{
                 type: Input
             }], onClick: [{
@@ -2693,7 +2800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
     `,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: TTEditableColumn }]; }, propDecorators: { templates: [{
@@ -2772,7 +2879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: '[ttRow]',
                     host: {
-                        'class': 'p-element',
+                        class: 'p-element',
                         '[attr.tabindex]': '"0"'
                     }
                 }]
@@ -2808,8 +2915,15 @@ class TreeTableToggler {
 }
 TreeTableToggler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeTableToggler, deps: [{ token: TreeTable }], target: i0.ɵɵFactoryTarget.Component });
 TreeTableToggler.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TreeTableToggler, selector: "p-treeTableToggler", inputs: { rowNode: "rowNode" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <button type="button" class="p-treetable-toggler p-link" (click)="onClick($event)" tabindex="-1" pRipple
-            [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'" [style.marginLeft]="rowNode.level * 16 + 'px'">
+        <button
+            type="button"
+            class="p-treetable-toggler p-link"
+            (click)="onClick($event)"
+            tabindex="-1"
+            pRipple
+            [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'"
+            [style.marginLeft]="rowNode.level * 16 + 'px'"
+        >
             <i [ngClass]="rowNode.node.expanded ? 'pi pi-fw pi-chevron-down' : 'pi pi-fw pi-chevron-right'"></i>
         </button>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.Ripple, selector: "[pRipple]" }], encapsulation: i0.ViewEncapsulation.None });
@@ -2818,14 +2932,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             args: [{
                     selector: 'p-treeTableToggler',
                     template: `
-        <button type="button" class="p-treetable-toggler p-link" (click)="onClick($event)" tabindex="-1" pRipple
-            [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'" [style.marginLeft]="rowNode.level * 16 + 'px'">
+        <button
+            type="button"
+            class="p-treetable-toggler p-link"
+            (click)="onClick($event)"
+            tabindex="-1"
+            pRipple
+            [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'"
+            [style.marginLeft]="rowNode.level * 16 + 'px'"
+        >
             <i [ngClass]="rowNode.node.expanded ? 'pi pi-fw pi-chevron-down' : 'pi pi-fw pi-chevron-right'"></i>
         </button>
     `,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        'class': 'p-element'
+                        class: 'p-element'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }]; }, propDecorators: { rowNode: [{
@@ -2835,13 +2956,48 @@ class TreeTableModule {
 }
 TreeTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 TreeTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: TreeTableModule, declarations: [TreeTable, TreeTableToggler, TTScrollableView, TTBody, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor], imports: [CommonModule, PaginatorModule, RippleModule, ScrollerModule], exports: [TreeTable, SharedModule, TreeTableToggler, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor, ScrollerModule] });
-TreeTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeTableModule, imports: [CommonModule, PaginatorModule, RippleModule, ScrollerModule, SharedModule, ScrollerModule] });
+TreeTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeTableModule, imports: [CommonModule, PaginatorModule, RippleModule, ScrollerModule, SharedModule,
+        ScrollerModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PaginatorModule, RippleModule, ScrollerModule],
-                    exports: [TreeTable, SharedModule, TreeTableToggler, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor, ScrollerModule],
-                    declarations: [TreeTable, TreeTableToggler, TTScrollableView, TTBody, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor]
+                    exports: [
+                        TreeTable,
+                        SharedModule,
+                        TreeTableToggler,
+                        TTSortableColumn,
+                        TTSortIcon,
+                        TTResizableColumn,
+                        TTRow,
+                        TTReorderableColumn,
+                        TTSelectableRow,
+                        TTSelectableRowDblClick,
+                        TTContextMenuRow,
+                        TTCheckbox,
+                        TTHeaderCheckbox,
+                        TTEditableColumn,
+                        TreeTableCellEditor,
+                        ScrollerModule
+                    ],
+                    declarations: [
+                        TreeTable,
+                        TreeTableToggler,
+                        TTScrollableView,
+                        TTBody,
+                        TTSortableColumn,
+                        TTSortIcon,
+                        TTResizableColumn,
+                        TTRow,
+                        TTReorderableColumn,
+                        TTSelectableRow,
+                        TTSelectableRowDblClick,
+                        TTContextMenuRow,
+                        TTCheckbox,
+                        TTHeaderCheckbox,
+                        TTEditableColumn,
+                        TreeTableCellEditor
+                    ]
                 }]
         }] });