primeng 18.0.4-lts → 18.0.6-lts

package/fesm2022/primeng-table.mjs

@@ -2,7 +2,7 @@ import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, NgZone, numberAttribute, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ViewChild, Output, Input, Directive, HostListener, PLATFORM_ID, Inject, Optional, forwardRef, ElementRef, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, inject, NgZone, numberAttribute, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ViewChild, Output, Input, Directive, HostListener, ElementRef, PLATFORM_ID, Inject, Optional, forwardRef, NgModule } from '@angular/core';
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from 'primeng/api';
@@ -629,7 +629,7 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
 
 .p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
     background: ${dt('datatable.row.toggle.button.selected.hover.background')};
-    ${dt('datatable.row.toggle.button.selected.hover.color')};
+    color: ${dt('datatable.row.toggle.button.selected.hover.color')};
 }
 
 .p-datatable-row-toggle-button:focus-visible {
@@ -1720,11 +1720,12 @@ const _c56 = ["removeruleicon"];
 const _c57 = ["addruleicon"];
 const _c58 = ["clearfiltericon"];
 const _c59 = ["clearBtn"];
+const _c60 = a0 => ({ hasFilter: a0 });
 function ColumnFilter_p_columnFilterFormElement_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "p-columnFilterFormElement", 8);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("type", ctx_r0.type)("field", ctx_r0.field)("ariaLabel", ctx_r0.ariaLabel)("filterConstraint", ctx_r0.dt.filters[ctx_r0.field])("filterTemplate", ctx_r0.filterTemplate)("placeholder", ctx_r0.placeholder)("minFractionDigits", ctx_r0.minFractionDigits)("maxFractionDigits", ctx_r0.maxFractionDigits)("prefix", ctx_r0.prefix)("suffix", ctx_r0.suffix)("locale", ctx_r0.locale)("localeMatcher", ctx_r0.localeMatcher)("currency", ctx_r0.currency)("currencyDisplay", ctx_r0.currencyDisplay)("useGrouping", ctx_r0.useGrouping)("showButtons", ctx_r0.showButtons);
+    i0.ɵɵproperty("type", ctx_r0.type)("field", ctx_r0.field)("ariaLabel", ctx_r0.ariaLabel)("filterConstraint", ctx_r0.dt.filters[ctx_r0.field])("filterTemplate", ctx_r0.filterTemplate || ctx_r0._filterTemplate)("placeholder", ctx_r0.placeholder)("minFractionDigits", ctx_r0.minFractionDigits)("maxFractionDigits", ctx_r0.maxFractionDigits)("prefix", ctx_r0.prefix)("suffix", ctx_r0.suffix)("locale", ctx_r0.locale)("localeMatcher", ctx_r0.localeMatcher)("currency", ctx_r0.currency)("currencyDisplay", ctx_r0.currencyDisplay)("useGrouping", ctx_r0.useGrouping)("showButtons", ctx_r0.showButtons);
 } }
 function ColumnFilter_p_button_2_ng_template_1_FilterIcon_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "FilterIcon");
@@ -1740,10 +1741,10 @@ function ColumnFilter_p_button_2_ng_template_1_span_1_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.filterIconTemplate || ctx_r0._filterIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.filterIconTemplate || ctx_r0._filterIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c60, ctx_r0.hasFilter));
 } }
 function ColumnFilter_p_button_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ColumnFilter_p_button_2_ng_template_1_FilterIcon_0_Template, 1, 0, "FilterIcon", 10)(1, ColumnFilter_p_button_2_ng_template_1_span_1_Template, 2, 1, "span", 11);
+    i0.ɵɵtemplate(0, ColumnFilter_p_button_2_ng_template_1_FilterIcon_0_Template, 1, 0, "FilterIcon", 10)(1, ColumnFilter_p_button_2_ng_template_1_span_1_Template, 2, 4, "span", 11);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngIf", !ctx_r0.filterIconTemplate && !ctx_r0._filterIconTemplate);
@@ -1770,7 +1771,7 @@ function ColumnFilter_p_button_3_ng_template_1_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtemplate(0, ColumnFilter_p_button_3_ng_template_1_1_ng_template_0_Template, 0, 0, "ng-template");
 } }
 function ColumnFilter_p_button_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ColumnFilter_p_button_3_ng_template_1_FilterSlashIcon_0_Template, 1, 0, "FilterSlashIcon", 10)(1, ColumnFilter_p_button_3_ng_template_1_1_Template, 1, 0, null, 13);
+    i0.ɵɵtemplate(0, ColumnFilter_p_button_3_ng_template_1_FilterSlashIcon_0_Template, 1, 0, "FilterSlashIcon", 10)(1, ColumnFilter_p_button_3_ng_template_1_1_Template, 1, 0, null, 15);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngIf", !ctx_r0.clearFilterIconTemplate && !ctx_r0._clearFilterIconTemplate);
@@ -1859,7 +1860,7 @@ function ColumnFilter_div_4_ng_template_3_div_2_p_button_4_Template(rf, ctx) { i
     const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "p-button", 28);
     i0.ɵɵlistener("onClick", function ColumnFilter_div_4_ng_template_3_div_2_p_button_4_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r12); const fieldConstraint_r11 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.removeConstraint(fieldConstraint_r11)); });
-    i0.ɵɵtemplate(1, ColumnFilter_div_4_ng_template_3_div_2_p_button_4_TrashIcon_1_Template, 1, 0, "TrashIcon", 10)(2, ColumnFilter_div_4_ng_template_3_div_2_p_button_4_2_Template, 1, 0, null, 13);
+    i0.ɵɵtemplate(1, ColumnFilter_div_4_ng_template_3_div_2_p_button_4_TrashIcon_1_Template, 1, 0, "TrashIcon", 10)(2, ColumnFilter_div_4_ng_template_3_div_2_p_button_4_2_Template, 1, 0, null, 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -1898,7 +1899,7 @@ function ColumnFilter_div_4_ng_template_3_div_3_Template(rf, ctx) { if (rf & 1)
     const _r13 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div")(1, "p-button", 29);
     i0.ɵɵlistener("onClick", function ColumnFilter_div_4_ng_template_3_div_3_Template_p_button_onClick_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.addConstraint()); });
-    i0.ɵɵtemplate(2, ColumnFilter_div_4_ng_template_3_div_3_PlusIcon_2_Template, 1, 0, "PlusIcon", 10)(3, ColumnFilter_div_4_ng_template_3_div_3_3_Template, 1, 0, null, 13);
+    i0.ɵɵtemplate(2, ColumnFilter_div_4_ng_template_3_div_3_PlusIcon_2_Template, 1, 0, "PlusIcon", 10)(3, ColumnFilter_div_4_ng_template_3_div_3_3_Template, 1, 0, null, 15);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -1960,9 +1961,9 @@ function ColumnFilter_div_4_ng_container_5_Template(rf, ctx) { if (rf & 1) {
 } }
 function ColumnFilter_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵlistener("click", function ColumnFilter_div_4_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onContentClick()); })("@overlayAnimation.start", function ColumnFilter_div_4_Template_div_animation_overlayAnimation_start_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOverlayAnimationStart($event)); })("@overlayAnimation.done", function ColumnFilter_div_4_Template_div_animation_overlayAnimation_done_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOverlayAnimationEnd($event)); })("keydown.escape", function ColumnFilter_div_4_Template_div_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEscape()); });
-    i0.ɵɵtemplate(1, ColumnFilter_div_4_ng_container_1_Template, 1, 0, "ng-container", 16)(2, ColumnFilter_div_4_ul_2_Template, 5, 5, "ul", 17)(3, ColumnFilter_div_4_ng_template_3_Template, 7, 7, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(5, ColumnFilter_div_4_ng_container_5_Template, 1, 0, "ng-container", 16);
+    i0.ɵɵtemplate(1, ColumnFilter_div_4_ng_container_1_Template, 1, 0, "ng-container", 13)(2, ColumnFilter_div_4_ul_2_Template, 5, 5, "ul", 17)(3, ColumnFilter_div_4_ng_template_3_Template, 7, 7, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(5, ColumnFilter_div_4_ng_container_5_Template, 1, 0, "ng-container", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const menu_r16 = i0.ɵɵreference(4);
@@ -1976,7 +1977,7 @@ function ColumnFilter_div_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.footerTemplate || ctx_r0._footerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(12, _c44, ctx_r0.field));
 } }
