primeng 16.4.2 → 16.4.4

package/fesm2022/primeng-treetable.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ViewEncapsulation, Inject, Input, Output, ViewChild, ContentChildren, PLATFORM_ID, Directive, HostListener, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, booleanAttribute, numberAttribute, Component, ViewEncapsulation, Inject, Input, Output, ViewChild, ContentChildren, PLATFORM_ID, Directive, HostListener, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i1 from 'primeng/api';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
@@ -50,10 +50,10 @@ class TreeTableService {
     onTotalRecordsChange(value) {
         this.totalRecordsSource.next(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTableService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTableService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTableService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -222,7 +222,7 @@ class TreeTable {
      * Defines whether metaKey is should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically.
      * @group Props
      */
-    metaKeySelection;
+    metaKeySelection = false;
     /**
      * Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields.
      * @group Props
@@ -421,7 +421,17 @@ class TreeTable {
         this._virtualRowHeight = val;
         console.warn('The virtualRowHeight property is deprecated, use virtualScrollItemSize property instead.');
     }
-    _virtualRowHeight = 28;
+    /**
+     * A map of keys to control the selection state.
+     * @group Props
+     */
+    get selectionKeys() {
+        return this._selectionKeys;
+    }
+    set selectionKeys(value) {
+        this._selectionKeys = value;
+        this.selectionKeysChange.emit(this._selectionKeys);
+    }
     /**
      * Callback to invoke on selected node change.
      * @param {TreeTableNode} object - Node instance.
@@ -442,7 +452,7 @@ class TreeTable {
     onFilter = new EventEmitter();
     /**
      * Callback to invoke when a node is expanded.
-     * @param {TreeTableNode} object - Node instance.
+     * @param {TreeTableNodeExpandEvent} event - Node expand event.
      * @group Emits
      */
     onNodeExpand = new EventEmitter();
@@ -530,6 +540,12 @@ class TreeTable {
      * @group Emits
      */
     onEditCancel = new EventEmitter();
+    /**
+     * Callback to invoke when selectionKeys are changed.
+     * @param {Object} object - updated value of the selectionKeys.
+     * @group Emits
+     */
+    selectionKeysChange = new EventEmitter();
     containerViewChild;
     resizeHelperViewChild;
     reorderIndicatorUpViewChild;
@@ -539,6 +555,8 @@ class TreeTable {
     scrollableFrozenViewChild;
     templates;
     _value = [];
+    _virtualRowHeight = 28;
+    _selectionKeys;
     serializedValue;
     _totalRecords = 0;
     _multiSortMeta;
@@ -578,7 +596,7 @@ class TreeTable {
     dropPosition;
     preventSelectionSetterPropagation;
     _selection;
-    selectionKeys = {};
+    selectedKeys = {};
     rowTouched;
     editingCell;
     editingCellData;
@@ -726,7 +744,7 @@ class TreeTable {
         if (simpleChange.selection) {
             this._selection = simpleChange.selection.currentValue;
             if (!this.preventSelectionSetterPropagation) {
-                this.updateSelectionKeys();
+                this.updateselectedKeys();
                 this.tableService.onSelectionChange();
             }
             this.preventSelectionSetterPropagation = false;
@@ -775,16 +793,16 @@ class TreeTable {
             }
         }
     }
-    updateSelectionKeys() {
+    updateselectedKeys() {
         if (this.dataKey && this._selection) {
-            this.selectionKeys = {};
+            this.selectedKeys = {};
             if (Array.isArray(this._selection)) {
                 for (let node of this._selection) {
-                    this.selectionKeys[String(ObjectUtils.resolveFieldData(node.data, this.dataKey))] = 1;
+                    this.selectedKeys[String(ObjectUtils.resolveFieldData(node.data, this.dataKey))] = 1;
                 }
             }
             else {
-                this.selectionKeys[String(ObjectUtils.resolveFieldData(this._selection.data, this.dataKey))] = 1;
+                this.selectedKeys[String(ObjectUtils.resolveFieldData(this._selection.data, this.dataKey))] = 1;
             }
         }
     }
@@ -1257,7 +1275,7 @@ class TreeTable {
                 if (selected && metaKey) {
                     if (this.isSingleSelectionMode()) {
                         this._selection = null;
-                        this.selectionKeys = {};
+                        this.selectedKeys = {};
                         this.selectionChange.emit(null);
                     }
                     else {
@@ -1265,7 +1283,7 @@ class TreeTable {
                         this._selection = this.selection.filter((val, i) => i != selectionIndex);
                         this.selectionChange.emit(this.selection);
                         if (dataKeyValue) {
-                            delete this.selectionKeys[dataKeyValue];
+                            delete this.selectedKeys[dataKeyValue];
                         }
                     }
                     this.onNodeUnselect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row' });
@@ -1275,8 +1293,8 @@ class TreeTable {
                         this._selection = rowNode.node;
                         this.selectionChange.emit(rowNode.node);
                         if (dataKeyValue) {
-                            this.selectionKeys = {};
-                            this.selectionKeys[dataKeyValue] = 1;
+                            this.selectedKeys = {};
+                            this.selectedKeys[dataKeyValue] = 1;
                         }
                     }
                     else if (this.isMultipleSelectionMode()) {
@@ -1285,12 +1303,12 @@ class TreeTable {
                         }
                         else {
                             this._selection = [];
-                            this.selectionKeys = {};
+                            this.selectedKeys = {};
                         }
                         this._selection = [...this.selection, rowNode.node];
                         this.selectionChange.emit(this.selection);
                         if (dataKeyValue) {
-                            this.selectionKeys[dataKeyValue] = 1;
+                            this.selectedKeys[dataKeyValue] = 1;
                         }
                     }
                     this.onNodeSelect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row', index: event.rowIndex });
@@ -1300,7 +1318,7 @@ class TreeTable {
                 if (this.selectionMode === 'single') {
                     if (selected) {
                         this._selection = null;
-                        this.selectionKeys = {};
+                        this.selectedKeys = {};
                         this.selectionChange.emit(this.selection);
                         this.onNodeUnselect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row' });
                     }
@@ -1309,8 +1327,8 @@ class TreeTable {
                         this.selectionChange.emit(this.selection);
                         this.onNodeSelect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row', index: event.rowIndex });
                         if (dataKeyValue) {
-                            this.selectionKeys = {};
-                            this.selectionKeys[dataKeyValue] = 1;
+                            this.selectedKeys = {};
+                            this.selectedKeys[dataKeyValue] = 1;
                         }
                     }
                 }
@@ -1321,7 +1339,7 @@ class TreeTable {
                         this.selectionChange.emit(this.selection);
                         this.onNodeUnselect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row' });
                         if (dataKeyValue) {
-                            delete this.selectionKeys[dataKeyValue];
+                            delete this.selectedKeys[dataKeyValue];
                         }
                     }
                     else {
@@ -1329,7 +1347,7 @@ class TreeTable {
                         this.selectionChange.emit(this.selection);
                         this.onNodeSelect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row', index: event.rowIndex });
                         if (dataKeyValue) {
-                            this.selectionKeys[dataKeyValue] = 1;
+                            this.selectedKeys[dataKeyValue] = 1;
                         }
                     }
                 }
@@ -1365,7 +1383,7 @@ class TreeTable {
                         this.selectionChange.emit(this.selection);
                     }
                     if (dataKeyValue) {
-                        this.selectionKeys[dataKeyValue] = 1;
+                        this.selectedKeys[dataKeyValue] = 1;
                     }
                 }
                 this.contextMenu.show(event.originalEvent);
@@ -1374,6 +1392,7 @@ class TreeTable {
         }
     }
     toggleNodeWithCheckbox(event) {
+        // legacy selection support, will be removed in v18
         this.selection = this.selection || [];
         this.preventSelectionSetterPropagation = true;
         let node = event.rowNode.node;
@@ -1397,25 +1416,40 @@ class TreeTable {
         this.tableService.onSelectionChange();
     }
     toggleNodesWithCheckbox(event, check) {
+        // legacy selection support, will be removed in v18
         let data = this.filteredNodes || this.value;
         this._selection = check && data ? data.slice() : [];
-        if (check) {
+        this.toggleAll(check);
+        if (!check) {
+            this._selection = [];
+            this.selectedKeys = {};
+        }
+        this.preventSelectionSetterPropagation = true;
+        this.selectionChange.emit(this._selection);
+        this.tableService.onSelectionChange();
+        this.onHeaderCheckboxToggle.emit({ originalEvent: event, checked: check });
+    }
+    toggleAll(checked) {
+        let data = this.filteredNodes || this.value;
+        if (!this.selectionKeys) {
             if (data && data.length) {
                 for (let node of data) {
-                    this.propagateSelectionDown(node, true);
+                    this.propagateSelectionDown(node, checked);
                 }
             }
         }
         else {
-            this._selection = [];
-            this.selectionKeys = {};
+            // legacy selection support, will be removed in v18
+            if (data && data.length) {
+                for (let node of data) {
+                    this.propagateDown(node, checked);
+                }
+                this.selectionKeysChange.emit(this.selectionKeys);
+            }
         }
-        this.preventSelectionSetterPropagation = true;
-        this.selectionChange.emit(this._selection);
-        this.tableService.onSelectionChange();
-        this.onHeaderCheckboxToggle.emit({ originalEvent: event, checked: check });
     }
     propagateSelectionUp(node, select) {
+        // legacy selection support, will be removed in v18
         if (node.children && node.children.length) {
             let selectedChildCount = 0;
             let childPartialSelected = false;
@@ -1430,7 +1464,7 @@ class TreeTable {
                 this._selection = [...(this.selection || []), node];
                 node.partialSelected = false;
                 if (dataKeyValue) {
-                    this.selectionKeys[dataKeyValue] = 1;
+                    this.selectedKeys[dataKeyValue] = 1;
                 }
             }
             else {
@@ -1439,7 +1473,7 @@ class TreeTable {
                     if (index >= 0) {
                         this._selection = this.selection.filter((val, i) => i != index);
                         if (dataKeyValue) {
-                            delete this.selectionKeys[dataKeyValue];
+                            delete this.selectedKeys[dataKeyValue];
                         }
                     }
                 }
@@ -1450,26 +1484,29 @@ class TreeTable {
             }
         }
         let parent = node.parent;
+        node.checked = select;
         if (parent) {
             this.propagateSelectionUp(parent, select);
         }
     }
     propagateSelectionDown(node, select) {
+        // legacy selection support, will be removed in v18
         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];
             if (dataKeyValue) {
-                this.selectionKeys[dataKeyValue] = 1;
+                this.selectedKeys[dataKeyValue] = 1;
             }
         }
         else if (!select && index > -1) {
             this._selection = this.selection.filter((val, i) => i != index);
             if (dataKeyValue) {
-                delete this.selectionKeys[dataKeyValue];
+                delete this.selectedKeys[dataKeyValue];
             }
         }
         node.partialSelected = false;
+        node.checked = select;
         if (node.children && node.children.length) {
             for (let child of node.children) {
                 this.propagateSelectionDown(child, select);
@@ -1477,9 +1514,15 @@ class TreeTable {
         }
     }
     isSelected(node) {
+        // legacy selection support, will be removed in v18
         if (node && this.selection) {
             if (this.dataKey) {
-                return this.selectionKeys[ObjectUtils.resolveFieldData(node.data, this.dataKey)] !== undefined;
+                if (node.hasOwnProperty('checked')) {
+                    return node['checked'];
+                }
+                else {
+                    return this.selectedKeys[ObjectUtils.resolveFieldData(node.data, this.dataKey)] !== undefined;
+                }
             }
             else {
                 if (Array.isArray(this.selection))
@@ -1490,6 +1533,69 @@ class TreeTable {
         }
         return false;
     }
+    isNodeSelected(node) {
+        return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(node)]?.checked === true : false;
+    }
+    isNodePartialSelected(node) {
+        return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(node)]?.partialChecked === true : false;
+    }
+    nodeKey(node) {
+        return ObjectUtils.resolveFieldData(node, this.dataKey) || ObjectUtils.resolveFieldData(node?.data, this.dataKey);
+    }
+    toggleCheckbox(event) {
+        let { rowNode, check, originalEvent } = event;
+        let node = rowNode.node;
+        if (this.selectionKeys) {
+            this.propagateDown(node, check);
+            if (node.parent) {
+                this.propagateUp(node.parent, check);
+            }
+            this.selectionKeysChange.emit(this.selectionKeys);
+        }
+        else {
+            this.toggleNodeWithCheckbox({ originalEvent, rowNode });
+        }
+        this.tableService.onSelectionChange();
+    }
+    propagateDown(node, check) {
+        if (check) {
+            this.selectionKeys[this.nodeKey(node)] = { checked: true, partialChecked: false };
+        }
+        else {
+            delete this.selectionKeys[this.nodeKey(node)];
+        }
+        if (node.children && node.children.length) {
+            for (let child of node.children) {
+                this.propagateDown(child, check);
+            }
+        }
+    }
+    propagateUp(node, check) {
+        let checkedChildCount = 0;
+        let childPartialSelected = false;
+        for (let child of node.children) {
+            if (this.selectionKeys[this.nodeKey(child)] && this.selectionKeys[this.nodeKey(child)].checked)
+                checkedChildCount++;
+            else if (this.selectionKeys[this.nodeKey(child)] && this.selectionKeys[this.nodeKey(child)].partialChecked)
+                childPartialSelected = true;
+        }
+        if (check && checkedChildCount === node.children.length) {
+            this.selectionKeys[this.nodeKey(node)] = { checked: true, partialChecked: false };
+        }
+        else {
+            if (!check) {
+                delete this.selectionKeys[this.nodeKey(node)];
+            }
+            if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== node.children.length))
+                this.selectionKeys[this.nodeKey(node)] = { checked: false, partialChecked: true };
+            else
+                this.selectionKeys[this.nodeKey(node)] = { checked: false, partialChecked: false };
+        }
+        let parent = node.parent;
+        if (parent) {
+            this.propagateUp(parent, check);
+        }
+    }
     findIndexInSelection(node) {
         let index = -1;
         if (this.selection && this.selection.length) {
@@ -1509,7 +1615,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' ? ObjectUtils.equals(node1, node2) : ObjectUtils.equals(node1.data, node2.data, this.dataKey);
     }
     filter(value, field, matchMode) {
         if (this.filterTimeout) {
@@ -1613,6 +1719,7 @@ class TreeTable {
                     this.totalRecords = this.filteredNodes ? this.filteredNodes.length : this.value ? this.value.length : 0;
                 }
             }
+            this.cd.markForCheck();
         }
         this.first = 0;
         const filteredValue = this.filteredNodes || this.value;
@@ -1724,8 +1831,8 @@ class TreeTable {
         this.editingCellData = null;
         this.initialized = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTable, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TreeTableService }, { token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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", paginatorStyleClass: "paginatorStyleClass", 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", paginatorLocale: "paginatorLocale", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", value: "value", virtualRowHeight: "virtualRowHeight" }, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTable, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TreeTableService }, { token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TreeTable, selector: "p-treeTable", 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" }, 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: { 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"
@@ -1794,13 +1901,13 @@ class TreeTable {
             </p-paginator>
 
             <div class="p-treetable-wrapper" *ngIf="!scrollable">
-                <table #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
+                <table role="table" #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
                     <ng-container *ngTemplateOutlet="colGroupTemplate; context: { $implicit: columns }"></ng-container>
-                    <thead class="p-treetable-thead">
+                    <thead role="rowgroup" class="p-treetable-thead">
                         <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">
+                    <tbody class="p-treetable-tbody" role="rowgroup" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="bodyTemplate"></tbody>
+                    <tfoot class="p-treetable-tfoot" role="rowgroup">
                         <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: columns }"></ng-container>
                     </tfoot>
                 </table>
@@ -1873,7 +1980,7 @@ class TreeTable {
         </div>
     `, isInline: true, styles: ["@layer primeng{.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"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return i3.Paginator; }), selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.PrimeTemplate; }), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(function () { return SpinnerIcon; }), selector: "SpinnerIcon" }, { kind: "component", type: i0.forwardRef(function () { return ArrowDownIcon; }), selector: "ArrowDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return ArrowUpIcon; }), selector: "ArrowUpIcon" }, { kind: "component", type: i0.forwardRef(function () { return TTScrollableView; }), selector: "[ttScrollableView]", inputs: ["ttScrollableView", "frozen", "scrollHeight"] }, { kind: "component", type: i0.forwardRef(function () { return TTBody; }), selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTable, decorators: [{
             type: Component,
             args: [{ selector: 'p-treeTable', template: `
         <div
@@ -1944,13 +2051,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             </p-paginator>
 
             <div class="p-treetable-wrapper" *ngIf="!scrollable">
-                <table #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
+                <table role="table" #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
                     <ng-container *ngTemplateOutlet="colGroupTemplate; context: { $implicit: columns }"></ng-container>
-                    <thead class="p-treetable-thead">
+                    <thead role="rowgroup" class="p-treetable-thead">
                         <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">
+                    <tbody class="p-treetable-tbody" role="rowgroup" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="bodyTemplate"></tbody>
+                    <tfoot class="p-treetable-tfoot" role="rowgroup">
                         <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: columns }"></ng-container>
                     </tfoot>
                 </table>
@@ -2038,23 +2145,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], tableStyleClass: [{
                 type: Input
             }], autoLayout: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], lazy: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], lazyLoadOnInit: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], paginator: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], rows: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], first: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], pageLinks: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], rowsPerPageOptions: [{
                 type: Input
             }], alwaysShowPaginator: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], paginatorPosition: [{
                 type: Input
             }], paginatorStyleClass: [{
@@ -2064,21 +2179,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], currentPageReportTemplate: [{
                 type: Input
             }], showCurrentPageReport: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], showJumpToPageDropdown: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], showFirstLastIcon: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], showPageLinks: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], defaultSortOrder: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], sortMode: [{
                 type: Input
             }], resetPageOnSort: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], customSort: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], selectionMode: [{
                 type: Input
             }], contextMenuSelection: [{
@@ -2088,39 +2210,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], dataKey: [{
                 type: Input
             }], metaKeySelection: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], compareSelectionBy: [{
                 type: Input
             }], rowHover: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], loading: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], loadingIcon: [{
                 type: Input
             }], showLoader: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], scrollable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], scrollHeight: [{
                 type: Input
             }], virtualScroll: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], virtualScrollItemSize: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], virtualScrollOptions: [{
                 type: Input
             }], virtualScrollDelay: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], frozenWidth: [{
                 type: Input
             }], frozenColumns: [{
                 type: Input
             }], resizableColumns: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], columnResizeMode: [{
                 type: Input
             }], reorderableColumns: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], contextMenu: [{
                 type: Input
             }], rowTrackBy: [{
@@ -2130,7 +2262,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], globalFilterFields: [{
                 type: Input
             }], filterDelay: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], filterMode: [{
                 type: Input
             }], filterLocale: [{
@@ -2151,6 +2284,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], virtualRowHeight: [{
                 type: Input
+            }], selectionKeys: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], contextMenuSelectionChange: [{
@@ -2187,6 +2322,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Output
             }], onEditCancel: [{
                 type: Output
+            }], selectionKeysChange: [{
+                type: Output
             }], containerViewChild: [{
                 type: ViewChild,
                 args: ['container']
@@ -2248,8 +2385,8 @@ class TTBody {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTBody, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: TTBody, selector: "[pTreeTableBody]", inputs: { columns: ["pTreeTableBody", "columns"], template: ["pTreeTableBodyTemplate", "template"], frozen: "frozen", serializedNodes: "serializedNodes", scrollerOptions: "scrollerOptions" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTBody, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TTBody, selector: "[pTreeTableBody]", inputs: { columns: ["pTreeTableBody", "columns"], template: ["pTreeTableBodyTemplate", "template"], frozen: ["frozen", "frozen", booleanAttribute], 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-container *ngIf="serializedNode.visible">
                 <ng-container *ngTemplateOutlet="template; context: { $implicit: serializedNode, node: serializedNode.node, rowData: serializedNode.node.data, columns: columns }"></ng-container>
@@ -2260,7 +2397,7 @@ class TTBody {
         </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: "16.0.2", ngImport: i0, type: TTBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTBody, decorators: [{
             type: Component,
             args: [{
                     selector: '[pTreeTableBody]',
@@ -2286,7 +2423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input,
                 args: ['pTreeTableBodyTemplate']
             }], frozen: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], serializedNodes: [{
                 type: Input
             }], scrollerOptions: [{
@@ -2333,29 +2471,31 @@ class TTScrollableView {
         this.zone = zone;
     }
     ngAfterViewInit() {
-        if (!this.frozen) {
-            if (this.tt.frozenColumns || this.tt.frozenBodyTemplate) {
-                DomHandler.addClass(this.el.nativeElement, 'p-treetable-unfrozen-view');
-            }
-            let frozenView = this.el.nativeElement.previousElementSibling;
-            if (frozenView) {
-                if (this.tt.virtualScroll)
-                    this.frozenSiblingBody = DomHandler.findSingle(frozenView, '.p-scroller-viewport');
-                else
-                    this.frozenSiblingBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
-            }
-            let scrollBarWidth = DomHandler.calculateScrollbarWidth();
-            this.scrollHeaderBoxViewChild.nativeElement.style.paddingRight = scrollBarWidth + 'px';
-            if (this.scrollFooterBoxViewChild && this.scrollFooterBoxViewChild.nativeElement) {
-                this.scrollFooterBoxViewChild.nativeElement.style.paddingRight = scrollBarWidth + 'px';
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this.frozen) {
+                if (this.tt.frozenColumns || this.tt.frozenBodyTemplate) {
+                    DomHandler.addClass(this.el.nativeElement, 'p-treetable-unfrozen-view');
+                }
+                let frozenView = this.el.nativeElement.previousElementSibling;
+                if (frozenView) {
+                    if (this.tt.virtualScroll)
+                        this.frozenSiblingBody = DomHandler.findSingle(frozenView, '.p-scroller-viewport');
+                    else
+                        this.frozenSiblingBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
+                }
+                let scrollBarWidth = DomHandler.calculateScrollbarWidth();
+                this.scrollHeaderBoxViewChild.nativeElement.style.paddingRight = scrollBarWidth + 'px';
+                if (this.scrollFooterBoxViewChild && this.scrollFooterBoxViewChild.nativeElement) {
+                    this.scrollFooterBoxViewChild.nativeElement.style.paddingRight = scrollBarWidth + 'px';
+                }
             }
-        }
-        else {
-            if (this.scrollableAlignerViewChild && this.scrollableAlignerViewChild.nativeElement) {
-                this.scrollableAlignerViewChild.nativeElement.style.height = DomHandler.calculateScrollbarHeight() + 'px';
+            else {
+                if (this.scrollableAlignerViewChild && this.scrollableAlignerViewChild.nativeElement) {
+                    this.scrollableAlignerViewChild.nativeElement.style.height = DomHandler.calculateScrollbarHeight() + 'px';
+                }
             }
+            this.bindEvents();
         }
-        this.bindEvents();
     }
     bindEvents() {
         if (isPlatformBrowser(this.platformId)) {
@@ -2459,13 +2599,13 @@ class TTScrollableView {
         this.unbindEvents();
         this.frozenSiblingBody = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", 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: "14.0.0", version: "16.0.2", type: TTScrollableView, selector: "[ttScrollableView]", inputs: { columns: ["ttScrollableView", "columns"], frozen: "frozen", scrollHeight: "scrollHeight" }, host: { classAttribute: "p-element" }, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", 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: "14.0.0", version: "16.2.0", type: TTScrollableView, selector: "[ttScrollableView]", inputs: { columns: ["ttScrollableView", "columns"], frozen: ["frozen", "frozen", booleanAttribute], scrollHeight: "scrollHeight" }, host: { classAttribute: "p-element" }, 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">
                     <ng-container *ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt.colGroupTemplate : tt.colGroupTemplate; context: { $implicit: columns }"></ng-container>
-                    <thead class="p-treetable-thead">
+                    <thead role="rowgroup" class="p-treetable-thead">
                         <ng-container *ngTemplateOutlet="frozen ? tt.frozenHeaderTemplate || tt.headerTemplate : tt.headerTemplate; context: { $implicit: columns }"></ng-container>
                     </thead>
                 </table>
@@ -2500,9 +2640,9 @@ class TTScrollableView {
         </ng-container>
 
         <ng-template #buildInItems let-items let-scrollerOptions="options">
-            <table #scrollTable [class]="tt.tableStyleClass" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="tt.tableStyle" [style]="scrollerOptions.contentStyle">
+            <table role="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>
+                <tbody role="rowgroup" 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>
@@ -2511,7 +2651,7 @@ class TTScrollableView {
             <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>
-                    <tfoot class="p-treetable-tfoot">
+                    <tfoot role="rowgroup" class="p-treetable-tfoot">
                         <ng-container *ngTemplateOutlet="frozen ? tt.frozenFooterTemplate || tt.footerTemplate : tt.footerTemplate; context: { $implicit: columns }"></ng-container>
                     </tfoot>
                 </table>
@@ -2519,7 +2659,7 @@ class TTScrollableView {
         </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", "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: "16.0.2", ngImport: i0, type: TTScrollableView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTScrollableView, decorators: [{
             type: Component,
             args: [{
                     selector: '[ttScrollableView]',
@@ -2528,7 +2668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             <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>
-                    <thead class="p-treetable-thead">
+                    <thead role="rowgroup" class="p-treetable-thead">
                         <ng-container *ngTemplateOutlet="frozen ? tt.frozenHeaderTemplate || tt.headerTemplate : tt.headerTemplate; context: { $implicit: columns }"></ng-container>
                     </thead>
                 </table>
@@ -2563,9 +2703,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
         </ng-container>
 
         <ng-template #buildInItems let-items let-scrollerOptions="options">
-            <table #scrollTable [class]="tt.tableStyleClass" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="tt.tableStyle" [style]="scrollerOptions.contentStyle">
+            <table role="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>
+                <tbody role="rowgroup" 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>
@@ -2574,7 +2714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             <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>
-                    <tfoot class="p-treetable-tfoot">
+                    <tfoot role="rowgroup" class="p-treetable-tfoot">
                         <ng-container *ngTemplateOutlet="frozen ? tt.frozenFooterTemplate || tt.footerTemplate : tt.footerTemplate; context: { $implicit: columns }"></ng-container>
                     </tfoot>
                 </table>
@@ -2593,7 +2733,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input,
                 args: ['ttScrollableView']
             }], frozen: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], scrollHeaderViewChild: [{
                 type: ViewChild,
                 args: ['scrollHeader']
@@ -2630,6 +2771,14 @@ class TTSortableColumn {
     ttSortableColumnDisabled;
     sorted;
     subscription;
+    get ariaSorted() {
+        if (this.sorted && this.tt.sortOrder < 0)
+            return 'descending';
+        else if (this.sorted && this.tt.sortOrder > 0)
+            return 'ascending';
+        else
+            return 'none';
+    }
     constructor(tt) {
         this.tt = tt;
         if (this.isEnabled()) {
@@ -2667,10 +2816,10 @@ class TTSortableColumn {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTSortableColumn, deps: [{ token: TreeTable }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: TTSortableColumn, selector: "[ttSortableColumn]", inputs: { field: ["ttSortableColumn", "field"], ttSortableColumnDisabled: "ttSortableColumnDisabled" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class.p-sortable-column": "isEnabled()", "class.p-highlight": "sorted", "attr.tabindex": "isEnabled() ? \"0\" : null", "attr.role": "\"columnheader\"" }, classAttribute: "p-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTSortableColumn, deps: [{ token: TreeTable }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: TTSortableColumn, 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-highlight": "sorted", "attr.tabindex": "isEnabled() ? \"0\" : null", "attr.role": "\"columnheader\"", "attr.aria-sort": "ariaSorted" }, classAttribute: "p-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTSortableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTSortableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttSortableColumn]',
@@ -2679,14 +2828,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         '[class.p-sortable-column]': 'isEnabled()',
                         '[class.p-highlight]': 'sorted',
                         '[attr.tabindex]': 'isEnabled() ? "0" : null',
-                        '[attr.role]': '"columnheader"'
+                        '[attr.role]': '"columnheader"',
+                        '[attr.aria-sort]': 'ariaSorted'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }]; }, propDecorators: { field: [{
                 type: Input,
                 args: ['ttSortableColumn']
             }], ttSortableColumnDisabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -2730,8 +2881,8 @@ class TTSortIcon {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTSortIcon, deps: [{ token: TreeTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: TTSortIcon, selector: "p-treeTableSortIcon", inputs: { field: "field", ariaLabelDesc: "ariaLabelDesc", ariaLabelAsc: "ariaLabelAsc" }, host: { classAttribute: "p-element" }, ngImport: i0, template: ` <ng-container *ngIf="!tt.sortIconTemplate">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTSortIcon, deps: [{ token: TreeTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TTSortIcon, selector: "p-treeTableSortIcon", inputs: { field: "field", ariaLabelDesc: "ariaLabelDesc", ariaLabelAsc: "ariaLabelAsc" }, host: { classAttribute: "p-element" }, ngImport: i0, template: ` <ng-container *ngIf="!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" />
@@ -2740,7 +2891,7 @@ class TTSortIcon {
             <ng-template *ngTemplateOutlet="tt.sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
         </span>`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(function () { return SortAltIcon; }), selector: "SortAltIcon" }, { kind: "component", type: i0.forwardRef(function () { return SortAmountUpAltIcon; }), selector: "SortAmountUpAltIcon" }, { kind: "component", type: i0.forwardRef(function () { return SortAmountDownIcon; }), selector: "SortAmountDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTSortIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTSortIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableSortIcon',
@@ -2835,10 +2986,10 @@ class TTResizableColumn {
         }
         this.unbindDocumentEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", 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: "14.0.0", version: "16.0.2", type: TTResizableColumn, selector: "[ttResizableColumn]", inputs: { ttResizableColumnDisabled: "ttResizableColumnDisabled" }, host: { classAttribute: "p-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", 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: "14.0.0", version: "16.2.0", type: TTResizableColumn, selector: "[ttResizableColumn]", inputs: { ttResizableColumnDisabled: ["ttResizableColumnDisabled", "ttResizableColumnDisabled", booleanAttribute] }, host: { classAttribute: "p-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTResizableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTResizableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttResizableColumn]',
@@ -2853,7 +3004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }, { type: i0.Renderer2 }, { type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { ttResizableColumnDisabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 class TTReorderableColumn {
     document;
@@ -2941,10 +3093,10 @@ class TTReorderableColumn {
     ngOnDestroy() {
         this.unbindEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", 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: "14.0.0", version: "16.0.2", type: TTReorderableColumn, selector: "[ttReorderableColumn]", inputs: { ttReorderableColumnDisabled: "ttReorderableColumnDisabled" }, host: { listeners: { "drop": "onDrop($event)" }, classAttribute: "p-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", 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: "14.0.0", version: "16.2.0", type: TTReorderableColumn, selector: "[ttReorderableColumn]", inputs: { ttReorderableColumnDisabled: ["ttReorderableColumnDisabled", "ttReorderableColumnDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" }, classAttribute: "p-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTReorderableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTReorderableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttReorderableColumn]',
@@ -2959,7 +3111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }, { type: i0.Renderer2 }, { type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { ttReorderableColumnDisabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], onDrop: [{
                 type: HostListener,
                 args: ['drop', ['$event']]
@@ -2993,9 +3146,14 @@ class TTSelectableRow {
             });
         }
     }
-    onEnterKey(event) {
-        if (event.which === 13) {
-            this.onClick(event);
+    onKeyDown(event) {
+        switch (event.code) {
+            case 'Enter':
+            case 'Space':
+                this.onEnterKey(event);
+                break;
+            default:
+                break;
         }
     }
     onTouchEnd(event) {
@@ -3003,6 +3161,18 @@ class TTSelectableRow {
             this.tt.handleRowTouchEnd(event);
         }
     }
+    onEnterKey(event) {
+        if (this.tt.selectionMode === 'checkbox') {
+            this.tt.toggleNodeWithCheckbox({
+                originalEvent: event,
+                rowNode: this.rowNode
+            });
+        }
+        else {
+            this.onClick(event);
+        }
+        event.preventDefault();
+    }
     isEnabled() {
         return this.ttSelectableRowDisabled !== true;
     }
@@ -3011,27 +3181,30 @@ class TTSelectableRow {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTSelectableRow, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: TTSelectableRow, selector: "[ttSelectableRow]", inputs: { rowNode: ["ttSelectableRow", "rowNode"], ttSelectableRowDisabled: "ttSelectableRowDisabled" }, host: { listeners: { "click": "onClick($event)", "keydown": "onEnterKey($event)", "touchend": "onTouchEnd($event)" }, properties: { "class.p-highlight": "selected" }, classAttribute: "p-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTSelectableRow, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: TTSelectableRow, selector: "[ttSelectableRow]", inputs: { rowNode: ["ttSelectableRow", "rowNode"], ttSelectableRowDisabled: ["ttSelectableRowDisabled", "ttSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "touchend": "onTouchEnd($event)" }, properties: { "class.p-highlight": "selected", "attr.data-p-highlight": "selected", "attr.aria-checked": "selected" }, classAttribute: "p-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTSelectableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTSelectableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttSelectableRow]',
                     host: {
                         class: 'p-element',
-                        '[class.p-highlight]': 'selected'
+                        '[class.p-highlight]': 'selected',
+                        '[attr.data-p-highlight]': 'selected',
+                        '[attr.aria-checked]': 'selected'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: TreeTableService }]; }, propDecorators: { rowNode: [{
                 type: Input,
                 args: ['ttSelectableRow']
             }], ttSelectableRowDisabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
-            }], onEnterKey: [{
+            }], onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], onTouchEnd: [{
@@ -3075,10 +3248,10 @@ class TTSelectableRowDblClick {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTSelectableRowDblClick, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: TTSelectableRowDblClick, selector: "[ttSelectableRowDblClick]", inputs: { rowNode: ["ttSelectableRowDblClick", "rowNode"], ttSelectableRowDisabled: "ttSelectableRowDisabled" }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class.p-highlight": "selected" }, classAttribute: "p-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTSelectableRowDblClick, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: TTSelectableRowDblClick, selector: "[ttSelectableRowDblClick]", inputs: { rowNode: ["ttSelectableRowDblClick", "rowNode"], ttSelectableRowDisabled: ["ttSelectableRowDisabled", "ttSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class.p-highlight": "selected" }, classAttribute: "p-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTSelectableRowDblClick, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTSelectableRowDblClick, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttSelectableRowDblClick]',
@@ -3091,7 +3264,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input,
                 args: ['ttSelectableRowDblClick']
             }], ttSelectableRowDisabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], onClick: [{
                 type: HostListener,
                 args: ['dblclick', ['$event']]
@@ -3132,10 +3306,10 @@ class TTContextMenuRow {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTContextMenuRow, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: TTContextMenuRow, selector: "[ttContextMenuRow]", inputs: { rowNode: ["ttContextMenuRow", "rowNode"], ttContextMenuRowDisabled: "ttContextMenuRowDisabled" }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class.p-highlight-contextmenu": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" }, classAttribute: "p-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTContextMenuRow, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: TTContextMenuRow, selector: "[ttContextMenuRow]", inputs: { rowNode: ["ttContextMenuRow", "rowNode"], ttContextMenuRowDisabled: ["ttContextMenuRowDisabled", "ttContextMenuRowDisabled", booleanAttribute] }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class.p-highlight-contextmenu": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" }, classAttribute: "p-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTContextMenuRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTContextMenuRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttContextMenuRow]',
@@ -3149,7 +3323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input,
                 args: ['ttContextMenuRow']
             }], ttContextMenuRowDisabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], onContextMenu: [{
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
@@ -3161,6 +3336,7 @@ class TTCheckbox {
     disabled;
     rowNode;
     checked;
+    partialChecked;
     focused;
     subscription;
     constructor(tt, tableService, cd) {
@@ -3168,19 +3344,44 @@ class TTCheckbox {
         this.tableService = tableService;
         this.cd = cd;
         this.subscription = this.tt.tableService.selectionSource$.subscribe(() => {
-            this.checked = this.tt.isSelected(this.rowNode.node);
+            if (this.tt.selectionKeys) {
+                this.checked = this.tt.isNodeSelected(this.rowNode.node);
+                this.partialChecked = this.tt.isNodePartialSelected(this.rowNode.node);
+            }
+            else {
+                this.checked = this.tt.isSelected(this.rowNode.node);
+                this.partialChecked = this.rowNode.node.partialSelected;
+            }
             this.cd.markForCheck();
         });
     }
     ngOnInit() {
-        this.checked = this.tt.isSelected(this.rowNode.node);
+        if (this.tt.selectionKeys) {
+            this.checked = this.tt.isNodeSelected(this.rowNode.node);
+            this.partialChecked = this.tt.isNodePartialSelected(this.rowNode.node);
+        }
+        else {
+            // for backward compatibility
+            this.checked = this.tt.isSelected(this.rowNode.node);
+            this.partialChecked = this.rowNode.node.partialSelected;
+        }
     }
     onClick(event) {
         if (!this.disabled) {
-            this.tt.toggleNodeWithCheckbox({
-                originalEvent: event,
-                rowNode: this.rowNode
-            });
+            if (this.tt.selectionKeys) {
+                const _check = !this.checked;
+                this.tt.toggleCheckbox({
+                    originalEvent: event,
+                    check: _check,
+                    rowNode: this.rowNode
+                });
+            }
+            else {
+                this.tt.toggleNodeWithCheckbox({
+                    originalEvent: event,
+                    rowNode: this.rowNode
+                });
+            }
         }
         DomHandler.clearSelection();
     }
@@ -3195,40 +3396,40 @@ class TTCheckbox {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTCheckbox, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: TTCheckbox, selector: "p-treeTableCheckbox", inputs: { disabled: "disabled", rowNode: ["value", "rowNode"] }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTCheckbox, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TTCheckbox, selector: "p-treeTableCheckbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], 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-hidden-accessible">
-                <input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" />
+                <input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" tabindex="-1" />
             </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">
+            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-indeterminate': partialChecked, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
                 <ng-container *ngIf="!tt.checkboxIconTemplate">
                     <CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="checked" />
-                    <MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="rowNode.node.partialSelected" />
+                    <MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="partialChecked" />
                 </ng-container>
                 <span *ngIf="tt.checkboxIconTemplate">
-                    <ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected: rowNode.node.partialSelected }"></ng-template>
+                    <ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected: partialChecked }"></ng-template>
                 </span>
             </div>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(function () { return CheckIcon; }), selector: "CheckIcon" }, { kind: "component", type: i0.forwardRef(function () { return MinusIcon; }), selector: "MinusIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableCheckbox',
                     template: `
         <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()" tabindex="-1" />
             </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">
+            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-indeterminate': partialChecked, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
                 <ng-container *ngIf="!tt.checkboxIconTemplate">
                     <CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="checked" />
-                    <MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="rowNode.node.partialSelected" />
+                    <MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="partialChecked" />
                 </ng-container>
                 <span *ngIf="tt.checkboxIconTemplate">
-                    <ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected: rowNode.node.partialSelected }"></ng-template>
+                    <ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected: partialChecked }"></ng-template>
                 </span>
             </div>
         </div>
@@ -3240,7 +3441,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: TreeTableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], rowNode: [{
                 type: Input,
                 args: ['value']
@@ -3270,7 +3472,7 @@ class TTHeaderCheckbox {
         this.checked = this.updateCheckedState();
     }
     onClick(event, checked) {
-        if (this.tt.value && this.tt.value.length > 0) {
+        if ((this.tt.value || this.tt.filteredNodes) && (this.tt.value.length > 0 || this.tt.filteredNodes.length > 0)) {
             this.tt.toggleNodesWithCheckbox(event, !checked);
         }
         DomHandler.clearSelection();
@@ -3294,13 +3496,27 @@ class TTHeaderCheckbox {
         let checked;
         const data = this.tt.filteredNodes || this.tt.value;
         if (data) {
-            for (let node of data) {
-                if (this.tt.isSelected(node)) {
-                    checked = true;
+            if (this.tt.selectionKeys) {
+                for (let node of data) {
+                    if (this.tt.isNodeSelected(node)) {
+                        checked = true;
+                    }
+                    else {
+                        checked = false;
+                        break;
+                    }
                 }
-                else {
-                    checked = false;
-                    break;
+            }
+            if (!this.tt.selectionKeys) {
+                // legacy selection support, will be removed in v18
+                for (let node of data) {
+                    if (this.tt.isSelected(node)) {
+                        checked = true;
+                    }
+                    else {
+                        checked = false;
+                        break;
+                    }
                 }
             }
         }
@@ -3309,8 +3525,8 @@ class TTHeaderCheckbox {
         }
         return checked;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", 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: "16.0.2", type: TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox", host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "boxViewChild", first: true, predicate: ["box"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", 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: "16.2.0", 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-hidden-accessible">
                 <input #cb type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="!tt.value || tt.value.length === 0" />
@@ -3326,7 +3542,7 @@ class TTHeaderCheckbox {
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(function () { return CheckIcon; }), selector: "CheckIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTHeaderCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTHeaderCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableHeaderCheckbox',
@@ -3507,10 +3723,10 @@ class TTEditableColumn {
     isEnabled() {
         return this.ttEditableColumnDisabled !== true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTEditableColumn, deps: [{ token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: TTEditableColumn, selector: "[ttEditableColumn]", inputs: { data: ["ttEditableColumn", "data"], field: ["ttEditableColumnField", "field"], ttEditableColumnDisabled: "ttEditableColumnDisabled" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" }, classAttribute: "p-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTEditableColumn, deps: [{ token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: TTEditableColumn, selector: "[ttEditableColumn]", inputs: { data: ["ttEditableColumn", "data"], field: ["ttEditableColumnField", "field"], ttEditableColumnDisabled: ["ttEditableColumnDisabled", "ttEditableColumnDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" }, classAttribute: "p-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTEditableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTEditableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttEditableColumn]',
@@ -3525,7 +3741,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input,
                 args: ['ttEditableColumnField']
             }], ttEditableColumnDisabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -3555,8 +3772,8 @@ class TreeTableCellEditor {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTableCellEditor, deps: [{ token: TreeTable }, { token: TTEditableColumn }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: TreeTableCellEditor, selector: "p-treeTableCellEditor", host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTableCellEditor, deps: [{ token: TreeTable }, { token: TTEditableColumn }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TreeTableCellEditor, selector: "p-treeTableCellEditor", host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
         <ng-container *ngIf="tt.editingCell === editableColumn.el.nativeElement">
             <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
         </ng-container>
@@ -3565,7 +3782,7 @@ class TreeTableCellEditor {
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTableCellEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTableCellEditor, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableCellEditor',
@@ -3590,6 +3807,15 @@ class TTRow {
     tt;
     el;
     zone;
+    get level() {
+        return this.rowNode?.['level'] + 1;
+    }
+    get styleClass() {
+        return this.rowNode?.node['styleClass'] || '';
+    }
+    get expanded() {
+        return this.rowNode?.node['expanded'];
+    }
     rowNode;
     constructor(tt, el, zone) {
         this.tt = tt;
@@ -3597,73 +3823,150 @@ class TTRow {
         this.zone = zone;
     }
     onKeyDown(event) {
-        switch (event.which) {
-            //down arrow
-            case 40:
-                let nextRow = this.el.nativeElement.nextElementSibling;
-                if (nextRow) {
-                    nextRow.focus();
-                }
-                event.preventDefault();
+        switch (event.code) {
+            case 'ArrowDown':
+                this.onArrowDownKey(event);
                 break;
-            //down arrow
-            case 38:
-                let prevRow = this.el.nativeElement.previousElementSibling;
-                if (prevRow) {
-                    prevRow.focus();
-                }
-                event.preventDefault();
+            case 'ArrowUp':
+                this.onArrowUpKey(event);
                 break;
-            //left arrow
-            case 37:
-                if (this.rowNode.node.expanded) {
-                    this.tt.toggleRowIndex = DomHandler.index(this.el.nativeElement);
-                    this.rowNode.node.expanded = false;
-                    this.tt.onNodeCollapse.emit({
-                        originalEvent: event,
-                        node: this.rowNode.node
-                    });
-                    this.tt.updateSerializedValue();
-                    this.tt.tableService.onUIUpdate(this.tt.value);
-                    this.restoreFocus();
-                }
+            case 'ArrowRight':
+                this.onArrowRightKey(event);
                 break;
-            //right arrow
-            case 39:
-                if (!this.rowNode.node.expanded) {
-                    this.tt.toggleRowIndex = DomHandler.index(this.el.nativeElement);
-                    this.rowNode.node.expanded = true;
-                    this.tt.onNodeExpand.emit({
-                        originalEvent: event,
-                        node: this.rowNode.node
-                    });
-                    this.tt.updateSerializedValue();
-                    this.tt.tableService.onUIUpdate(this.tt.value);
-                    this.restoreFocus();
-                }
+            case 'ArrowLeft':
+                this.onArrowLeftKey(event);
+                break;
+            case 'Tab':
+                this.onTabKey(event);
+                break;
+            case 'Home':
+                this.onHomeKey(event);
+                break;
+            case 'End':
+                this.onEndKey(event);
+                break;
+            default:
                 break;
         }
     }
-    restoreFocus() {
+    onArrowDownKey(event) {
+        let nextRow = this.el?.nativeElement?.nextElementSibling;
+        if (nextRow) {
+            this.focusRowChange(event.currentTarget, nextRow);
+        }
+        event.preventDefault();
+    }
+    onArrowUpKey(event) {
+        let prevRow = this.el?.nativeElement?.previousElementSibling;
+        if (prevRow) {
+            this.focusRowChange(event.currentTarget, prevRow);
+        }
+        event.preventDefault();
+    }
+    onArrowRightKey(event) {
+        const currentTarget = event.currentTarget;
+        const isHiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
+        if (!isHiddenIcon && !this.expanded && this.rowNode.node['children']) {
+            this.expand(event);
+            currentTarget.tabIndex = -1;
+        }
+        event.preventDefault();
+    }
+    onArrowLeftKey(event) {
+        const container = this.tt.containerViewChild?.nativeElement;
+        const expandedRows = DomHandler.find(container, '[aria-expanded="true"]');
+        const lastExpandedRow = expandedRows[expandedRows.length - 1];
+        if (this.expanded) {
+            this.collapse(event);
+        }
+        if (lastExpandedRow) {
+            this.tt.toggleRowIndex = DomHandler.index(lastExpandedRow);
+        }
+        this.restoreFocus();
+        event.preventDefault();
+    }
+    onHomeKey(event) {
+        const firstElement = DomHandler.findSingle(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`);
+        firstElement && DomHandler.focus(firstElement);
+        event.preventDefault();
+    }
+    onEndKey(event) {
+        const nodes = DomHandler.find(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`);
+        const lastElement = nodes[nodes.length - 1];
+        DomHandler.focus(lastElement);
+        event.preventDefault();
+    }
+    onTabKey(event) {
+        const rows = this.el.nativeElement ? [...DomHandler.find(this.el.nativeElement.parentNode, 'tr')] : undefined;
+        if (rows && ObjectUtils.isNotEmpty(rows)) {
+            const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true');
+            rows.forEach((row) => {
+                row.tabIndex = -1;
+            });
+            if (hasSelectedRow) {
+                const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true');
+                selectedNodes[0].tabIndex = 0;
+                return;
+            }
+            rows[0].tabIndex = 0;
+        }
+    }
+    expand(event) {
+        this.tt.toggleRowIndex = DomHandler.index(this.el.nativeElement);
+        this.rowNode.node['expanded'] = true;
+        this.tt.updateSerializedValue();
+        this.tt.tableService.onUIUpdate(this.tt.value);
+        this.rowNode.node['children'] ? this.restoreFocus(this.tt.toggleRowIndex + 1) : this.restoreFocus();
+        this.tt.onNodeExpand.emit({
+            originalEvent: event,
+            node: this.rowNode.node
+        });
+    }
+    collapse(event) {
+        this.rowNode.node['expanded'] = false;
+        this.tt.updateSerializedValue();
+        this.tt.tableService.onUIUpdate(this.tt.value);
+        this.tt.onNodeCollapse.emit({ originalEvent: event, node: this.rowNode.node });
+    }
+    focusRowChange(firstFocusableRow, currentFocusedRow, lastVisibleDescendant) {
+        firstFocusableRow.tabIndex = '-1';
+        currentFocusedRow.tabIndex = '0';
+        DomHandler.focus(currentFocusedRow);
+    }
+    restoreFocus(index) {
         this.zone.runOutsideAngular(() => {
             setTimeout(() => {
-                let row = DomHandler.findSingle(this.tt.containerViewChild?.nativeElement, '.p-treetable-tbody').children[this.tt.toggleRowIndex];
+                const container = this.tt.containerViewChild?.nativeElement;
+                const row = DomHandler.findSingle(container, '.p-treetable-tbody').children[index || this.tt.toggleRowIndex];
+                const rows = [...DomHandler.find(container, 'tr')];
+                rows &&
+                    rows.forEach((r) => {
+                        if (!row.isSameNode(r)) {
+                            r.tabIndex = -1;
+                        }
+                    });
                 if (row) {
+                    row.tabIndex = 0;
                     row.focus();
                 }
             }, 25);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", 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: "16.0.2", type: TTRow, selector: "[ttRow]", inputs: { rowNode: ["ttRow", "rowNode"] }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "\"0\"" }, classAttribute: "p-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", 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: "16.2.0", type: TTRow, 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" }, classAttribute: "p-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TTRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TTRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ttRow]',
                     host: {
                         class: 'p-element',
-                        '[attr.tabindex]': '"0"'
+                        '[class]': `'p-element ' + styleClass`,
+                        '[attr.tabindex]': "'0'",
+                        '[attr.aria-expanded]': 'expanded',
+                        '[attr.aria-level]': 'level',
+                        '[attr.data-pc-section]': 'row',
+                        '[attr.role]': 'row'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { rowNode: [{
@@ -3675,9 +3978,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }] } });
 class TreeTableToggler {
     tt;
+    config;
     rowNode;
-    constructor(tt) {
+    constructor(tt, config) {
         this.tt = tt;
+        this.config = config;
+    }
+    get toggleButtonAriaLabel() {
+        return this.config.translation ? (this.rowNode.expanded ? this.config.translation.aria.collapseRow : this.config.translation.aria.expandRow) : undefined;
     }
     onClick(event) {
         this.rowNode.node.expanded = !this.rowNode.node.expanded;
@@ -3697,8 +4005,8 @@ class TreeTableToggler {
         this.tt.tableService.onUIUpdate(this.tt.value);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTableToggler, deps: [{ token: TreeTable }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: TreeTableToggler, selector: "p-treeTableToggler", inputs: { rowNode: "rowNode" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTableToggler, deps: [{ token: TreeTable }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TreeTableToggler, selector: "p-treeTableToggler", inputs: { rowNode: "rowNode" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
         <button
             type="button"
             class="p-treetable-toggler p-link"
@@ -3707,16 +4015,19 @@ class TreeTableToggler {
             pRipple
             [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'"
             [style.marginLeft]="rowNode.level * 16 + 'px'"
+            [attr.data-pc-section]="'rowtoggler'"
+            [attr.data-pc-group-section]="'rowactionbutton'"
+            [attr.aria-label]="toggleButtonAriaLabel"
         >
             <ng-container *ngIf="!tt.togglerIconTemplate">
-                <ChevronDownIcon *ngIf="rowNode.node.expanded" />
-                <ChevronRightIcon *ngIf="!rowNode.node.expanded" />
+                <ChevronDownIcon *ngIf="rowNode.node.expanded" [attr.aria-hidden]="true" />
+                <ChevronRightIcon *ngIf="!rowNode.node.expanded" [attr.aria-hidden]="true" />
             </ng-container>
             <ng-template *ngTemplateOutlet="tt.togglerIconTemplate; context: { $implicit: rowNode.node.expanded }"></ng-template>
         </button>
     `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.Ripple; }), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(function () { return ChevronDownIcon; }), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronRightIcon; }), selector: "ChevronRightIcon" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTableToggler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTableToggler, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableToggler',
@@ -3729,10 +4040,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             pRipple
             [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'"
             [style.marginLeft]="rowNode.level * 16 + 'px'"
+            [attr.data-pc-section]="'rowtoggler'"
+            [attr.data-pc-group-section]="'rowactionbutton'"
+            [attr.aria-label]="toggleButtonAriaLabel"
         >
             <ng-container *ngIf="!tt.togglerIconTemplate">
-                <ChevronDownIcon *ngIf="rowNode.node.expanded" />
-                <ChevronRightIcon *ngIf="!rowNode.node.expanded" />
+                <ChevronDownIcon *ngIf="rowNode.node.expanded" [attr.aria-hidden]="true" />
+                <ChevronRightIcon *ngIf="!rowNode.node.expanded" [attr.aria-hidden]="true" />
             </ng-container>
             <ng-template *ngTemplateOutlet="tt.togglerIconTemplate; context: { $implicit: rowNode.node.expanded }"></ng-template>
         </button>
@@ -3742,16 +4056,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         class: 'p-element'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: TreeTable }]; }, propDecorators: { rowNode: [{
+        }], ctorParameters: function () { return [{ type: TreeTable }, { type: i1.PrimeNGConfig }]; }, propDecorators: { rowNode: [{
                 type: Input
             }] } });
 class TreeTableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", 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, SpinnerIcon, ArrowDownIcon, ArrowUpIcon, SortAltIcon, SortAmountUpAltIcon, SortAmountDownIcon, CheckIcon, MinusIcon, ChevronDownIcon, ChevronRightIcon], exports: [TreeTable, SharedModule, TreeTableToggler, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor, ScrollerModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTableModule, imports: [CommonModule, PaginatorModule, RippleModule, ScrollerModule, SpinnerIcon, ArrowDownIcon, ArrowUpIcon, SortAltIcon, SortAmountUpAltIcon, SortAmountDownIcon, CheckIcon, MinusIcon, ChevronDownIcon, ChevronRightIcon, SharedModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", 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, SpinnerIcon, ArrowDownIcon, ArrowUpIcon, SortAltIcon, SortAmountUpAltIcon, SortAmountDownIcon, CheckIcon, MinusIcon, ChevronDownIcon, ChevronRightIcon], exports: [TreeTable, SharedModule, TreeTableToggler, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor, ScrollerModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTableModule, imports: [CommonModule, PaginatorModule, RippleModule, ScrollerModule, SpinnerIcon, ArrowDownIcon, ArrowUpIcon, SortAltIcon, SortAmountUpAltIcon, SortAmountDownIcon, CheckIcon, MinusIcon, ChevronDownIcon, ChevronRightIcon, SharedModule,
             ScrollerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TreeTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PaginatorModule, RippleModule, ScrollerModule, SpinnerIcon, ArrowDownIcon, ArrowUpIcon, SortAltIcon, SortAmountUpAltIcon, SortAmountDownIcon, CheckIcon, MinusIcon, ChevronDownIcon, ChevronRightIcon],