primeng 18.0.3-lts → 18.0.5-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, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, ContentChild, 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, PLATFORM_ID, Inject, Optional, forwardRef, ElementRef, NgModule } from '@angular/core';
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from 'primeng/api';
@@ -1724,7 +1724,7 @@ 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");
@@ -3103,10 +3103,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 +3137,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 +3158,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 +3184,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 +3209,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 +3227,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 +3239,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 +3325,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 +3350,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 +3359,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 +3376,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 +3384,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 +3409,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,11 +3439,7 @@ 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 });
             }
         }
     }
@@ -3539,11 +3477,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 +3503,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 +3546,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 +3555,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 +3571,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 +3582,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 +3608,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 +3726,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 +3833,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 +3847,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 +3863,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 +3918,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 +3959,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 +4032,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 +4106,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 +4199,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);
@@ -4788,9 +4662,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 +4677,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 +4716,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 +5311,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 +5319,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 +5343,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 +5353,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 +5380,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 +5430,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;
@@ -5736,13 +5500,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: [{
@@ -5789,10 +5547,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();
         }
     }
@@ -5826,13 +5581,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]': '"columnheader"', '[attr.aria-sort]': 'sortOrder' }
             }]
     }], () => [{ type: Table }], { field: [{
             type: Input,
@@ -5971,11 +5720,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) {
@@ -6039,11 +5784,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();
@@ -6150,15 +5891,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 +5935,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 +5955,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 +5990,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 +6013,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 +6050,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 +6161,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 +6265,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 +6321,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 +6339,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 +6559,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 +6623,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 +6649,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 +6672,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 +6695,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 +6803,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 +6886,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 +7068,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 +7173,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 +7333,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 +7444,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 +7485,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 +7532,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) {
@@ -8201,7 +7832,7 @@ class ColumnFilter extends BaseComponent {
                 [field]="field"
                 [ariaLabel]="ariaLabel"
                 [filterConstraint]="dt.filters[field]"
-                [filterTemplate]="filterTemplate"
+                [filterTemplate]="filterTemplate || _filterTemplate"
                 [placeholder]="placeholder"
                 [minFractionDigits]="minFractionDigits"
                 [maxFractionDigits]="maxFractionDigits"