-const _c60 = (a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15) => ({ $implicit: a0, filterCallback: a1, type: a2, field: a3, filterConstraint: a4, placeholder: a5, minFractionDigits: a6, maxFractionDigits: a7, prefix: a8, suffix: a9, locale: a10, localeMatcher: a11, currency: a12, currencyDisplay: a13, useGrouping: a14, showButtons: a15 });
+const _c61 = (a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15) => ({ $implicit: a0, filterCallback: a1, type: a2, field: a3, filterConstraint: a4, placeholder: a5, minFractionDigits: a6, maxFractionDigits: a7, prefix: a8, suffix: a9, locale: a10, localeMatcher: a11, currency: a12, currencyDisplay: a13, useGrouping: a14, showButtons: a15 });
 function ColumnFilterFormElement_ng_container_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -1987,7 +1988,7 @@ function ColumnFilterFormElement_ng_container_0_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.filterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunctionV(2, _c60, [ctx_r0.filterConstraint.value, ctx_r0.filterCallback, ctx_r0.type, ctx_r0.field, ctx_r0.filterConstraint, ctx_r0.placeholder, ctx_r0.minFractionDigits, ctx_r0.maxFractionDigits, ctx_r0.prefix, ctx_r0.suffix, ctx_r0.locale, ctx_r0.localeMatcher, ctx_r0.currency, ctx_r0.currencyDisplay, ctx_r0.useGrouping, ctx_r0.showButtons]));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.filterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunctionV(2, _c61, [ctx_r0.filterConstraint.value, ctx_r0.filterCallback, ctx_r0.type, ctx_r0.field, ctx_r0.filterConstraint, ctx_r0.placeholder, ctx_r0.minFractionDigits, ctx_r0.maxFractionDigits, ctx_r0.prefix, ctx_r0.suffix, ctx_r0.locale, ctx_r0.localeMatcher, ctx_r0.currency, ctx_r0.currencyDisplay, ctx_r0.useGrouping, ctx_r0.showButtons]));
 } }
 function ColumnFilterFormElement_ng_template_1_input_1_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -2015,7 +2016,7 @@ function ColumnFilterFormElement_ng_template_1_p_checkbox_3_Template(rf, ctx) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("indeterminate", true)("binary", true)("ngModel", ctx_r0.filterConstraint == null ? null : ctx_r0.filterConstraint.value);
+    i0.ɵɵproperty("indeterminate", (ctx_r0.filterConstraint == null ? null : ctx_r0.filterConstraint.value) === null)("binary", true)("ngModel", ctx_r0.filterConstraint == null ? null : ctx_r0.filterConstraint.value);
 } }
 function ColumnFilterFormElement_ng_template_1_p_datepicker_4_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -3103,10 +3104,7 @@ class Table extends BaseComponent {
     onPageChange(event) {
         this.first = event.first;
         this.rows = event.rows;
-        this.onPage.emit({
-            first: this.first,
-            rows: this.rows
-        });
+        this.onPage.emit({ first: this.first, rows: this.rows });
         if (this.lazy) {
             this.onLazyLoad.emit(this.createLazyLoadMetadata());
         }
@@ -3140,12 +3138,7 @@ class Table extends BaseComponent {
             let sortMeta = this.getSortMeta(event.field);
             if (sortMeta) {
                 if (!metaKey) {
-                    this._multiSortMeta = [
-                        {
-                            field: event.field,
-                            order: sortMeta.order * -1
-                        }
-                    ];
+                    this._multiSortMeta = [{ field: event.field, order: sortMeta.order * -1 }];
                     if (this.resetPageOnSort) {
                         this._first = 0;
                         this.firstChange.emit(this._first);
@@ -3166,10 +3159,7 @@ class Table extends BaseComponent {
                         this.firstChange.emit(this._first);
                     }
                 }
-                this._multiSortMeta.push({
-                    field: event.field,
-                    order: this.defaultSortOrder
-                });
+                this._multiSortMeta.push({ field: event.field, order: this.defaultSortOrder });
             }
             this.sortMultiple();
         }
@@ -3195,12 +3185,7 @@ class Table extends BaseComponent {
             }
             else if (this.value) {
                 if (this.customSort) {
-                    this.sortFunction.emit({
-                        data: this.value,
-                        mode: this.sortMode,
-                        field: field,
-                        order: order
-                    });
+                    this.sortFunction.emit({ data: this.value, mode: this.sortMode, field: field, order: order });
                 }
                 else {
                     this.value.sort((data1, data2) => {
@@ -3225,10 +3210,7 @@ class Table extends BaseComponent {
                     this._filter();
                 }
             }
-            let sortMeta = {
-                field: field,
-                order: order
-            };
+            let sortMeta = { field: field, order: order };
             this.onSort.emit(sortMeta);
             this.tableService.onSort(sortMeta);
         }
@@ -3246,11 +3228,7 @@ class Table extends BaseComponent {
             }
             else if (this.value) {
                 if (this.customSort) {
-                    this.sortFunction.emit({
-                        data: this.value,
-                        mode: this.sortMode,
-                        multiSortMeta: this.multiSortMeta
-                    });
+                    this.sortFunction.emit({ data: this.value, mode: this.sortMode, multiSortMeta: this.multiSortMeta });
                 }
                 else {
                     this.value.sort((data1, data2) => {
@@ -3262,9 +3240,7 @@ class Table extends BaseComponent {
                     this._filter();
                 }
             }
-            this.onSort.emit({
-                multisortmeta: this.multiSortMeta
-            });
+            this.onSort.emit({ multisortmeta: this.multiSortMeta });
             this.tableService.onSort(this.multiSortMeta);
         }
     }
@@ -3350,11 +3326,7 @@ class Table extends BaseComponent {
                                 delete this.selectionKeys[dataKeyValue];
                             }
                         }
-                        this.onRowUnselect.emit({
-                            originalEvent: event.originalEvent,
-                            data: rowData,
-                            type: 'row'
-                        });
+                        this.onRowUnselect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row' });
                     }
                     else {
                         if (this.isSingleSelectionMode()) {
@@ -3379,12 +3351,7 @@ class Table extends BaseComponent {
                                 this.selectionKeys[dataKeyValue] = 1;
                             }
                         }
-                        this.onRowSelect.emit({
-                            originalEvent: event.originalEvent,
-                            data: rowData,
-                            type: 'row',
-                            index: rowIndex
-                        });
+                        this.onRowSelect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row', index: rowIndex });
                     }
                 }
                 else {
@@ -3393,22 +3360,12 @@ class Table extends BaseComponent {
                             this._selection = null;
                             this.selectionKeys = {};
                             this.selectionChange.emit(this.selection);
-                            this.onRowUnselect.emit({
-                                originalEvent: event.originalEvent,
-                                data: rowData,
-                                type: 'row',
-                                index: rowIndex
-                            });
+                            this.onRowUnselect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row', index: rowIndex });
                         }
                         else {
                             this._selection = rowData;
                             this.selectionChange.emit(this.selection);
-                            this.onRowSelect.emit({
-                                originalEvent: event.originalEvent,
-                                data: rowData,
-                                type: 'row',
-                                index: rowIndex
-                            });
+                            this.onRowSelect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row', index: rowIndex });
                             if (dataKeyValue) {
                                 this.selectionKeys = {};
                                 this.selectionKeys[dataKeyValue] = 1;
@@ -3420,12 +3377,7 @@ class Table extends BaseComponent {
                             let selectionIndex = this.findIndexInSelection(rowData);
                             this._selection = this.selection.filter((val, i) => i != selectionIndex);
                             this.selectionChange.emit(this.selection);
-                            this.onRowUnselect.emit({
-                                originalEvent: event.originalEvent,
-                                data: rowData,
-                                type: 'row',
-                                index: rowIndex
-                            });
+                            this.onRowUnselect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row', index: rowIndex });
                             if (dataKeyValue) {
                                 delete this.selectionKeys[dataKeyValue];
                             }
@@ -3433,12 +3385,7 @@ class Table extends BaseComponent {
                         else {
                             this._selection = this.selection ? [...this.selection, rowData] : [rowData];
                             this.selectionChange.emit(this.selection);
-                            this.onRowSelect.emit({
-                                originalEvent: event.originalEvent,
-                                data: rowData,
-                                type: 'row',
-                                index: rowIndex
-                            });
+                            this.onRowSelect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row', index: rowIndex });
                             if (dataKeyValue) {
                                 this.selectionKeys[dataKeyValue] = 1;
                             }
@@ -3463,11 +3410,7 @@ class Table extends BaseComponent {
             if (this.contextMenuSelectionMode === 'separate') {
                 this.contextMenuSelection = rowData;
                 this.contextMenuSelectionChange.emit(rowData);
-                this.onContextMenuSelect.emit({
-                    originalEvent: event.originalEvent,
-                    data: rowData,
-                    index: event.rowIndex
-                });
+                this.onContextMenuSelect.emit({ originalEvent: event.originalEvent, data: rowData, index: event.rowIndex });
                 this.contextMenu.show(event.originalEvent);
                 this.tableService.onContextMenu(rowData);
             }
@@ -3497,15 +3440,11 @@ class Table extends BaseComponent {
                 }
                 this.tableService.onSelectionChange();
                 this.contextMenu.show(event.originalEvent);
-                this.onContextMenuSelect.emit({
-                    originalEvent: event,
-                    data: rowData,
-                    index: event.rowIndex
-                });
+                this.onContextMenuSelect.emit({ originalEvent: event, data: rowData, index: event.rowIndex });
             }
         }
     }
-    selectRange(event, rowIndex) {
+    selectRange(event, rowIndex, isMetaKeySelection) {
         let rangeStart, rangeEnd;
         if (this.anchorRowIndex > rowIndex) {
             rangeStart = rowIndex;
@@ -3526,7 +3465,7 @@ class Table extends BaseComponent {
         let rangeRowsData = [];
         for (let i = rangeStart; i <= rangeEnd; i++) {
             let rangeRowData = this.filteredValue ? this.filteredValue[i] : this.value[i];
-            if (!this.isSelected(rangeRowData)) {
+            if (!this.isSelected(rangeRowData) && !isMetaKeySelection) {
                 if (!this.isRowSelectable(rangeRowData, rowIndex)) {
                     continue;
                 }
@@ -3539,11 +3478,7 @@ class Table extends BaseComponent {
             }
         }
         this.selectionChange.emit(this.selection);
-        this.onRowSelect.emit({
-            originalEvent: event,
-            data: rangeRowsData,
-            type: 'row'
-        });
+        this.onRowSelect.emit({ originalEvent: event, data: rangeRowsData, type: 'row' });
     }
     clearSelectionRange(event) {
         let rangeStart, rangeEnd;
@@ -3569,11 +3504,7 @@ class Table extends BaseComponent {
             if (dataKeyValue) {
                 delete this.selectionKeys[dataKeyValue];
             }
-            this.onRowUnselect.emit({
-                originalEvent: event,
-                data: rangeRowData,
-                type: 'row'
-            });
+            this.onRowUnselect.emit({ originalEvent: event, data: rangeRowData, type: 'row' });
         }
     }
     isSelected(rowData) {
@@ -3616,12 +3547,7 @@ class Table extends BaseComponent {
             }
             this._selection = rowData;
             this.selectionChange.emit(this.selection);
-            this.onRowSelect.emit({
-                originalEvent: event.originalEvent,
-                index: event.rowIndex,
-                data: rowData,
-                type: 'radiobutton'
-            });
+            this.onRowSelect.emit({ originalEvent: event.originalEvent, index: event.rowIndex, data: rowData, type: 'radiobutton' });
             if (this.dataKey) {
                 this.selectionKeys = {};
                 this.selectionKeys[String(ObjectUtils.resolveFieldData(rowData, this.dataKey))] = 1;
@@ -3630,12 +3556,7 @@ class Table extends BaseComponent {
         else {
             this._selection = null;
             this.selectionChange.emit(this.selection);
-            this.onRowUnselect.emit({
-                originalEvent: event.originalEvent,
-                index: event.rowIndex,
-                data: rowData,
-                type: 'radiobutton'
-            });
+            this.onRowUnselect.emit({ originalEvent: event.originalEvent, index: event.rowIndex, data: rowData, type: 'radiobutton' });
         }
         this.tableService.onSelectionChange();
         if (this.isStateful()) {
@@ -3651,12 +3572,7 @@ class Table extends BaseComponent {
             let selectionIndex = this.findIndexInSelection(rowData);
             this._selection = this.selection.filter((val, i) => i != selectionIndex);
             this.selectionChange.emit(this.selection);
-            this.onRowUnselect.emit({
-                originalEvent: event.originalEvent,
-                index: event.rowIndex,
-                data: rowData,
-                type: 'checkbox'
-            });
+            this.onRowUnselect.emit({ originalEvent: event.originalEvent, index: event.rowIndex, data: rowData, type: 'checkbox' });
             if (dataKeyValue) {
                 delete this.selectionKeys[dataKeyValue];
             }
@@ -3667,12 +3583,7 @@ class Table extends BaseComponent {
             }
             this._selection = this.selection ? [...this.selection, rowData] : [rowData];
             this.selectionChange.emit(this.selection);
-            this.onRowSelect.emit({
-                originalEvent: event.originalEvent,
-                index: event.rowIndex,
-                data: rowData,
-                type: 'checkbox'
-            });
+            this.onRowSelect.emit({ originalEvent: event.originalEvent, index: event.rowIndex, data: rowData, type: 'checkbox' });
             if (dataKeyValue) {
                 this.selectionKeys[dataKeyValue] = 1;
             }
@@ -3698,10 +3609,7 @@ class Table extends BaseComponent {
             this.updateSelectionKeys();
             this.selectionChange.emit(this._selection);
             this.tableService.onSelectionChange();
-            this.onHeaderCheckboxToggle.emit({
-                originalEvent: event,
-                checked: check
-            });
+            this.onHeaderCheckboxToggle.emit({ originalEvent: event, checked: check });
             if (this.isStateful()) {
                 this.saveState();
             }
@@ -3819,10 +3727,7 @@ class Table extends BaseComponent {
                 }
             }
         }
-        this.onFilter.emit({
-            filters: this.filters,
-            filteredValue: this.filteredValue || this.value
-        });
+        this.onFilter.emit({ filters: this.filters, filteredValue: this.filteredValue || this.value });
         this.tableService.onValueChange(this.value);
         if (this.isStateful() && !this.restoringFilter) {
             this.saveState();
@@ -3929,10 +3834,7 @@ class Table extends BaseComponent {
             let cellData = ObjectUtils.resolveFieldData(record, column.field);
             if (cellData != null) {
                 if (this.exportFunction) {
-                    cellData = this.exportFunction({
-                        data: cellData,
-                        field: column.field
-                    });
+                    cellData = this.exportFunction({ data: cellData, field: column.field });
                 }
                 else
                     cellData = String(cellData).replace(/"/g, '""');
@@ -3946,9 +3848,7 @@ class Table extends BaseComponent {
         if (body.length) {
             csv += '\n' + body;
         }
-        let blob = new Blob([new Uint8Array([0xef, 0xbb, 0xbf]), csv], {
-            type: 'text/csv;charset=utf-8;'
-        });
+        let blob = new Blob([new Uint8Array([0xef, 0xbb, 0xbf]), csv], { type: 'text/csv;charset=utf-8;' });
         let link = this.renderer.createElement('a');
         link.style.display = 'none';
         this.renderer.appendChild(this.document.body, link);
@@ -3964,11 +3864,7 @@ class Table extends BaseComponent {
         this.renderer.removeChild(this.document.body, link);
     }
     onLazyItemLoad(event) {
-        this.onLazyLoad.emit({
-            ...this.createLazyLoadMetadata(),
-            ...event,
-            rows: event.last - event.first
-        });
+        this.onLazyLoad.emit({ ...this.createLazyLoadMetadata(), ...event, rows: event.last - event.first });
     }
     /**
      * Resets scroll to top.
@@ -4023,12 +3919,7 @@ class Table extends BaseComponent {
                 if (this.editingCell && !this.selfClick && this.isEditingCellValid()) {
                     DomHandler.removeClass(this.editingCell, 'p-cell-editing');
                     this.editingCell = null;
-                    this.onEditComplete.emit({
-                        field: this.editingCellField,
-                        data: this.editingCellData,
-                        originalEvent: event,
-                        index: this.editingCellRowIndex
-                    });
+                    this.onEditComplete.emit({ field: this.editingCellField, data: this.editingCellData, originalEvent: event, index: this.editingCellRowIndex });
                     this.editingCellField = null;
                     this.editingCellData = null;
                     this.editingCellRowIndex = null;
@@ -4069,20 +3960,14 @@ class Table extends BaseComponent {
         let dataKeyValue = this.groupRowsBy ? String(ObjectUtils.resolveFieldData(rowData, this.groupRowsBy)) : String(ObjectUtils.resolveFieldData(rowData, this.dataKey));
         if (this.expandedRowKeys[dataKeyValue] != null) {
             delete this.expandedRowKeys[dataKeyValue];
-            this.onRowCollapse.emit({
-                originalEvent: event,
-                data: rowData
-            });
+            this.onRowCollapse.emit({ originalEvent: event, data: rowData });
         }
         else {
             if (this.rowExpandMode === 'single') {
                 this.expandedRowKeys = {};
             }
             this.expandedRowKeys[dataKeyValue] = true;
-            this.onRowExpand.emit({
-                originalEvent: event,
-                data: rowData
-            });
+            this.onRowExpand.emit({ originalEvent: event, data: rowData });
         }
         if (event) {
             event.preventDefault();
@@ -4148,10 +4033,7 @@ class Table extends BaseComponent {
                 this.setResizeTableWidth(tableWidth + 'px');
                 this.resizeTableCells(newColumnWidth, null);
             }
-            this.onColResize.emit({
-                element: this.resizeColumnElement,
-                delta: delta
-            });
+            this.onColResize.emit({ element: this.resizeColumnElement, delta: delta });
             if (this.isStateful()) {
                 this.saveState();
             }
@@ -4225,11 +4107,7 @@ class Table extends BaseComponent {
             }
             if (allowDrop) {
                 ObjectUtils.reorderArray(this.columns, dragIndex, dropIndex);
-                this.onColReorder.emit({
-                    dragIndex: dragIndex,
-                    dropIndex: dropIndex,
-                    columns: this.columns
-                });
+                this.onColReorder.emit({ dragIndex: dragIndex, dropIndex: dropIndex, columns: this.columns });
                 if (this.isStateful()) {
                     this.zone.runOutsideAngular(() => {
                         setTimeout(() => {
@@ -4322,10 +4200,7 @@ class Table extends BaseComponent {
                 // TODO: Check
                 this._value = [...this._value];
             }
-            this.onRowReorder.emit({
-                dragIndex: this.draggedRowIndex,
-                dropIndex: dropIndex
-            });
+            this.onRowReorder.emit({ dragIndex: this.draggedRowIndex, dropIndex: dropIndex });
         }
         //cleanup
         this.onRowDragLeave(event, rowElement);
@@ -4448,7 +4323,11 @@ class Table extends BaseComponent {
     }
     saveColumnWidths(state) {
         let widths = [];
-        let headers = DomHandler.find(this.containerViewChild?.nativeElement, '.p-datatable-thead > tr > th');
+        let headers = [];
+        const container = this.containerViewChild?.nativeElement;
+        if (container) {
+            headers = DomHandler.find(container, '.p-datatable-thead > tr > th');
+        }
         headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
         state.columnWidths = widths.join(',');
         if (this.columnResizeMode === 'expand') {
@@ -4788,9 +4667,7 @@ class Table extends BaseComponent {
                     *ngIf="virtualScroll"
                     [items]="processedData"
                     [columns]="columns"
-                    [style]="{
-                        height: scrollHeight !== 'flex' ? scrollHeight : undefined
-                    }"
+                    [style]="{ height: scrollHeight !== 'flex' ? scrollHeight : undefined }"
                     [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
                     [itemSize]="virtualScrollItemSize || _virtualRowHeight"
                     [step]="rows"
@@ -4805,41 +4682,18 @@ class Table extends BaseComponent {
                     [autoSize]="true"
                 >
                     <ng-template #content let-items let-scrollerOptions="options">
-                        <ng-container
-                            *ngTemplateOutlet="
-                                buildInTable;
-                                context: {
-                                    $implicit: items,
-                                    options: scrollerOptions
-                                }
-                            "
-                        ></ng-container>
+                        <ng-container *ngTemplateOutlet="buildInTable; context: { $implicit: items, options: scrollerOptions }"></ng-container>
                     </ng-template>
                 </p-scroller>
                 <ng-container *ngIf="!virtualScroll">
-                    <ng-container
-                        *ngTemplateOutlet="
-                            buildInTable;
-                            context: {
-                                $implicit: processedData,
-                                options: { columns }
-                            }
-                        "
-                    ></ng-container>
+                    <ng-container *ngTemplateOutlet="buildInTable; context: { $implicit: processedData, options: { columns } }"></ng-container>
                 </ng-container>
 
                 <ng-template #buildInTable let-items let-scrollerOptions="options">
                     <table #table role="table" [ngClass]="cx('table')" [class]="tableStyleClass" [style]="tableStyle" [attr.id]="id + '-table'">
                         <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
                         <thead role="rowgroup" #thead [ngClass]="cx('thead')" [ngStyle]="sx('thead')">
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    headerGroupedTemplate || headerTemplate || _headerTemplate;
-                                    context: {
-                                        $implicit: scrollerOptions.columns
-                                    }
-                                "
-                            ></ng-container>
+                            <ng-container *ngTemplateOutlet="headerGroupedTemplate || headerTemplate || _headerTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
                         </thead>
                         <tbody
                             role="rowgroup"
@@ -4867,14 +4721,7 @@ class Table extends BaseComponent {
                             [ngClass]="cx('virtualScrollerSpacer')"
                         ></tbody>
                         <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate" #tfoot [ngClass]="cx('footer')">
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate;
-                                    context: {
-                                        $implicit: scrollerOptions.columns
-                                    }
-                                "
-                            ></ng-container>
+                            <ng-container *ngTemplateOutlet="footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
                         </tfoot>
                     </table>
                 </ng-template>
@@ -5469,13 +5316,7 @@ class TableBody {
                     <ng-container
                         *ngTemplateOutlet="
                             dt.groupHeaderTemplate || dt._groupHeaderTemplate;
-                            context: {
-                                $implicit: rowData,
-                                rowIndex: getRowIndex(rowIndex),
-                                columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
-                                frozen: frozen
-                            }
+                            context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
                         "
                     ></ng-container>
                 </ng-container>
@@ -5483,13 +5324,7 @@ class TableBody {
                     <ng-container
                         *ngTemplateOutlet="
                             rowData ? template : dt.loadingBodyTemplate || dt._loadingBodyTemplate;
-                            context: {
-                                $implicit: rowData,
-                                rowIndex: getRowIndex(rowIndex),
-                                columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
-                                frozen: frozen
-                            }
+                            context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
                         "
                     ></ng-container>
                 </ng-container>
@@ -5513,13 +5348,7 @@ class TableBody {
                     <ng-container
                         *ngTemplateOutlet="
                             dt.groupFooterTemplate || dt._groupFooterTemplate;
-                            context: {
-                                $implicit: rowData,
-                                rowIndex: getRowIndex(rowIndex),
-                                columns: columns,
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
-                                frozen: frozen
-                            }
+                            context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
                         "
                     ></ng-container>
                 </ng-container>
@@ -5529,58 +5358,24 @@ class TableBody {
             <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
                 <ng-container *ngIf="!(dt.groupHeaderTemplate && dt._groupHeaderTemplate)">
                     <ng-container
-                        *ngTemplateOutlet="
-                            template;
-                            context: {
-                                $implicit: rowData,
-                                rowIndex: getRowIndex(rowIndex),
-                                columns: columns,
-                                expanded: dt.isRowExpanded(rowData),
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
-                                frozen: frozen
-                            }
-                        "
+                        *ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
                     ></ng-container>
                 </ng-container>
                 <ng-container *ngIf="(dt.groupHeaderTemplate || dt._groupHeaderTemplate) && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))" role="row">
                     <ng-container
                         *ngTemplateOutlet="
                             dt.groupHeaderTemplate || dt._groupHeaderTemplate;
-                            context: {
-                                $implicit: rowData,
-                                rowIndex: getRowIndex(rowIndex),
-                                columns: columns,
-                                expanded: dt.isRowExpanded(rowData),
-                                editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
-                                frozen: frozen
-                            }
+                            context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
                         "
                     ></ng-container>
                 </ng-container>
                 <ng-container *ngIf="dt.isRowExpanded(rowData)">
-                    <ng-container
-                        *ngTemplateOutlet="
-                            dt.expandedRowTemplate || dt._expandedRowTemplate;
-                            context: {
-                                $implicit: rowData,
-                                rowIndex: getRowIndex(rowIndex),
-                                columns: columns,
-                                frozen: frozen
-                            }
-                        "
-                    ></ng-container>
+                    <ng-container *ngTemplateOutlet="dt.expandedRowTemplate || dt._expandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
                     <ng-container *ngIf="(dt.groupFooterTemplate || dt._groupFooterTemplate) && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))" role="row">
                         <ng-container
                             *ngTemplateOutlet="
                                 dt.groupFooterTemplate || dt._groupFooterTemplate;
-                                context: {
-                                    $implicit: rowData,
-                                    rowIndex: getRowIndex(rowIndex),
-                                    columns: columns,
-                                    expanded: dt.isRowExpanded(rowData),
-                                    editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
-                                    frozen: frozen
-                                }
+                                context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
                             "
                         ></ng-container>
                     </ng-container>
@@ -5590,30 +5385,10 @@ class TableBody {
         <ng-container *ngIf="(dt.frozenExpandedRowTemplate || dt._frozenExpandedRowTemplate) && frozen">
             <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
                 <ng-container
-                    *ngTemplateOutlet="
-                        template;
-                        context: {
-                            $implicit: rowData,
-                            rowIndex: getRowIndex(rowIndex),
-                            columns: columns,
-                            expanded: dt.isRowExpanded(rowData),
-                            editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
-                            frozen: frozen
-                        }
-                    "
+                    *ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
                 ></ng-container>
                 <ng-container *ngIf="dt.isRowExpanded(rowData)">
-                    <ng-container
-                        *ngTemplateOutlet="
-                            dt.frozenExpandedRowTemplate || dt._frozenExpandedRowTemplate;
-                            context: {
-                                $implicit: rowData,
-                                rowIndex: getRowIndex(rowIndex),
-                                columns: columns,
-                                frozen: frozen
-                            }
-                        "
-                    ></ng-container>
+                    <ng-container *ngTemplateOutlet="dt.frozenExpandedRowTemplate || dt._frozenExpandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
                 </ng-container>
             </ng-template>
         </ng-container>
@@ -5660,13 +5435,7 @@ class RowGroupHeader {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RowGroupHeader, [{
         type: Directive,
-        args: [{
-                selector: '[pRowGroupHeader]',
-                host: {
-                    class: 'p-datatable-row-group-header',
-                    '[style.top]': 'getFrozenRowGroupHeaderStickyPosition'
-                }
-            }]
+        args: [{ selector: '[pRowGroupHeader]', host: { class: 'p-datatable-row-group-header', '[style.top]': 'getFrozenRowGroupHeaderStickyPosition' } }]
     }], () => [{ type: Table }], null); })();
 class FrozenColumn {
     el;
@@ -5703,17 +5472,19 @@ class FrozenColumn {
         if (this._frozen) {
             if (this.alignFrozen === 'right') {
                 let right = 0;
-                let next = this.el.nativeElement.nextElementSibling;
-                if (next) {
-                    right = DomHandler.getOuterWidth(next) + (parseFloat(next.style.right) || 0);
+                let sibling = this.el.nativeElement.nextElementSibling;
+                while (sibling) {
+                    right += DomHandler.getOuterWidth(sibling);
+                    sibling = sibling.nextElementSibling;
                 }
                 this.el.nativeElement.style.right = right + 'px';
             }
             else {
                 let left = 0;
-                let prev = this.el.nativeElement.previousElementSibling;
-                if (prev) {
-                    left = DomHandler.getOuterWidth(prev) + (parseFloat(prev.style.left) || 0);
+                let sibling = this.el.nativeElement.previousElementSibling;
+                while (sibling) {
+                    left += DomHandler.getOuterWidth(sibling);
+                    sibling = sibling.previousElementSibling;
                 }
                 this.el.nativeElement.style.left = left + 'px';
             }
@@ -5736,13 +5507,7 @@ class FrozenColumn {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FrozenColumn, [{
         type: Directive,
-        args: [{
-                selector: '[pFrozenColumn]',
-                host: {
-                    '[class.p-datatable-frozen-column]': 'frozen',
-                    '[class.p-datatable-frozen-column-left]': 'alignFrozen === "left"'
-                }
-            }]
+        args: [{ selector: '[pFrozenColumn]', host: { '[class.p-datatable-frozen-column]': 'frozen', '[class.p-datatable-frozen-column-left]': 'alignFrozen === "left"' } }]
     }], () => [{ type: i0.ElementRef }, { type: i0.NgZone }], { frozen: [{
             type: Input
         }], alignFrozen: [{
@@ -5753,8 +5518,10 @@ class FrozenColumn {
         }] }); })();
 class SortableColumn {
     dt;
+    #elementRef = inject(ElementRef);
     field;
     pSortableColumnDisabled;
+    role = this.#elementRef.nativeElement?.tagName !== 'TH' ? 'columnheader' : null;
     sorted;
     sortOrder;
     subscription;
@@ -5789,10 +5556,7 @@ class SortableColumn {
     onClick(event) {
         if (this.isEnabled() && !this.isFilterElement(event.target)) {
             this.updateSortState();
-            this.dt.sort({
-                originalEvent: event,
-                field: this.field
-            });
+            this.dt.sort({ originalEvent: event, field: this.field });
             DomHandler.clearSelection();
         }
     }
@@ -5818,7 +5582,7 @@ class SortableColumn {
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SortableColumn, selectors: [["", "pSortableColumn", ""]], hostVars: 7, hostBindings: function SortableColumn_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function SortableColumn_click_HostBindingHandler($event) { return ctx.onClick($event); })("keydown.space", function SortableColumn_keydown_space_HostBindingHandler($event) { return ctx.onEnterKey($event); })("keydown.enter", function SortableColumn_keydown_enter_HostBindingHandler($event) { return ctx.onEnterKey($event); });
         } if (rf & 2) {
-            i0.ɵɵattribute("tabindex", ctx.isEnabled() ? "0" : null)("role", "columnheader")("aria-sort", ctx.sortOrder);
+            i0.ɵɵattribute("tabindex", ctx.isEnabled() ? "0" : null)("role", ctx.role)("aria-sort", ctx.sortOrder);
             i0.ɵɵclassProp("p-datatable-sortable-column", ctx.isEnabled())("p-datatable-column-sorted", ctx.sorted);
         } }, inputs: { field: [0, "pSortableColumn", "field"], pSortableColumnDisabled: [2, "pSortableColumnDisabled", "pSortableColumnDisabled", booleanAttribute] }, features: [i0.ɵɵInputTransformsFeature] });
 }
@@ -5826,13 +5590,7 @@ class SortableColumn {
         type: Directive,
         args: [{
                 selector: '[pSortableColumn]',
-                host: {
-                    '[class.p-datatable-sortable-column]': 'isEnabled()',
-                    '[class.p-datatable-column-sorted]': 'sorted',
-                    '[attr.tabindex]': 'isEnabled() ? "0" : null',
-                    '[attr.role]': '"columnheader"',
-                    '[attr.aria-sort]': 'sortOrder'
-                }
+                host: { '[class.p-datatable-sortable-column]': 'isEnabled()', '[class.p-datatable-column-sorted]': 'sorted', '[attr.tabindex]': 'isEnabled() ? "0" : null', '[attr.role]': 'role', '[attr.aria-sort]': 'sortOrder' }
             }]
     }], () => [{ type: Table }], { field: [{
             type: Input,
@@ -5971,11 +5729,7 @@ class SelectableRow {
     }
     onClick(event) {
         if (this.isEnabled()) {
-            this.dt.handleRowClick({
-                originalEvent: event,
-                rowData: this.data,
-                rowIndex: this.index
-            });
+            this.dt.handleRowClick({ originalEvent: event, rowData: this.data, rowIndex: this.index });
         }
     }
     onTouchEnd(event) {
@@ -6007,7 +5761,7 @@ class SelectableRow {
                 if (event.code === 'KeyA' && (event.metaKey || event.ctrlKey) && this.dt.selectionMode === 'multiple') {
                     const data = this.dt.dataToRender(this.dt.processedData);
                     this.dt.selection = [...data];
-                    this.dt.selectRange(event, data.length - 1);
+                    this.dt.selectRange(event, data.length - 1, true);
                     event.preventDefault();
                 }
                 break;
@@ -6039,11 +5793,7 @@ class SelectableRow {
         if (!this.isEnabled()) {
             return;
         }
-        this.dt.handleRowClick({
-            originalEvent: event,
-            rowData: this.data,
-            rowIndex: this.index
-        });
+        this.dt.handleRowClick({ originalEvent: event, rowData: this.data, rowIndex: this.index });
     }
     onEndKey(event) {
         const lastRow = this.findLastSelectableRow();
@@ -6111,7 +5861,7 @@ class SelectableRow {
     findNextSelectableRow(row) {
         let nextRow = row.nextElementSibling;
         if (nextRow) {
-            if (DomHandler.hasClass(nextRow, 'p-selectable-row'))
+            if (DomHandler.hasClass(nextRow, 'p-datatable-selectable-row'))
                 return nextRow;
             else
                 return this.findNextSelectableRow(nextRow);
@@ -6123,7 +5873,7 @@ class SelectableRow {
     findPrevSelectableRow(row) {
         let prevRow = row.previousElementSibling;
         if (prevRow) {
-            if (DomHandler.hasClass(prevRow, 'p-selectable-row'))
+            if (DomHandler.hasClass(prevRow, 'p-datatable-selectable-row'))
                 return prevRow;
             else
                 return this.findPrevSelectableRow(prevRow);
@@ -6150,15 +5900,7 @@ class SelectableRow {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectableRow, [{
         type: Directive,
-        args: [{
-                selector: '[pSelectableRow]',
-                host: {
-                    '[class.p-datatable-selectable-row]': 'isEnabled()',
-                    '[class.p-datatable-row-selected]': 'selected',
-                    '[attr.tabindex]': 'setRowTabIndex()',
-                    '[attr.data-p-selectable-row]': 'true'
-                }
-            }]
+        args: [{ selector: '[pSelectableRow]', host: { '[class.p-datatable-selectable-row]': 'isEnabled()', '[class.p-datatable-row-selected]': 'selected', '[attr.tabindex]': 'setRowTabIndex()', '[attr.data-p-selectable-row]': 'true' } }]
     }], () => [{ type: Table }, { type: TableService }, { type: i0.ElementRef }], { data: [{
             type: Input,
             args: ['pSelectableRow']
@@ -6202,11 +5944,7 @@ class SelectableRowDblClick {
     }
     onClick(event) {
         if (this.isEnabled()) {
-            this.dt.handleRowClick({
-                originalEvent: event,
-                rowData: this.data,
-                rowIndex: this.index
-            });
+            this.dt.handleRowClick({ originalEvent: event, rowData: this.data, rowIndex: this.index });
         }
     }
     isEnabled() {
@@ -6226,13 +5964,7 @@ class SelectableRowDblClick {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectableRowDblClick, [{
         type: Directive,
-        args: [{
-                selector: '[pSelectableRowDblClick]',
-                host: {
-                    '[class.p-selectable-row]': 'isEnabled()',
-                    '[class.p-highlight]': 'selected'
-                }
-            }]
+        args: [{ selector: '[pSelectableRowDblClick]', host: { '[class.p-selectable-row]': 'isEnabled()', '[class.p-highlight]': 'selected' } }]
     }], () => [{ type: Table }, { type: TableService }], { data: [{
             type: Input,
             args: ['pSelectableRowDblClick']
@@ -6267,11 +5999,7 @@ class ContextMenuRow {
     }
     onContextMenu(event) {
         if (this.isEnabled()) {
-            this.dt.handleRowRightClick({
-                originalEvent: event,
-                rowData: this.data,
-                rowIndex: this.index
-            });
+            this.dt.handleRowRightClick({ originalEvent: event, rowData: this.data, rowIndex: this.index });
             this.el.nativeElement.focus();
             event.preventDefault();
         }
@@ -6294,13 +6022,7 @@ class ContextMenuRow {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuRow, [{
         type: Directive,
-        args: [{
-                selector: '[pContextMenuRow]',
-                host: {
-                    '[class.p-highlight-contextmenu]': 'selected',
-                    '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
-                }
-            }]
+        args: [{ selector: '[pContextMenuRow]', host: { '[class.p-highlight-contextmenu]': 'selected', '[attr.tabindex]': 'isEnabled() ? 0 : undefined' } }]
     }], () => [{ type: Table }, { type: TableService }, { type: i0.ElementRef }], { data: [{
             type: Input,
             args: ['pContextMenuRow']
@@ -6337,9 +6059,7 @@ class RowToggler {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RowToggler, [{
         type: Directive,
-        args: [{
-                selector: '[pRowToggler]'
-            }]
+        args: [{ selector: '[pRowToggler]' }]
     }], () => [{ type: Table }], { data: [{
             type: Input,
             args: ['pRowToggler']
@@ -6450,12 +6170,7 @@ class ResizableColumn {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResizableColumn, [{
         type: Directive,
-        args: [{
-                selector: '[pResizableColumn]',
-                host: {
-                    class: 'p-datatable-resizable-column'
-                }
-            }]
+        args: [{ selector: '[pResizableColumn]', host: { class: 'p-datatable-resizable-column' } }]
     }], () => [{ type: Document, decorators: [{
                 type: Inject,
                 args: [DOCUMENT]
@@ -6559,12 +6274,7 @@ class ReorderableColumn {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReorderableColumn, [{
         type: Directive,
-        args: [{
-                selector: '[pReorderableColumn]',
-                host: {
-                    class: 'p-datatable-reorderable-column'
-                }
-            }]
+        args: [{ selector: '[pReorderableColumn]', host: { class: 'p-datatable-reorderable-column' } }]
     }], () => [{ type: undefined, decorators: [{
                 type: Inject,
                 args: [PLATFORM_ID]
@@ -6620,11 +6330,7 @@ class EditableColumn {
     openCell() {
         this.dt.updateEditingCell(this.el.nativeElement, this.data, this.field, this.rowIndex);
         DomHandler.addClass(this.el.nativeElement, 'p-cell-editing');
-        this.dt.onEditInit.emit({
-            field: this.field,
-            data: this.data,
-            index: this.rowIndex
-        });
+        this.dt.onEditInit.emit({ field: this.field, data: this.data, index: this.rowIndex });
         this.zone.runOutsideAngular(() => {
             setTimeout(() => {
                 let focusCellSelector = this.pFocusCellSelector || 'input, textarea, select';
@@ -6642,12 +6348,7 @@ class EditableColumn {
         this.dt.overlaySubscription = this.dt.overlayService.clickObservable.subscribe(this.overlayEventListener);
     }
     closeEditingCell(completed, event) {
-        const eventData = {
-            field: this.dt.editingCellField,
-            data: this.dt.editingCellData,
-            originalEvent: event,
-            index: this.dt.editingCellRowIndex
-        };
+        const eventData = { field: this.dt.editingCellField, data: this.dt.editingCellData, originalEvent: event, index: this.dt.editingCellRowIndex };
         if (completed) {
             this.dt.onEditComplete.emit(eventData);
         }
@@ -6867,9 +6568,7 @@ class EditableColumn {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditableColumn, [{
         type: Directive,
-        args: [{
-                selector: '[pEditableColumn]'
-            }]
+        args: [{ selector: '[pEditableColumn]' }]
     }], () => [{ type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }], { data: [{
             type: Input,
             args: ['pEditableColumn']
@@ -6933,9 +6632,7 @@ class EditableRow {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditableRow, [{
         type: Directive,
-        args: [{
-                selector: '[pEditableRow]'
-            }]
+        args: [{ selector: '[pEditableRow]' }]
     }], () => [{ type: i0.ElementRef }], { data: [{
             type: Input,
             args: ['pEditableRow']
@@ -6961,12 +6658,7 @@ class InitEditableRow {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InitEditableRow, [{
         type: Directive,
-        args: [{
-                selector: '[pInitEditableRow]',
-                host: {
-                    class: 'p-datatable-row-editor-init'
-                }
-            }]
+        args: [{ selector: '[pInitEditableRow]', host: { class: 'p-datatable-row-editor-init' } }]
     }], () => [{ type: Table }, { type: EditableRow }], { onClick: [{
             type: HostListener,
             args: ['click', ['$event']]
@@ -6989,12 +6681,7 @@ class SaveEditableRow {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SaveEditableRow, [{
         type: Directive,
-        args: [{
-                selector: '[pSaveEditableRow]',
-                host: {
-                    class: 'p-datatable-row-editor-save'
-                }
-            }]
+        args: [{ selector: '[pSaveEditableRow]', host: { class: 'p-datatable-row-editor-save' } }]
     }], () => [{ type: Table }, { type: EditableRow }], { onClick: [{
             type: HostListener,
             args: ['click', ['$event']]
@@ -7017,12 +6704,7 @@ class CancelEditableRow {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CancelEditableRow, [{
         type: Directive,
-        args: [{
-                selector: '[pCancelEditableRow]',
-                host: {
-                    class: 'p-datatable-row-editor-cancel'
-                }
-            }]
+        args: [{ selector: '[pCancelEditableRow]', host: { class: 'p-datatable-row-editor-cancel' } }]
     }], () => [{ type: Table }, { type: EditableRow }], { onClick: [{
             type: HostListener,
             args: ['click', ['$event']]
@@ -7130,10 +6812,7 @@ class TableRadioButton {
     }
     onClick(event) {
         if (!this.disabled) {
-            this.dt.toggleRowWithRadio({
-                originalEvent: event.originalEvent,
-                rowIndex: this.index
-            }, this.value);
+            this.dt.toggleRowWithRadio({ originalEvent: event.originalEvent, rowIndex: this.index }, this.value);
             this.inputViewChild?.inputViewChild.nativeElement?.focus();
         }
         DomHandler.clearSelection();
@@ -7216,10 +6895,7 @@ class TableCheckbox {
     }
     onClick(event) {
         if (!this.disabled) {
-            this.dt.toggleRowWithCheckbox({
-                originalEvent: event,
-                rowIndex: this.index
-            }, this.value);
+            this.dt.toggleRowWithCheckbox({ originalEvent: event, rowIndex: this.index }, this.value);
         }
         DomHandler.clearSelection();
     }
@@ -7401,12 +7077,7 @@ class ReorderableRowHandle {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReorderableRowHandle, [{
         type: Directive,
-        args: [{
-                selector: '[pReorderableRowHandle]',
-                host: {
-                    class: 'p-datatable-reorderable-row-handle'
-                }
-            }]
+        args: [{ selector: '[pReorderableRowHandle]', host: { class: 'p-datatable-reorderable-row-handle' } }]
     }], () => [{ type: i0.ElementRef }], null); })();
 class ReorderableRow {
     renderer;
@@ -7511,9 +7182,7 @@ class ReorderableRow {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReorderableRow, [{
         type: Directive,
-        args: [{
-                selector: '[pReorderableRow]'
-            }]
+        args: [{ selector: '[pReorderableRow]' }]
     }], () => [{ type: i0.Renderer2 }, { type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }], { index: [{
             type: Input,
             args: ['pReorderableRow']
@@ -7673,15 +7342,8 @@ class ColumnFilter extends BaseComponent {
      */
     filterButtonProps = {
         filter: { severity: 'secondary', text: true, rounded: true },
-        inline: {
-            clear: { severity: 'secondary', text: true, rounded: true }
-        },
-        popover: {
-            addRule: { severity: 'info', text: true, size: 'small' },
-            removeRule: { severity: 'danger', text: true, size: 'small' },
-            apply: { size: 'small' },
-            clear: { outlined: true, size: 'small' }
-        }
+        inline: { clear: { severity: 'secondary', text: true, rounded: true } },
+        popover: { addRule: { severity: 'info', text: true, size: 'small' }, removeRule: { severity: 'danger', text: true, size: 'small' }, apply: { size: 'small' }, clear: { outlined: true, size: 'small' } }
     };
     /**
      * Callback to invoke on overlay is shown.
@@ -7791,22 +7453,13 @@ class ColumnFilter extends BaseComponent {
         this.matchModes =
             this.matchModeOptions ||
                 this.config.filterMatchModeOptions[this.type]?.map((key) => {
-                    return {
-                        label: this.config.getTranslation(key),
-                        value: key
-                    };
+                    return { label: this.config.getTranslation(key), value: key };
                 });
     }
     generateOperatorOptions() {
         this.operatorOptions = [
-            {
-                label: this.config.getTranslation(TranslationKeys.MATCH_ALL),
-                value: FilterOperator.AND
-            },
-            {
-                label: this.config.getTranslation(TranslationKeys.MATCH_ANY),
-                value: FilterOperator.OR
-            }
+            { label: this.config.getTranslation(TranslationKeys.MATCH_ALL), value: FilterOperator.AND },
+            { label: this.config.getTranslation(TranslationKeys.MATCH_ANY), value: FilterOperator.OR }
         ];
     }
     ngAfterContentInit() {
@@ -7841,16 +7494,7 @@ class ColumnFilter extends BaseComponent {
     }
     initFieldFilterConstraint() {
         let defaultMatchMode = this.getDefaultMatchMode();
-        this.dt.filters[this.field] =
-            this.display == 'row'
-                ? { value: null, matchMode: defaultMatchMode }
-                : [
-                    {
-                        value: null,
-                        matchMode: defaultMatchMode,
-                        operator: this.operator
-                    }
-                ];
+        this.dt.filters[this.field] = this.display == 'row' ? { value: null, matchMode: defaultMatchMode } : [{ value: null, matchMode: defaultMatchMode, operator: this.operator }];
     }
     onMenuMatchModeChange(value, filterMeta) {
         filterMeta.matchMode = value;
@@ -7897,11 +7541,7 @@ class ColumnFilter extends BaseComponent {
         return this.dt.filters[this.field].matchMode === matchMode;
     }
     addConstraint() {
-        this.dt.filters[this.field].push({
-            value: null,
-            matchMode: this.getDefaultMatchMode(),
-            operator: this.getDefaultOperator()
-        });
+        this.dt.filters[this.field].push({ value: null, matchMode: this.getDefaultMatchMode(), operator: this.getDefaultOperator() });
         DomHandler.focus(this.clearButtonViewChild.nativeElement);
     }
     removeConstraint(filterMeta) {
@@ -8169,7 +7809,7 @@ class ColumnFilter extends BaseComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.icon = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearButtonViewChild = _t.first);
-        } }, inputs: { field: "field", type: "type", display: "display", showMenu: [2, "showMenu", "showMenu", booleanAttribute], matchMode: "matchMode", operator: "operator", showOperator: [2, "showOperator", "showOperator", booleanAttribute], showClearButton: [2, "showClearButton", "showClearButton", booleanAttribute], showApplyButton: [2, "showApplyButton", "showApplyButton", booleanAttribute], showMatchModes: [2, "showMatchModes", "showMatchModes", booleanAttribute], showAddButton: [2, "showAddButton", "showAddButton", booleanAttribute], hideOnClear: [2, "hideOnClear", "hideOnClear", booleanAttribute], placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: [2, "maxConstraints", "maxConstraints", numberAttribute], minFractionDigits: [2, "minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: [2, "maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: [2, "useGrouping", "useGrouping", booleanAttribute], showButtons: [2, "showButtons", "showButtons", booleanAttribute], ariaLabel: "ariaLabel", filterButtonProps: "filterButtonProps" }, outputs: { onShow: "onShow", onHide: "onHide" }, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 5, consts: [["icon", ""], ["menu", ""], ["clearBtn", ""], [3, "ngClass"], ["class", "p-fluid", 3, "type", "field", "ariaLabel", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", 4, "ngIf"], [3, "styleClass", "ariaLabel", "buttonProps", "click", "keydown", 4, "ngIf"], [3, "styleClass", "ariaLabel", "buttonProps", "onClick", 4, "ngIf"], ["role", "dialog", 3, "ngClass", "id", "click", "keydown.escape", 4, "ngIf"], [1, "p-fluid", 3, "type", "field", "ariaLabel", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons"], [3, "click", "keydown", "styleClass", "ariaLabel", "buttonProps"], [4, "ngIf"], ["class", "pi-filter-icon", 4, "ngIf"], [1, "pi-filter-icon"], [4, "ngTemplateOutlet"], [3, "onClick", "styleClass", "ariaLabel", "buttonProps"], ["role", "dialog", 3, "click", "keydown.escape", "ngClass", "id"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "ngClass", 4, "ngIf", "ngIfElse"], [3, "ngClass", "p-datatable-filter-constraint-selected", "click", "keydown", "keydown.enter", 4, "ngFor", "ngForOf"], [3, "click", "keydown", "keydown.enter", "ngClass"], [3, "ngClass", 4, "ngIf"], [3, "ngClass", 4, "ngFor", "ngForOf"], [3, "outlined", "label", "buttonProps", "onClick", 4, "ngIf"], ["size", "small", 3, "label", "buttonProps", "onClick", 4, "ngIf"], [3, "ngModelChange", "options", "ngModel", "styleClass"], [3, "options", "ngModel", "styleClass", "ngModelChange", 4, "ngIf"], [3, "type", "field", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"], ["severity", "danger", "size", "small", 3, "styleClass", "text", "ariaLabel", "label", "buttonProps", "onClick", 4, "ngIf"], ["severity", "danger", "size", "small", 3, "onClick", "styleClass", "text", "ariaLabel", "label", "buttonProps"], ["type", "button", "size", "small", 3, "onClick", "label", "styleClass", "text", "buttonProps"], [3, "onClick", "outlined", "label", "buttonProps"], ["size", "small", 3, "onClick", "label", "buttonProps"]], template: function ColumnFilter_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { field: "field", type: "type", display: "display", showMenu: [2, "showMenu", "showMenu", booleanAttribute], matchMode: "matchMode", operator: "operator", showOperator: [2, "showOperator", "showOperator", booleanAttribute], showClearButton: [2, "showClearButton", "showClearButton", booleanAttribute], showApplyButton: [2, "showApplyButton", "showApplyButton", booleanAttribute], showMatchModes: [2, "showMatchModes", "showMatchModes", booleanAttribute], showAddButton: [2, "showAddButton", "showAddButton", booleanAttribute], hideOnClear: [2, "hideOnClear", "hideOnClear", booleanAttribute], placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: [2, "maxConstraints", "maxConstraints", numberAttribute], minFractionDigits: [2, "minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: [2, "maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: [2, "useGrouping", "useGrouping", booleanAttribute], showButtons: [2, "showButtons", "showButtons", booleanAttribute], ariaLabel: "ariaLabel", filterButtonProps: "filterButtonProps" }, outputs: { onShow: "onShow", onHide: "onHide" }, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 5, consts: [["icon", ""], ["menu", ""], ["clearBtn", ""], [3, "ngClass"], ["class", "p-fluid", 3, "type", "field", "ariaLabel", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", 4, "ngIf"], [3, "styleClass", "ariaLabel", "buttonProps", "click", "keydown", 4, "ngIf"], [3, "styleClass", "ariaLabel", "buttonProps", "onClick", 4, "ngIf"], ["role", "dialog", 3, "ngClass", "id", "click", "keydown.escape", 4, "ngIf"], [1, "p-fluid", 3, "type", "field", "ariaLabel", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons"], [3, "click", "keydown", "styleClass", "ariaLabel", "buttonProps"], [4, "ngIf"], ["class", "pi-filter-icon", 4, "ngIf"], [1, "pi-filter-icon"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "onClick", "styleClass", "ariaLabel", "buttonProps"], [4, "ngTemplateOutlet"], ["role", "dialog", 3, "click", "keydown.escape", "ngClass", "id"], [3, "ngClass", 4, "ngIf", "ngIfElse"], [3, "ngClass", "p-datatable-filter-constraint-selected", "click", "keydown", "keydown.enter", 4, "ngFor", "ngForOf"], [3, "click", "keydown", "keydown.enter", "ngClass"], [3, "ngClass", 4, "ngIf"], [3, "ngClass", 4, "ngFor", "ngForOf"], [3, "outlined", "label", "buttonProps", "onClick", 4, "ngIf"], ["size", "small", 3, "label", "buttonProps", "onClick", 4, "ngIf"], [3, "ngModelChange", "options", "ngModel", "styleClass"], [3, "options", "ngModel", "styleClass", "ngModelChange", 4, "ngIf"], [3, "type", "field", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"], ["severity", "danger", "size", "small", 3, "styleClass", "text", "ariaLabel", "label", "buttonProps", "onClick", 4, "ngIf"], ["severity", "danger", "size", "small", 3, "onClick", "styleClass", "text", "ariaLabel", "label", "buttonProps"], ["type", "button", "size", "small", 3, "onClick", "label", "styleClass", "text", "buttonProps"], [3, "onClick", "outlined", "label", "buttonProps"], ["size", "small", 3, "onClick", "label", "buttonProps"]], template: function ColumnFilter_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 3);
             i0.ɵɵtemplate(1, ColumnFilter_p_columnFilterFormElement_1_Template, 1, 16, "p-columnFilterFormElement", 4)(2, ColumnFilter_p_button_2_Template, 3, 6, "p-button", 5)(3, ColumnFilter_p_button_3_Template, 3, 3, "p-button", 6)(4, ColumnFilter_div_4_Template, 6, 14, "div", 7);
             i0.ɵɵelementEnd();
@@ -8201,7 +7841,7 @@ class ColumnFilter extends BaseComponent {
                 [field]="field"
                 [ariaLabel]="ariaLabel"
                 [filterConstraint]="dt.filters[field]"
-                [filterTemplate]="filterTemplate"
+                [filterTemplate]="filterTemplate || _filterTemplate"
                 [placeholder]="placeholder"
                 [minFractionDigits]="minFractionDigits"
                 [maxFractionDigits]="maxFractionDigits"
@@ -8228,7 +7868,7 @@ class ColumnFilter extends BaseComponent {
                 <ng-template #icon>
                     <FilterIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" />
                     <span class="pi-filter-icon" *ngIf="filterIconTemplate || _filterIconTemplate">
-                        <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
+                        <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate; context: { hasFilter: hasFilter }"></ng-template>
                     </span>
                 </ng-template>
             </p-button>
@@ -8561,7 +8201,7 @@ class ColumnFilterFormElement {
                     [currencyDisplay]="currencyDisplay"
                     [useGrouping]="useGrouping"
                 ></p-inputNumber>
-                <p-checkbox [indeterminate]="true" [binary]="true" *ngSwitchCase="'boolean'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" />
+                <p-checkbox [indeterminate]="filterConstraint?.value === null" [binary]="true" *ngSwitchCase="'boolean'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" />
 
                 <p-datepicker [ariaLabel]="ariaLabel" *ngSwitchCase="'date'" [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" appendTo="body"></p-datepicker>
             </ng-container>