primeng 11.4.4 → 12.0.1

package/fesm2015/primeng-table.js

@@ -1,18 +1,30 @@
-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, NgZone, ChangeDetectorRef, Input, Output, ViewChild, ContentChildren, Directive, HostListener, Optional, Renderer2, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, Directive, HostListener, Optional, NgModule } from '@angular/core';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i9 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { FilterOperator, FilterMatchMode, FilterService, PrimeTemplate, TranslationKeys, PrimeNGConfig, SharedModule } from 'primeng/api';
+import * as i1 from 'primeng/api';
+import { FilterOperator, FilterMatchMode, PrimeTemplate, TranslationKeys, SharedModule } from 'primeng/api';
+import * as i2 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
+import * as i8 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
+import * as i11 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { SelectButtonModule } from 'primeng/selectbutton';
+import * as i6 from 'primeng/tristatecheckbox';
 import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
+import * as i7 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
+import * as i5 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
+import * as i10 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ObjectUtils } from 'primeng/utils';
 import { Subject } from 'rxjs';
+import * as i4 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import { trigger, transition, style, animate } from '@angular/animations';
 
@@ -55,9 +67,11 @@ class TableService {
         this.columnsSource.next(columns);
     }
 }
-TableService.decorators = [
-    { type: Injectable }
-];
+TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableService, decorators: [{
+            type: Injectable
+        }] });
 class Table {
     constructor(el, zone, tableService, cd, filterService) {
         this.el = el;
@@ -1261,9 +1275,10 @@ class Table {
         let scrollableBodyTable = DomHandler.findSingle(scrollableBody, '.p-datatable-scrollable-body table') || DomHandler.findSingle(scrollableView, 'cdk-virtual-scroll-viewport table');
         let scrollableHeaderTable = DomHandler.findSingle(scrollableHeader, 'table.p-datatable-scrollable-header-table');
         let scrollableFooterTable = DomHandler.findSingle(scrollableFooter, 'table.p-datatable-scrollable-footer-table');
+        let frozenWidth = this.frozenWidth ? parseInt(this.frozenWidth, 10) : 0;
         const scrollableBodyTableWidth = column ? scrollableBodyTable.offsetWidth + delta : newColumnWidth;
         const scrollableHeaderTableWidth = column ? scrollableHeaderTable.offsetWidth + delta : newColumnWidth;
-        const isContainerInViewport = this.containerViewChild.nativeElement.offsetWidth >= scrollableBodyTableWidth;
+        const isContainerInViewport = this.containerViewChild.nativeElement.offsetWidth - frozenWidth >= scrollableBodyTableWidth;
         let setWidth = (container, table, width, isContainerInViewport) => {
             if (container && table) {
                 container.style.width = isContainerInViewport ? width + DomHandler.calculateScrollbarWidth(scrollableBody) + 'px' : 'auto';
@@ -1637,10 +1652,65 @@ class Table {
         this.initialized = null;
     }
 }
-Table.decorators = [
-    { type: Component, args: [{
-                selector: 'p-table',
-                template: `
+Table.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: Table, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: TableService }, { token: i0.ChangeDetectorRef }, { token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: Table, selector: "p-table", inputs: { frozenColumns: "frozenColumns", frozenValue: "frozenValue", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: "paginator", pageLinks: "pageLinks", rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: "alwaysShowPaginator", paginatorPosition: "paginatorPosition", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: "showCurrentPageReport", showJumpToPageDropdown: "showJumpToPageDropdown", showFirstLastIcon: "showFirstLastIcon", showPageLinks: "showPageLinks", defaultSortOrder: "defaultSortOrder", sortMode: "sortMode", resetPageOnSort: "resetPageOnSort", selectionMode: "selectionMode", contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: "metaKeySelection", rowTrackBy: "rowTrackBy", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: "filterDelay", filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollDelay: "virtualScrollDelay", virtualRowHeight: "virtualRowHeight", frozenWidth: "frozenWidth", responsive: "responsive", contextMenu: "contextMenu", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode", reorderableColumns: "reorderableColumns", loading: "loading", loadingIcon: "loadingIcon", showLoader: "showLoader", rowHover: "rowHover", customSort: "customSort", showInitialSortBadge: "showInitialSortBadge", autoLayout: "autoLayout", exportFunction: "exportFunction", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection" }, outputs: { selectionChange: "selectionChange", contextMenuSelectionChange: "contextMenuSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onPage: "onPage", onSort: "onSort", onFilter: "onFilter", onLazyLoad: "onLazyLoad", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onContextMenuSelect: "onContextMenuSelect", onColResize: "onColResize", onColReorder: "onColReorder", onRowReorder: "onRowReorder", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", sortFunction: "sortFunction", firstChange: "firstChange", rowsChange: "rowsChange", onStateSave: "onStateSave", onStateRestore: "onStateRestore" }, providers: [TableService], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "scrollableViewChild", first: true, predicate: ["scrollableView"], descendants: true }, { propertyName: "scrollableFrozenViewChild", first: true, predicate: ["scrollableFrozenView"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div #container [ngStyle]="style" [class]="styleClass" data-scrollselectors=".p-datatable-scrollable-body, .p-datatable-unfrozen-view .p-datatable-scrollable-body"
+            [ngClass]="{'p-datatable p-component': true,
+                'p-datatable-hoverable-rows': (rowHover||selectionMode),
+                'p-datatable-auto-layout': autoLayout,
+                'p-datatable-resizable': resizableColumns,
+                'p-datatable-resizable-fit': (resizableColumns && columnResizeMode === 'fit'),
+                'p-datatable-scrollable': scrollable,
+                'p-datatable-flex-scrollable': (scrollable && scrollHeight === 'flex'),
+                'p-datatable-responsive': responsive}">
+            <div class="p-datatable-loading-overlay p-component-overlay" *ngIf="loading && showLoader">
+                <i [class]="'p-datatable-loading-icon pi-spin ' + loadingIcon"></i>
+            </div>
+            <div *ngIf="captionTemplate" class="p-datatable-header">
+                <ng-container *ngTemplateOutlet="captionTemplate"></ng-container>
+            </div>
+            <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="p-paginator-top" [alwaysShow]="alwaysShowPaginator"
+                (onPageChange)="onPageChange($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition =='both')"
+                [templateLeft]="paginatorLeftTemplate" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo" [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+                [currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks"></p-paginator>
+
+            <div class="p-datatable-wrapper" *ngIf="!scrollable">
+                <table role="grid" #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
+                    <ng-container *ngTemplateOutlet="colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <thead class="p-datatable-thead">
+                        <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: columns}"></ng-container>
+                    </thead>
+                    <tbody class="p-datatable-tbody" [pTableBody]="columns" [pTableBodyTemplate]="bodyTemplate"></tbody>
+                    <tfoot *ngIf="footerTemplate" class="p-datatable-tfoot">
+                        <ng-container *ngTemplateOutlet="footerTemplate; context {$implicit: columns}"></ng-container>
+                    </tfoot>
+                </table>
+            </div>
+
+            <div class="p-datatable-scrollable-wrapper" *ngIf="scrollable">
+               <div class="p-datatable-scrollable-view p-datatable-frozen-view" *ngIf="frozenColumns||frozenBodyTemplate" #scrollableFrozenView [pScrollableView]="frozenColumns" [frozen]="true" [ngStyle]="{width: frozenWidth}" [scrollHeight]="scrollHeight"></div>
+               <div class="p-datatable-scrollable-view" #scrollableView [pScrollableView]="columns" [frozen]="false" [scrollHeight]="scrollHeight" [ngStyle]="{left: frozenWidth, width: 'calc(100% - '+frozenWidth+')'}"></div>
+            </div>
+
+            <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="p-paginator-bottom" [alwaysShow]="alwaysShowPaginator"
+                (onPageChange)="onPageChange($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')"
+                [templateLeft]="paginatorLeftTemplate" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo" [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+                [currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks"></p-paginator>
+
+            <div *ngIf="summaryTemplate" class="p-datatable-footer">
+                <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
+            </div>
+
+            <div #resizeHelper class="p-column-resizer-helper" style="display:none" *ngIf="resizableColumns"></div>
+            <span #reorderIndicatorUp class="pi pi-arrow-down p-datatable-reorder-indicator-up" style="display:none" *ngIf="reorderableColumns"></span>
+            <span #reorderIndicatorDown class="pi pi-arrow-up p-datatable-reorder-indicator-down" style="display:none" *ngIf="reorderableColumns"></span>
+        </div>
+    `, isInline: true, styles: [".p-datatable{position:relative}.p-datatable table{border-collapse:collapse;width:100%;table-layout:fixed}.p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-badge,.p-datatable .p-sortable-column .p-sortable-column-icon{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.p-datatable-auto-layout>.p-datatable-wrapper{overflow-x:auto}.p-datatable-auto-layout>.p-datatable-wrapper>table{table-layout:auto}.p-datatable-hoverable-rows .p-selectable-row{cursor:pointer}.p-datatable-scrollable-wrapper{position:relative}.p-datatable-scrollable-footer,.p-datatable-scrollable-header{overflow:hidden}.p-datatable-scrollable-body{overflow:auto;position:relative}.p-datatable-scrollable-body>table>.p-datatable-tbody>tr:first-child>td{border-top:0}.p-datatable-virtual-table{position:absolute}.p-datatable-frozen-view .p-datatable-scrollable-body{overflow:hidden}.p-datatable-frozen-view>.p-datatable-scrollable-body>table>.p-datatable-tbody>tr>td:last-child{border-right:0}.p-datatable-unfrozen-view{position:absolute;top:0}.p-datatable-flex-scrollable,.p-datatable-flex-scrollable .p-datatable-scrollable-view,.p-datatable-flex-scrollable .p-datatable-scrollable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.p-datatable-flex-scrollable .p-datatable-scrollable-body,.p-datatable-flex-scrollable .p-datatable-virtual-scrollable-body{flex:1}.p-datatable-resizable>.p-datatable-wrapper{overflow-x:auto}.p-datatable-resizable .p-datatable-tbody>tr>td,.p-datatable-resizable .p-datatable-tfoot>tr>td,.p-datatable-resizable .p-datatable-thead>tr>th{overflow:hidden;white-space:nowrap}.p-datatable-resizable .p-resizable-column{background-clip:padding-box;position:relative}.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.p-datatable .p-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.p-datatable .p-row-editor-cancel,.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-down,.p-datatable-reorder-indicator-up{position:absolute;display:none}.p-datatable-reorderablerow-handle,[pReorderableColumn]{cursor:move}.p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}.p-column-filter-row{display:flex;align-items:center;width:100%}.p-column-filter-menu{display:inline-flex}.p-column-filter-row p-columnfilterformelement{flex:1 1 auto;width:1%}.p-column-filter-clear-button,.p-column-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.p-column-filter-overlay{position:absolute}.p-column-filter-row-items{margin:0;padding:0;list-style:none}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between}.p-column-filter-buttonbar .p-button{width:auto}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{display:none}cdk-virtual-scroll-viewport{outline:0 none}@media screen and (max-width:40em){.p-datatable.p-datatable-responsive .p-datatable-tfoot>tr>td,.p-datatable.p-datatable-responsive .p-datatable-thead>tr>th{display:none!important}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td{text-align:left;display:block;width:100%;float:left;clear:left;border:0}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{padding:.4rem;min-width:30%;display:inline-block;margin:-.4em 1em -.4em -.4rem;font-weight:700}}"], components: [{ type: i0.forwardRef(function () { return i2.Paginator; }), selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { type: i0.forwardRef(function () { return TableBody; }), selector: "[pTableBody]", inputs: ["pTableBody", "pTableBodyTemplate", "frozen"] }, { type: i0.forwardRef(function () { return ScrollableView; }), selector: "[pScrollableView]", inputs: ["pScrollableView", "frozen", "scrollHeight"] }], directives: [{ type: i0.forwardRef(function () { return i3.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i3.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: Table, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-table',
+                    template: `
         <div #container [ngStyle]="style" [class]="styleClass" data-scrollselectors=".p-datatable-scrollable-body, .p-datatable-unfrozen-view .p-datatable-scrollable-body"
             [ngClass]="{'p-datatable p-component': true,
                 'p-datatable-hoverable-rows': (rowHover||selectionMode),
@@ -1693,124 +1763,226 @@ Table.decorators = [
             <span #reorderIndicatorDown class="pi pi-arrow-up p-datatable-reorder-indicator-down" style="display:none" *ngIf="reorderableColumns"></span>
         </div>
     `,
-                providers: [TableService],
-                changeDetection: ChangeDetectionStrategy.Default,
-                encapsulation: ViewEncapsulation.None,
-                styles: [".p-datatable{position:relative}.p-datatable table{border-collapse:collapse;table-layout:fixed;width:100%}.p-datatable .p-sortable-column{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-badge,.p-datatable .p-sortable-column .p-sortable-column-icon{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{align-items:center;display:inline-flex;justify-content:center}.p-datatable-auto-layout>.p-datatable-wrapper{overflow-x:auto}.p-datatable-auto-layout>.p-datatable-wrapper>table{table-layout:auto}.p-datatable-hoverable-rows .p-selectable-row{cursor:pointer}.p-datatable-scrollable-wrapper{position:relative}.p-datatable-scrollable-footer,.p-datatable-scrollable-header{overflow:hidden}.p-datatable-scrollable-body{overflow:auto;position:relative}.p-datatable-scrollable-body>table>.p-datatable-tbody>tr:first-child>td{border-top:0}.p-datatable-virtual-table{position:absolute}.p-datatable-frozen-view .p-datatable-scrollable-body{overflow:hidden}.p-datatable-frozen-view>.p-datatable-scrollable-body>table>.p-datatable-tbody>tr>td:last-child{border-right:0}.p-datatable-unfrozen-view{position:absolute;top:0}.p-datatable-flex-scrollable,.p-datatable-flex-scrollable .p-datatable-scrollable-view,.p-datatable-flex-scrollable .p-datatable-scrollable-wrapper{display:flex;flex:1;flex-direction:column;height:100%}.p-datatable-flex-scrollable .p-datatable-scrollable-body,.p-datatable-flex-scrollable .p-datatable-virtual-scrollable-body{flex:1}.p-datatable-resizable>.p-datatable-wrapper{overflow-x:auto}.p-datatable-resizable .p-datatable-tbody>tr>td,.p-datatable-resizable .p-datatable-tfoot>tr>td,.p-datatable-resizable .p-datatable-thead>tr>th{overflow:hidden;white-space:nowrap}.p-datatable-resizable .p-resizable-column{background-clip:padding-box;position:relative}.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{border:1px solid transparent;cursor:col-resize;display:block;height:100%;margin:0;padding:0;position:absolute!important;right:0;top:0;width:.5rem}.p-datatable .p-column-resizer-helper{display:none;position:absolute;width:1px;z-index:10}.p-datatable .p-row-editor-cancel,.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-toggler{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-down,.p-datatable-reorder-indicator-up{display:none;position:absolute}.p-datatable-reorderablerow-handle,[pReorderableColumn]{cursor:move}.p-datatable .p-datatable-loading-overlay{align-items:center;display:flex;justify-content:center;position:absolute;z-index:2}.p-column-filter-row{align-items:center;display:flex;width:100%}.p-column-filter-menu{display:inline-flex}.p-column-filter-row p-columnfilterformelement{flex:1 1 auto;width:1%}.p-column-filter-clear-button,.p-column-filter-menu-button{align-items:center;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;position:relative;text-decoration:none}.p-column-filter-overlay{position:absolute}.p-column-filter-row-items{list-style:none;margin:0;padding:0}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{align-items:center;display:flex;justify-content:space-between}.p-column-filter-buttonbar .p-button{width:auto}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{display:none}cdk-virtual-scroll-viewport{outline:0 none}@media screen and (max-width:40em){.p-datatable.p-datatable-responsive .p-datatable-tfoot>tr>td,.p-datatable.p-datatable-responsive .p-datatable-thead>tr>th{display:none!important}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td{border:0;clear:left;display:block;float:left;text-align:left;width:100%}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{display:inline-block;font-weight:700;margin:-.4em 1em -.4em -.4rem;min-width:30%;padding:.4rem}}"]
-            },] }
-];
-Table.ctorParameters = () => [
-    { type: ElementRef },
-    { type: NgZone },
-    { type: TableService },
-    { type: ChangeDetectorRef },
-    { type: FilterService }
-];
-Table.propDecorators = {
-    frozenColumns: [{ type: Input }],
-    frozenValue: [{ type: Input }],
-    style: [{ type: Input }],
-    styleClass: [{ type: Input }],
-    tableStyle: [{ type: Input }],
-    tableStyleClass: [{ type: Input }],
-    paginator: [{ type: Input }],
-    pageLinks: [{ type: Input }],
-    rowsPerPageOptions: [{ type: Input }],
-    alwaysShowPaginator: [{ type: Input }],
-    paginatorPosition: [{ type: Input }],
-    paginatorDropdownAppendTo: [{ type: Input }],
-    paginatorDropdownScrollHeight: [{ type: Input }],
-    currentPageReportTemplate: [{ type: Input }],
-    showCurrentPageReport: [{ type: Input }],
-    showJumpToPageDropdown: [{ type: Input }],
-    showFirstLastIcon: [{ type: Input }],
-    showPageLinks: [{ type: Input }],
-    defaultSortOrder: [{ type: Input }],
-    sortMode: [{ type: Input }],
-    resetPageOnSort: [{ type: Input }],
-    selectionMode: [{ type: Input }],
-    selectionChange: [{ type: Output }],
-    contextMenuSelection: [{ type: Input }],
-    contextMenuSelectionChange: [{ type: Output }],
-    contextMenuSelectionMode: [{ type: Input }],
-    dataKey: [{ type: Input }],
-    metaKeySelection: [{ type: Input }],
-    rowTrackBy: [{ type: Input }],
-    lazy: [{ type: Input }],
-    lazyLoadOnInit: [{ type: Input }],
-    compareSelectionBy: [{ type: Input }],
-    csvSeparator: [{ type: Input }],
-    exportFilename: [{ type: Input }],
-    filters: [{ type: Input }],
-    globalFilterFields: [{ type: Input }],
-    filterDelay: [{ type: Input }],
-    filterLocale: [{ type: Input }],
-    expandedRowKeys: [{ type: Input }],
-    editingRowKeys: [{ type: Input }],
-    rowExpandMode: [{ type: Input }],
-    scrollable: [{ type: Input }],
-    scrollHeight: [{ type: Input }],
-    virtualScroll: [{ type: Input }],
-    virtualScrollDelay: [{ type: Input }],
-    virtualRowHeight: [{ type: Input }],
-    frozenWidth: [{ type: Input }],
-    responsive: [{ type: Input }],
-    contextMenu: [{ type: Input }],
-    resizableColumns: [{ type: Input }],
-    columnResizeMode: [{ type: Input }],
-    reorderableColumns: [{ type: Input }],
-    loading: [{ type: Input }],
-    loadingIcon: [{ type: Input }],
-    showLoader: [{ type: Input }],
-    rowHover: [{ type: Input }],
-    customSort: [{ type: Input }],
-    showInitialSortBadge: [{ type: Input }],
-    autoLayout: [{ type: Input }],
-    exportFunction: [{ type: Input }],
-    stateKey: [{ type: Input }],
-    stateStorage: [{ type: Input }],
-    editMode: [{ type: Input }],
-    minBufferPx: [{ type: Input }],
-    maxBufferPx: [{ type: Input }],
-    onRowSelect: [{ type: Output }],
-    onRowUnselect: [{ type: Output }],
-    onPage: [{ type: Output }],
-    onSort: [{ type: Output }],
-    onFilter: [{ type: Output }],
-    onLazyLoad: [{ type: Output }],
-    onRowExpand: [{ type: Output }],
-    onRowCollapse: [{ type: Output }],
-    onContextMenuSelect: [{ type: Output }],
-    onColResize: [{ type: Output }],
-    onColReorder: [{ type: Output }],
-    onRowReorder: [{ type: Output }],
-    onEditInit: [{ type: Output }],
-    onEditComplete: [{ type: Output }],
-    onEditCancel: [{ type: Output }],
-    onHeaderCheckboxToggle: [{ type: Output }],
-    sortFunction: [{ type: Output }],
-    firstChange: [{ type: Output }],
-    rowsChange: [{ type: Output }],
-    onStateSave: [{ type: Output }],
-    onStateRestore: [{ type: Output }],
-    containerViewChild: [{ type: ViewChild, args: ['container',] }],
-    resizeHelperViewChild: [{ type: ViewChild, args: ['resizeHelper',] }],
-    reorderIndicatorUpViewChild: [{ type: ViewChild, args: ['reorderIndicatorUp',] }],
-    reorderIndicatorDownViewChild: [{ type: ViewChild, args: ['reorderIndicatorDown',] }],
-    tableViewChild: [{ type: ViewChild, args: ['table',] }],
-    scrollableViewChild: [{ type: ViewChild, args: ['scrollableView',] }],
-    scrollableFrozenViewChild: [{ type: ViewChild, args: ['scrollableFrozenView',] }],
-    templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
-    value: [{ type: Input }],
-    columns: [{ type: Input }],
-    first: [{ type: Input }],
-    rows: [{ type: Input }],
-    totalRecords: [{ type: Input }],
-    sortField: [{ type: Input }],
-    sortOrder: [{ type: Input }],
-    multiSortMeta: [{ type: Input }],
-    selection: [{ type: Input }]
-};
+                    providers: [TableService],
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                    styleUrls: ['./table.css']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: TableService }, { type: i0.ChangeDetectorRef }, { type: i1.FilterService }]; }, propDecorators: { frozenColumns: [{
+                type: Input
+            }], frozenValue: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], tableStyle: [{
+                type: Input
+            }], tableStyleClass: [{
+                type: Input
+            }], paginator: [{
+                type: Input
+            }], pageLinks: [{
+                type: Input
+            }], rowsPerPageOptions: [{
+                type: Input
+            }], alwaysShowPaginator: [{
+                type: Input
+            }], paginatorPosition: [{
+                type: Input
+            }], paginatorDropdownAppendTo: [{
+                type: Input
+            }], paginatorDropdownScrollHeight: [{
+                type: Input
+            }], currentPageReportTemplate: [{
+                type: Input
+            }], showCurrentPageReport: [{
+                type: Input
+            }], showJumpToPageDropdown: [{
+                type: Input
+            }], showFirstLastIcon: [{
+                type: Input
+            }], showPageLinks: [{
+                type: Input
+            }], defaultSortOrder: [{
+                type: Input
+            }], sortMode: [{
+                type: Input
+            }], resetPageOnSort: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], contextMenuSelection: [{
+                type: Input
+            }], contextMenuSelectionChange: [{
+                type: Output
+            }], contextMenuSelectionMode: [{
+                type: Input
+            }], dataKey: [{
+                type: Input
+            }], metaKeySelection: [{
+                type: Input
+            }], rowTrackBy: [{
+                type: Input
+            }], lazy: [{
+                type: Input
+            }], lazyLoadOnInit: [{
+                type: Input
+            }], compareSelectionBy: [{
+                type: Input
+            }], csvSeparator: [{
+                type: Input
+            }], exportFilename: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], globalFilterFields: [{
+                type: Input
+            }], filterDelay: [{
+                type: Input
+            }], filterLocale: [{
+                type: Input
+            }], expandedRowKeys: [{
+                type: Input
+            }], editingRowKeys: [{
+                type: Input
+            }], rowExpandMode: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], scrollHeight: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], virtualScrollDelay: [{
+                type: Input
+            }], virtualRowHeight: [{
+                type: Input
+            }], frozenWidth: [{
+                type: Input
+            }], responsive: [{
+                type: Input
+            }], contextMenu: [{
+                type: Input
+            }], resizableColumns: [{
+                type: Input
+            }], columnResizeMode: [{
+                type: Input
+            }], reorderableColumns: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], loadingIcon: [{
+                type: Input
+            }], showLoader: [{
+                type: Input
+            }], rowHover: [{
+                type: Input
+            }], customSort: [{
+                type: Input
+            }], showInitialSortBadge: [{
+                type: Input
+            }], autoLayout: [{
+                type: Input
+            }], exportFunction: [{
+                type: Input
+            }], stateKey: [{
+                type: Input
+            }], stateStorage: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], minBufferPx: [{
+                type: Input
+            }], maxBufferPx: [{
+                type: Input
+            }], onRowSelect: [{
+                type: Output
+            }], onRowUnselect: [{
+                type: Output
+            }], onPage: [{
+                type: Output
+            }], onSort: [{
+                type: Output
+            }], onFilter: [{
+                type: Output
+            }], onLazyLoad: [{
+                type: Output
+            }], onRowExpand: [{
+                type: Output
+            }], onRowCollapse: [{
+                type: Output
+            }], onContextMenuSelect: [{
+                type: Output
+            }], onColResize: [{
+                type: Output
+            }], onColReorder: [{
+                type: Output
+            }], onRowReorder: [{
+                type: Output
+            }], onEditInit: [{
+                type: Output
+            }], onEditComplete: [{
+                type: Output
+            }], onEditCancel: [{
+                type: Output
+            }], onHeaderCheckboxToggle: [{
+                type: Output
+            }], sortFunction: [{
+                type: Output
+            }], firstChange: [{
+                type: Output
+            }], rowsChange: [{
+                type: Output
+            }], onStateSave: [{
+                type: Output
+            }], onStateRestore: [{
+                type: Output
+            }], containerViewChild: [{
+                type: ViewChild,
+                args: ['container']
+            }], resizeHelperViewChild: [{
+                type: ViewChild,
+                args: ['resizeHelper']
+            }], reorderIndicatorUpViewChild: [{
+                type: ViewChild,
+                args: ['reorderIndicatorUp']
+            }], reorderIndicatorDownViewChild: [{
+                type: ViewChild,
+                args: ['reorderIndicatorDown']
+            }], tableViewChild: [{
+                type: ViewChild,
+                args: ['table']
+            }], scrollableViewChild: [{
+                type: ViewChild,
+                args: ['scrollableView']
+            }], scrollableFrozenViewChild: [{
+                type: ViewChild,
+                args: ['scrollableFrozenView']
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }], value: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], sortField: [{
+                type: Input
+            }], sortOrder: [{
+                type: Input
+            }], multiSortMeta: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }] } });
 class TableBody {
     constructor(dt, tableService, cd) {
         this.dt = dt;
@@ -1828,10 +2000,46 @@ class TableBody {
         }
     }
 }
-TableBody.decorators = [
-    { type: Component, args: [{
-                selector: '[pTableBody]',
-                template: `
+TableBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableBody, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TableBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: TableBody, selector: "[pTableBody]", inputs: { columns: ["pTableBody", "columns"], template: ["pTableBodyTemplate", "template"], frozen: "frozen" }, ngImport: i0, template: `
+        <ng-container *ngIf="!dt.expandedRowTemplate && !dt.virtualScroll">
+            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)" [ngForTrackBy]="dt.rowTrackBy">
+                <ng-container *ngTemplateOutlet="template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}"></ng-container>
+            </ng-template>
+        </ng-container>
+        <ng-container *ngIf="!dt.expandedRowTemplate && dt.virtualScroll">
+            <ng-template cdkVirtualFor let-rowData let-rowIndex="index" [cdkVirtualForOf]="dt.filteredValue||dt.value" [cdkVirtualForTrackBy]="dt.rowTrackBy" [cdkVirtualForTemplateCacheSize]="0">
+                <ng-container *ngTemplateOutlet="rowData ? template: dt.loadingBodyTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}"></ng-container>
+            </ng-template>
+        </ng-container>
+        <ng-container *ngIf="dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)">
+            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)" [ngForTrackBy]="dt.rowTrackBy">
+                <ng-container *ngTemplateOutlet="template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, expanded: dt.isRowExpanded(rowData), editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}"></ng-container>
+                <ng-container *ngIf="dt.isRowExpanded(rowData)">
+                    <ng-container *ngTemplateOutlet="dt.expandedRowTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}"></ng-container>
+                </ng-container>
+            </ng-template>
+        </ng-container>
+        <ng-container *ngIf="dt.frozenExpandedRowTemplate && frozen">
+            <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)" [ngForTrackBy]="dt.rowTrackBy">
+                <ng-container *ngTemplateOutlet="template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, expanded: dt.isRowExpanded(rowData), editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}"></ng-container>
+                <ng-container *ngIf="dt.isRowExpanded(rowData)">
+                    <ng-container *ngTemplateOutlet="dt.frozenExpandedRowTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}"></ng-container>
+                </ng-container>
+            </ng-template>
+        </ng-container>
+        <ng-container *ngIf="dt.loading">
+            <ng-container *ngTemplateOutlet="dt.loadingBodyTemplate; context: {$implicit: columns, frozen: frozen}"></ng-container>
+        </ng-container>
+        <ng-container *ngIf="dt.isEmpty() && !dt.loading">
+            <ng-container *ngTemplateOutlet="dt.emptyMessageTemplate; context: {$implicit: columns, frozen: frozen}"></ng-container>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "slice": i3.SlicePipe }, changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableBody, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[pTableBody]',
+                    template: `
         <ng-container *ngIf="!dt.expandedRowTemplate && !dt.virtualScroll">
             <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)" [ngForTrackBy]="dt.rowTrackBy">
                 <ng-container *ngTemplateOutlet="template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}"></ng-container>
@@ -1865,20 +2073,18 @@ TableBody.decorators = [
             <ng-container *ngTemplateOutlet="dt.emptyMessageTemplate; context: {$implicit: columns, frozen: frozen}"></ng-container>
         </ng-container>
     `,
-                changeDetection: ChangeDetectionStrategy.Default,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-TableBody.ctorParameters = () => [
-    { type: Table },
-    { type: TableService },
-    { type: ChangeDetectorRef }
-];
-TableBody.propDecorators = {
-    columns: [{ type: Input, args: ["pTableBody",] }],
-    template: [{ type: Input, args: ["pTableBodyTemplate",] }],
-    frozen: [{ type: Input }]
-};
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
+                type: Input,
+                args: ["pTableBody"]
+            }], template: [{
+                type: Input,
+                args: ["pTableBodyTemplate"]
+            }], frozen: [{
+                type: Input
+            }] } });
 class ScrollableView {
     constructor(dt, el, zone) {
         this.dt = dt;
@@ -2039,10 +2245,58 @@ class ScrollableView {
         this.frozenSiblingBody = null;
     }
 }
-ScrollableView.decorators = [
-    { type: Component, args: [{
-                selector: '[pScrollableView]',
-                template: `
+ScrollableView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ScrollableView, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ScrollableView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ScrollableView, selector: "[pScrollableView]", inputs: { columns: ["pScrollableView", "columns"], frozen: "frozen", scrollHeight: "scrollHeight" }, viewQueries: [{ propertyName: "scrollHeaderViewChild", first: true, predicate: ["scrollHeader"], descendants: true }, { propertyName: "scrollHeaderBoxViewChild", first: true, predicate: ["scrollHeaderBox"], descendants: true }, { propertyName: "scrollBodyViewChild", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "scrollTableViewChild", first: true, predicate: ["scrollTable"], descendants: true }, { propertyName: "scrollFooterViewChild", first: true, predicate: ["scrollFooter"], descendants: true }, { propertyName: "scrollFooterBoxViewChild", first: true, predicate: ["scrollFooterBox"], descendants: true }, { propertyName: "scrollableAlignerViewChild", first: true, predicate: ["scrollableAligner"], descendants: true }, { propertyName: "virtualScrollBody", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: `
+        <div #scrollHeader class="p-datatable-scrollable-header">
+            <div #scrollHeaderBox class="p-datatable-scrollable-header-box">
+                <table class="p-datatable-scrollable-header-table" [ngClass]="dt.tableStyleClass" [ngStyle]="dt.tableStyle">
+                    <ng-container *ngTemplateOutlet="frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <thead class="p-datatable-thead">
+                        <ng-container *ngTemplateOutlet="frozen ? dt.frozenHeaderTemplate||dt.headerTemplate : dt.headerTemplate; context {$implicit: columns}"></ng-container>
+                    </thead>
+                    <tbody class="p-datatable-tbody">
+                        <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="dt.frozenValue" [ngForTrackBy]="dt.rowTrackBy">
+                            <ng-container *ngTemplateOutlet="dt.frozenRowsTemplate; context: {$implicit: rowData, rowIndex: rowIndex, columns: columns}"></ng-container>
+                        </ng-template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <ng-container *ngIf="!dt.virtualScroll; else virtualScrollTemplate">
+            <div #scrollBody class="p-datatable-scrollable-body" [ngStyle]="{'max-height': dt.scrollHeight !== 'flex' ? scrollHeight : undefined, 'overflow-y': !frozen && dt.scrollHeight ? 'scroll' : undefined}">
+                <table #scrollTable [class]="dt.tableStyleClass" [ngStyle]="dt.tableStyle">
+                    <ng-container *ngTemplateOutlet="frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <tbody class="p-datatable-tbody" [pTableBody]="columns" [pTableBodyTemplate]="frozen ? dt.frozenBodyTemplate||dt.bodyTemplate : dt.bodyTemplate" [frozen]="frozen"></tbody>
+                </table>
+                <div #scrollableAligner style="background-color:transparent" *ngIf="frozen"></div>
+            </div>
+        </ng-container>
+        <ng-template #virtualScrollTemplate>
+            <cdk-virtual-scroll-viewport [itemSize]="dt.virtualRowHeight" tabindex="0" [style.height]="dt.scrollHeight !== 'flex' ? scrollHeight : undefined"
+                    [minBufferPx]="dt.minBufferPx" [maxBufferPx]="dt.maxBufferPx" (scrolledIndexChange)="onScrollIndexChange($event)" class="p-datatable-virtual-scrollable-body">
+                <table #scrollTable [class]="dt.tableStyleClass" [ngStyle]="dt.tableStyle">
+                    <ng-container *ngTemplateOutlet="frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <tbody class="p-datatable-tbody" [pTableBody]="columns" [pTableBodyTemplate]="frozen ? dt.frozenBodyTemplate||dt.bodyTemplate : dt.bodyTemplate" [frozen]="frozen"></tbody>
+                </table>
+                <div #scrollableAligner style="background-color:transparent" *ngIf="frozen"></div>
+            </cdk-virtual-scroll-viewport>
+        </ng-template>
+        <div #scrollFooter class="p-datatable-scrollable-footer">
+            <div #scrollFooterBox class="p-datatable-scrollable-footer-box">
+                <table class="p-datatable-scrollable-footer-table" [ngClass]="dt.tableStyleClass" [ngStyle]="dt.tableStyle">
+                    <ng-container *ngTemplateOutlet="frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}"></ng-container>
+                    <tfoot class="p-datatable-tfoot">
+                        <ng-container *ngTemplateOutlet="frozen ? dt.frozenFooterTemplate||dt.footerTemplate : dt.footerTemplate; context {$implicit: columns}"></ng-container>
+                    </tfoot>
+                </table>
+            </div>
+        </div>
+    `, isInline: true, components: [{ type: TableBody, selector: "[pTableBody]", inputs: ["pTableBody", "pTableBodyTemplate", "frozen"] }, { type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ScrollableView, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[pScrollableView]',
+                    template: `
         <div #scrollHeader class="p-datatable-scrollable-header">
             <div #scrollHeaderBox class="p-datatable-scrollable-header-box">
                 <table class="p-datatable-scrollable-header-table" [ngClass]="dt.tableStyleClass" [ngStyle]="dt.tableStyle">
@@ -2088,28 +2342,41 @@ ScrollableView.decorators = [
             </div>
         </div>
     `,
-                changeDetection: ChangeDetectionStrategy.Default,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-ScrollableView.ctorParameters = () => [
-    { type: Table },
-    { type: ElementRef },
-    { type: NgZone }
-];
-ScrollableView.propDecorators = {
-    columns: [{ type: Input, args: ["pScrollableView",] }],
-    frozen: [{ type: Input }],
-    scrollHeaderViewChild: [{ type: ViewChild, args: ['scrollHeader',] }],
-    scrollHeaderBoxViewChild: [{ type: ViewChild, args: ['scrollHeaderBox',] }],
-    scrollBodyViewChild: [{ type: ViewChild, args: ['scrollBody',] }],
-    scrollTableViewChild: [{ type: ViewChild, args: ['scrollTable',] }],
-    scrollFooterViewChild: [{ type: ViewChild, args: ['scrollFooter',] }],
-    scrollFooterBoxViewChild: [{ type: ViewChild, args: ['scrollFooterBox',] }],
-    scrollableAlignerViewChild: [{ type: ViewChild, args: ['scrollableAligner',] }],
-    virtualScrollBody: [{ type: ViewChild, args: [CdkVirtualScrollViewport,] }],
-    scrollHeight: [{ type: Input }]
-};
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { columns: [{
+                type: Input,
+                args: ["pScrollableView"]
+            }], frozen: [{
+                type: Input
+            }], scrollHeaderViewChild: [{
+                type: ViewChild,
+                args: ['scrollHeader']
+            }], scrollHeaderBoxViewChild: [{
+                type: ViewChild,
+                args: ['scrollHeaderBox']
+            }], scrollBodyViewChild: [{
+                type: ViewChild,
+                args: ['scrollBody']
+            }], scrollTableViewChild: [{
+                type: ViewChild,
+                args: ['scrollTable']
+            }], scrollFooterViewChild: [{
+                type: ViewChild,
+                args: ['scrollFooter']
+            }], scrollFooterBoxViewChild: [{
+                type: ViewChild,
+                args: ['scrollFooterBox']
+            }], scrollableAlignerViewChild: [{
+                type: ViewChild,
+                args: ['scrollableAligner']
+            }], virtualScrollBody: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }], scrollHeight: [{
+                type: Input
+            }] } });
 class SortableColumn {
     constructor(dt) {
         this.dt = dt;
@@ -2153,27 +2420,32 @@ class SortableColumn {
         }
     }
 }
-SortableColumn.decorators = [
-    { type: Directive, args: [{
-                selector: '[pSortableColumn]',
-                host: {
-                    '[class.p-sortable-column]': 'isEnabled()',
-                    '[class.p-highlight]': 'sorted',
-                    '[attr.tabindex]': 'isEnabled() ? "0" : null',
-                    '[attr.role]': '"columnheader"',
-                    '[attr.aria-sort]': 'sortOrder'
-                }
-            },] }
-];
-SortableColumn.ctorParameters = () => [
-    { type: Table }
-];
-SortableColumn.propDecorators = {
-    field: [{ type: Input, args: ["pSortableColumn",] }],
-    pSortableColumnDisabled: [{ type: Input }],
-    onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
-    onEnterKey: [{ type: HostListener, args: ['keydown.enter', ['$event'],] }]
-};
+SortableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SortableColumn, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+SortableColumn.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: SortableColumn, selector: "[pSortableColumn]", inputs: { field: ["pSortableColumn", "field"], pSortableColumnDisabled: "pSortableColumnDisabled" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class.p-sortable-column": "isEnabled()", "class.p-highlight": "sorted", "attr.tabindex": "isEnabled() ? \"0\" : null", "attr.role": "\"columnheader\"", "attr.aria-sort": "sortOrder" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SortableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pSortableColumn]',
+                    host: {
+                        '[class.p-sortable-column]': 'isEnabled()',
+                        '[class.p-highlight]': 'sorted',
+                        '[attr.tabindex]': 'isEnabled() ? "0" : null',
+                        '[attr.role]': '"columnheader"',
+                        '[attr.aria-sort]': 'sortOrder'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: Table }]; }, propDecorators: { field: [{
+                type: Input,
+                args: ["pSortableColumn"]
+            }], pSortableColumnDisabled: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onEnterKey: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }] } });
 class SortIcon {
     constructor(dt, cd) {
         this.dt = dt;
@@ -2221,24 +2493,25 @@ class SortIcon {
         }
     }
 }
-SortIcon.decorators = [
-    { type: Component, args: [{
-                selector: 'p-sortIcon',
-                template: `
+SortIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SortIcon, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SortIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: SortIcon, selector: "p-sortIcon", inputs: { field: "field" }, ngImport: i0, template: `
+        <i class="p-sortable-column-icon pi pi-fw" [ngClass]="{'pi-sort-amount-up-alt': sortOrder === 1, 'pi-sort-amount-down': sortOrder === -1, 'pi-sort-alt': sortOrder === 0}"></i>
+        <span *ngIf="isMultiSorted()" class="p-sortable-column-badge">{{getMultiSortMetaIndex() + 1}}</span>
+    `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SortIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-sortIcon',
+                    template: `
         <i class="p-sortable-column-icon pi pi-fw" [ngClass]="{'pi-sort-amount-up-alt': sortOrder === 1, 'pi-sort-amount-down': sortOrder === -1, 'pi-sort-alt': sortOrder === 0}"></i>
         <span *ngIf="isMultiSorted()" class="p-sortable-column-badge">{{getMultiSortMetaIndex() + 1}}</span>
     `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-SortIcon.ctorParameters = () => [
-    { type: Table },
-    { type: ChangeDetectorRef }
-];
-SortIcon.propDecorators = {
-    field: [{ type: Input }]
-};
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { field: [{
+                type: Input
+            }] } });
 class SelectableRow {
     constructor(dt, tableService) {
         this.dt = dt;
@@ -2343,32 +2616,63 @@ class SelectableRow {
         }
     }
 }
-SelectableRow.decorators = [
-    { type: Directive, args: [{
-                selector: '[pSelectableRow]',
-                host: {
-                    '[class.p-selectable-row]': 'isEnabled()',
-                    '[class.p-highlight]': 'selected',
-                    '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
-                }
-            },] }
-];
-SelectableRow.ctorParameters = () => [
-    { type: Table },
-    { type: TableService }
-];
-SelectableRow.propDecorators = {
-    data: [{ type: Input, args: ["pSelectableRow",] }],
-    index: [{ type: Input, args: ["pSelectableRowIndex",] }],
-    pSelectableRowDisabled: [{ type: Input }],
-    onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
-    onTouchEnd: [{ type: HostListener, args: ['touchend', ['$event'],] }],
-    onArrowDownKeyDown: [{ type: HostListener, args: ['keydown.arrowdown', ['$event'],] }],
-    onArrowUpKeyDown: [{ type: HostListener, args: ['keydown.arrowup', ['$event'],] }],
-    onEnterKeyDown: [{ type: HostListener, args: ['keydown.enter', ['$event'],] }, { type: HostListener, args: ['keydown.shift.enter', ['$event'],] }, { type: HostListener, args: ['keydown.meta.enter', ['$event'],] }],
-    onPageDownKeyDown: [{ type: HostListener, args: ['keydown.pagedown',] }, { type: HostListener, args: ['keydown.pageup',] }, { type: HostListener, args: ['keydown.home',] }, { type: HostListener, args: ['keydown.end',] }],
-    onSpaceKeydown: [{ type: HostListener, args: ['keydown.space',] }]
-};
+SelectableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SelectableRow, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
+SelectableRow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: SelectableRow, selector: "[pSelectableRow]", inputs: { data: ["pSelectableRow", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: "pSelectableRowDisabled" }, host: { listeners: { "click": "onClick($event)", "touchend": "onTouchEnd($event)", "keydown.arrowdown": "onArrowDownKeyDown($event)", "keydown.arrowup": "onArrowUpKeyDown($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.shift.enter": "onEnterKeyDown($event)", "keydown.meta.enter": "onEnterKeyDown($event)", "keydown.pagedown": "onPageDownKeyDown()", "keydown.pageup": "onPageDownKeyDown()", "keydown.home": "onPageDownKeyDown()", "keydown.end": "onPageDownKeyDown()", "keydown.space": "onSpaceKeydown()" }, properties: { "class.p-selectable-row": "isEnabled()", "class.p-highlight": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SelectableRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pSelectableRow]',
+                    host: {
+                        '[class.p-selectable-row]': 'isEnabled()',
+                        '[class.p-highlight]': 'selected',
+                        '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: TableService }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ["pSelectableRow"]
+            }], index: [{
+                type: Input,
+                args: ["pSelectableRowIndex"]
+            }], pSelectableRowDisabled: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onTouchEnd: [{
+                type: HostListener,
+                args: ['touchend', ['$event']]
+            }], onArrowDownKeyDown: [{
+                type: HostListener,
+                args: ['keydown.arrowdown', ['$event']]
+            }], onArrowUpKeyDown: [{
+                type: HostListener,
+                args: ['keydown.arrowup', ['$event']]
+            }], onEnterKeyDown: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.shift.enter', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.meta.enter', ['$event']]
+            }], onPageDownKeyDown: [{
+                type: HostListener,
+                args: ['keydown.pagedown']
+            }, {
+                type: HostListener,
+                args: ['keydown.pageup']
+            }, {
+                type: HostListener,
+                args: ['keydown.home']
+            }, {
+                type: HostListener,
+                args: ['keydown.end']
+            }], onSpaceKeydown: [{
+                type: HostListener,
+                args: ['keydown.space']
+            }] } });
 class SelectableRowDblClick {
     constructor(dt, tableService) {
         this.dt = dt;
@@ -2402,25 +2706,29 @@ class SelectableRowDblClick {
         }
     }
 }
-SelectableRowDblClick.decorators = [
-    { type: Directive, args: [{
-                selector: '[pSelectableRowDblClick]',
-                host: {
-                    '[class.p-selectable-row]': 'isEnabled()',
-                    '[class.p-highlight]': 'selected'
-                }
-            },] }
-];
-SelectableRowDblClick.ctorParameters = () => [
-    { type: Table },
-    { type: TableService }
-];
-SelectableRowDblClick.propDecorators = {
-    data: [{ type: Input, args: ["pSelectableRowDblClick",] }],
-    index: [{ type: Input, args: ["pSelectableRowIndex",] }],
-    pSelectableRowDisabled: [{ type: Input }],
-    onClick: [{ type: HostListener, args: ['dblclick', ['$event'],] }]
-};
+SelectableRowDblClick.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SelectableRowDblClick, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
+SelectableRowDblClick.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: SelectableRowDblClick, selector: "[pSelectableRowDblClick]", inputs: { data: ["pSelectableRowDblClick", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: "pSelectableRowDisabled" }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class.p-selectable-row": "isEnabled()", "class.p-highlight": "selected" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SelectableRowDblClick, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pSelectableRowDblClick]',
+                    host: {
+                        '[class.p-selectable-row]': 'isEnabled()',
+                        '[class.p-highlight]': 'selected'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: TableService }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ["pSelectableRowDblClick"]
+            }], index: [{
+                type: Input,
+                args: ["pSelectableRowIndex"]
+            }], pSelectableRowDisabled: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['dblclick', ['$event']]
+            }] } });
 class ContextMenuRow {
     constructor(dt, tableService, el) {
         this.dt = dt;
@@ -2452,26 +2760,29 @@ class ContextMenuRow {
         }
     }
 }
-ContextMenuRow.decorators = [
-    { type: Directive, args: [{
-                selector: '[pContextMenuRow]',
-                host: {
-                    '[class.p-highlight-contextmenu]': 'selected',
-                    '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
-                }
-            },] }
-];
-ContextMenuRow.ctorParameters = () => [
-    { type: Table },
-    { type: TableService },
-    { type: ElementRef }
-];
-ContextMenuRow.propDecorators = {
-    data: [{ type: Input, args: ["pContextMenuRow",] }],
-    index: [{ type: Input, args: ["pContextMenuRowIndex",] }],
-    pContextMenuRowDisabled: [{ type: Input }],
-    onContextMenu: [{ type: HostListener, args: ['contextmenu', ['$event'],] }]
-};
+ContextMenuRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ContextMenuRow, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ContextMenuRow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: ContextMenuRow, selector: "[pContextMenuRow]", inputs: { data: ["pContextMenuRow", "data"], index: ["pContextMenuRowIndex", "index"], pContextMenuRowDisabled: "pContextMenuRowDisabled" }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class.p-highlight-contextmenu": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ContextMenuRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pContextMenuRow]',
+                    host: {
+                        '[class.p-highlight-contextmenu]': 'selected',
+                        '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: TableService }, { type: i0.ElementRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ["pContextMenuRow"]
+            }], index: [{
+                type: Input,
+                args: ["pContextMenuRowIndex"]
+            }], pContextMenuRowDisabled: [{
+                type: Input
+            }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
 class RowToggler {
     constructor(dt) {
         this.dt = dt;
@@ -2486,19 +2797,22 @@ class RowToggler {
         return this.pRowTogglerDisabled !== true;
     }
 }
-RowToggler.decorators = [
-    { type: Directive, args: [{
-                selector: '[pRowToggler]'
-            },] }
-];
-RowToggler.ctorParameters = () => [
-    { type: Table }
-];
-RowToggler.propDecorators = {
-    data: [{ type: Input, args: ['pRowToggler',] }],
-    pRowTogglerDisabled: [{ type: Input }],
-    onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
-};
+RowToggler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: RowToggler, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+RowToggler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: RowToggler, selector: "[pRowToggler]", inputs: { data: ["pRowToggler", "data"], pRowTogglerDisabled: "pRowTogglerDisabled" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: RowToggler, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pRowToggler]'
+                }]
+        }], ctorParameters: function () { return [{ type: Table }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['pRowToggler']
+            }], pRowTogglerDisabled: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 class ResizableColumn {
     constructor(dt, el, zone) {
         this.dt = dt;
@@ -2558,19 +2872,16 @@ class ResizableColumn {
         this.unbindDocumentEvents();
     }
 }
-ResizableColumn.decorators = [
-    { type: Directive, args: [{
-                selector: '[pResizableColumn]'
-            },] }
-];
-ResizableColumn.ctorParameters = () => [
-    { type: Table },
-    { type: ElementRef },
-    { type: NgZone }
-];
-ResizableColumn.propDecorators = {
-    pResizableColumnDisabled: [{ type: Input }]
-};
+ResizableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ResizableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ResizableColumn.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: ResizableColumn, selector: "[pResizableColumn]", inputs: { pResizableColumnDisabled: "pResizableColumnDisabled" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ResizableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pResizableColumn]'
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { pResizableColumnDisabled: [{
+                type: Input
+            }] } });
 class ReorderableColumn {
     constructor(dt, el, zone) {
         this.dt = dt;
@@ -2648,20 +2959,19 @@ class ReorderableColumn {
         this.unbindEvents();
     }
 }
-ReorderableColumn.decorators = [
-    { type: Directive, args: [{
-                selector: '[pReorderableColumn]'
-            },] }
-];
-ReorderableColumn.ctorParameters = () => [
-    { type: Table },
-    { type: ElementRef },
-    { type: NgZone }
-];
-ReorderableColumn.propDecorators = {
-    pReorderableColumnDisabled: [{ type: Input }],
-    onDrop: [{ type: HostListener, args: ['drop', ['$event'],] }]
-};
+ReorderableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ReorderableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ReorderableColumn.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: ReorderableColumn, selector: "[pReorderableColumn]", inputs: { pReorderableColumnDisabled: "pReorderableColumnDisabled" }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ReorderableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pReorderableColumn]'
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { pReorderableColumnDisabled: [{
+                type: Input
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
 class EditableColumn {
     constructor(dt, el, zone) {
         this.dt = dt;
@@ -2890,31 +3200,57 @@ class EditableColumn {
         return this.pEditableColumnDisabled !== true;
     }
 }
-EditableColumn.decorators = [
-    { type: Directive, args: [{
-                selector: '[pEditableColumn]'
-            },] }
-];
-EditableColumn.ctorParameters = () => [
-    { type: Table },
-    { type: ElementRef },
-    { type: NgZone }
-];
-EditableColumn.propDecorators = {
-    data: [{ type: Input, args: ["pEditableColumn",] }],
-    field: [{ type: Input, args: ["pEditableColumnField",] }],
-    rowIndex: [{ type: Input, args: ["pEditableColumnRowIndex",] }],
-    pEditableColumnDisabled: [{ type: Input }],
-    pFocusCellSelector: [{ type: Input }],
-    onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
-    onEnterKeyDown: [{ type: HostListener, args: ['keydown.enter', ['$event'],] }],
-    onEscapeKeyDown: [{ type: HostListener, args: ['keydown.escape', ['$event'],] }],
-    onShiftKeyDown: [{ type: HostListener, args: ['keydown.tab', ['$event'],] }, { type: HostListener, args: ['keydown.shift.tab', ['$event'],] }, { type: HostListener, args: ['keydown.meta.tab', ['$event'],] }],
-    onArrowDown: [{ type: HostListener, args: ['keydown.arrowdown', ['$event'],] }],
-    onArrowUp: [{ type: HostListener, args: ['keydown.arrowup', ['$event'],] }],
-    onArrowLeft: [{ type: HostListener, args: ['keydown.arrowleft', ['$event'],] }],
-    onArrowRight: [{ type: HostListener, args: ['keydown.arrowright', ['$event'],] }]
-};
+EditableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: EditableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+EditableColumn.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: EditableColumn, selector: "[pEditableColumn]", inputs: { data: ["pEditableColumn", "data"], field: ["pEditableColumnField", "field"], rowIndex: ["pEditableColumnRowIndex", "rowIndex"], pEditableColumnDisabled: "pEditableColumnDisabled", pFocusCellSelector: "pFocusCellSelector" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.escape": "onEscapeKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.shift.tab": "onShiftKeyDown($event)", "keydown.meta.tab": "onShiftKeyDown($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: EditableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pEditableColumn]'
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ["pEditableColumn"]
+            }], field: [{
+                type: Input,
+                args: ["pEditableColumnField"]
+            }], rowIndex: [{
+                type: Input,
+                args: ["pEditableColumnRowIndex"]
+            }], pEditableColumnDisabled: [{
+                type: Input
+            }], pFocusCellSelector: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onEnterKeyDown: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }], onEscapeKeyDown: [{
+                type: HostListener,
+                args: ['keydown.escape', ['$event']]
+            }], onShiftKeyDown: [{
+                type: HostListener,
+                args: ['keydown.tab', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.shift.tab', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.meta.tab', ['$event']]
+            }], onArrowDown: [{
+                type: HostListener,
+                args: ['keydown.arrowdown', ['$event']]
+            }], onArrowUp: [{
+                type: HostListener,
+                args: ['keydown.arrowup', ['$event']]
+            }], onArrowLeft: [{
+                type: HostListener,
+                args: ['keydown.arrowleft', ['$event']]
+            }], onArrowRight: [{
+                type: HostListener,
+                args: ['keydown.arrowright', ['$event']]
+            }] } });
 class EditableRow {
     constructor(el) {
         this.el = el;
@@ -2923,18 +3259,19 @@ class EditableRow {
         return this.pEditableRowDisabled !== true;
     }
 }
-EditableRow.decorators = [
-    { type: Directive, args: [{
-                selector: '[pEditableRow]'
-            },] }
-];
-EditableRow.ctorParameters = () => [
-    { type: ElementRef }
-];
-EditableRow.propDecorators = {
-    data: [{ type: Input, args: ["pEditableRow",] }],
-    pEditableRowDisabled: [{ type: Input }]
-};
+EditableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: EditableRow, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+EditableRow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: EditableRow, selector: "[pEditableRow]", inputs: { data: ["pEditableRow", "data"], pEditableRowDisabled: "pEditableRowDisabled" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: EditableRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pEditableRow]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ["pEditableRow"]
+            }], pEditableRowDisabled: [{
+                type: Input
+            }] } });
 class InitEditableRow {
     constructor(dt, editableRow) {
         this.dt = dt;
@@ -2945,18 +3282,17 @@ class InitEditableRow {
         event.preventDefault();
     }
 }
-InitEditableRow.decorators = [
-    { type: Directive, args: [{
-                selector: '[pInitEditableRow]'
-            },] }
-];
-InitEditableRow.ctorParameters = () => [
-    { type: Table },
-    { type: EditableRow }
-];
-InitEditableRow.propDecorators = {
-    onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
-};
+InitEditableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: InitEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+InitEditableRow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: InitEditableRow, selector: "[pInitEditableRow]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: InitEditableRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pInitEditableRow]'
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: EditableRow }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 class SaveEditableRow {
     constructor(dt, editableRow) {
         this.dt = dt;
@@ -2967,18 +3303,17 @@ class SaveEditableRow {
         event.preventDefault();
     }
 }
-SaveEditableRow.decorators = [
-    { type: Directive, args: [{
-                selector: '[pSaveEditableRow]'
-            },] }
-];
-SaveEditableRow.ctorParameters = () => [
-    { type: Table },
-    { type: EditableRow }
-];
-SaveEditableRow.propDecorators = {
-    onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
-};
+SaveEditableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SaveEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+SaveEditableRow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: SaveEditableRow, selector: "[pSaveEditableRow]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SaveEditableRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pSaveEditableRow]'
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: EditableRow }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 class CancelEditableRow {
     constructor(dt, editableRow) {
         this.dt = dt;
@@ -2989,18 +3324,17 @@ class CancelEditableRow {
         event.preventDefault();
     }
 }
-CancelEditableRow.decorators = [
-    { type: Directive, args: [{
-                selector: '[pCancelEditableRow]'
-            },] }
-];
-CancelEditableRow.ctorParameters = () => [
-    { type: Table },
-    { type: EditableRow }
-];
-CancelEditableRow.propDecorators = {
-    onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
-};
+CancelEditableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: CancelEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+CancelEditableRow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: CancelEditableRow, selector: "[pCancelEditableRow]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: CancelEditableRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pCancelEditableRow]'
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: EditableRow }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 class CellEditor {
     constructor(dt, editableColumn, editableRow) {
         this.dt = dt;
@@ -3024,10 +3358,20 @@ class CellEditor {
             (this.editableRow && this.dt.editMode === 'row' && this.dt.isRowEditing(this.editableRow.data));
     }
 }
-CellEditor.decorators = [
-    { type: Component, args: [{
-                selector: 'p-cellEditor',
-                template: `
+CellEditor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: CellEditor, deps: [{ token: Table }, { token: EditableColumn, optional: true }, { token: EditableRow, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CellEditor.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: CellEditor, selector: "p-cellEditor", queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
+        <ng-container *ngIf="editing">
+            <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
+        </ng-container>
+        <ng-container *ngIf="!editing">
+            <ng-container *ngTemplateOutlet="outputTemplate"></ng-container>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: CellEditor, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-cellEditor',
+                    template: `
         <ng-container *ngIf="editing">
             <ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
         </ng-container>
@@ -3035,17 +3379,16 @@ CellEditor.decorators = [
             <ng-container *ngTemplateOutlet="outputTemplate"></ng-container>
         </ng-container>
     `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-CellEditor.ctorParameters = () => [
-    { type: Table },
-    { type: EditableColumn, decorators: [{ type: Optional }] },
-    { type: EditableRow, decorators: [{ type: Optional }] }
-];
-CellEditor.propDecorators = {
-    templates: [{ type: ContentChildren, args: [PrimeTemplate,] }]
-};
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: EditableColumn, decorators: [{
+                    type: Optional
+                }] }, { type: EditableRow, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }] } });
 class TableRadioButton {
     constructor(dt, tableService, cd) {
         this.dt = dt;
@@ -3080,10 +3423,24 @@ class TableRadioButton {
         }
     }
 }
-TableRadioButton.decorators = [
-    { type: Component, args: [{
-                selector: 'p-tableRadioButton',
-                template: `
+TableRadioButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableRadioButton, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TableRadioButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: TableRadioButton, selector: "p-tableRadioButton", inputs: { disabled: "disabled", value: "value", index: "index", inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "boxViewChild", first: true, predicate: ["box"], descendants: true }], ngImport: i0, template: `
+        <div class="p-radiobutton p-component" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input type="radio" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()"
+                [disabled]="disabled" [attr.aria-label]="ariaLabel">
+            </div>
+            <div #box [ngClass]="{'p-radiobutton-box p-component':true,
+                'p-highlight':checked, 'p-disabled':disabled}" role="radio" [attr.aria-checked]="checked">
+                <div class="p-radiobutton-icon"></div>
+            </div>
+        </div>
+    `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableRadioButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-tableRadioButton',
+                    template: `
         <div class="p-radiobutton p-component" (click)="onClick($event)">
             <div class="p-hidden-accessible">
                 <input type="radio" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()"
@@ -3095,24 +3452,25 @@ TableRadioButton.decorators = [
             </div>
         </div>
     `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-TableRadioButton.ctorParameters = () => [
-    { type: Table },
-    { type: TableService },
-    { type: ChangeDetectorRef }
-];
-TableRadioButton.propDecorators = {
-    disabled: [{ type: Input }],
-    value: [{ type: Input }],
-    index: [{ type: Input }],
-    inputId: [{ type: Input }],
-    name: [{ type: Input }],
-    ariaLabel: [{ type: Input }],
-    boxViewChild: [{ type: ViewChild, args: ['box',] }]
-};
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], boxViewChild: [{
+                type: ViewChild,
+                args: ['box']
+            }] } });
 class TableCheckbox {
     constructor(dt, tableService, cd) {
         this.dt = dt;
@@ -3147,10 +3505,24 @@ class TableCheckbox {
         }
     }
 }
-TableCheckbox.decorators = [
-    { type: Component, args: [{
-                selector: 'p-tableCheckbox',
-                template: `
+TableCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TableCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: TableCheckbox, selector: "p-tableCheckbox", inputs: { disabled: "disabled", value: "value", index: "index", inputId: "inputId", name: "name", required: "required", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "boxViewChild", first: true, predicate: ["box"], descendants: true }], ngImport: i0, template: `
+        <div class="p-checkbox p-component" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled"
+                [attr.required]="required" [attr.aria-label]="ariaLabel">
+            </div>
+            <div #box [ngClass]="{'p-checkbox-box p-component':true,
+                'p-highlight':checked, 'p-disabled':disabled}" role="checkbox" [attr.aria-checked]="checked">
+                <span class="p-checkbox-icon" [ngClass]="{'pi pi-check':checked}"></span>
+            </div>
+        </div>
+    `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableCheckbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-tableCheckbox',
+                    template: `
         <div class="p-checkbox p-component" (click)="onClick($event)">
             <div class="p-hidden-accessible">
                 <input type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" [disabled]="disabled"
@@ -3162,25 +3534,27 @@ TableCheckbox.decorators = [
             </div>
         </div>
     `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-TableCheckbox.ctorParameters = () => [
-    { type: Table },
-    { type: TableService },
-    { type: ChangeDetectorRef }
-];
-TableCheckbox.propDecorators = {
-    disabled: [{ type: Input }],
-    value: [{ type: Input }],
-    index: [{ type: Input }],
-    inputId: [{ type: Input }],
-    name: [{ type: Input }],
-    required: [{ type: Input }],
-    ariaLabel: [{ type: Input }],
-    boxViewChild: [{ type: ViewChild, args: ['box',] }]
-};
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], boxViewChild: [{
+                type: ViewChild,
+                args: ['box']
+            }] } });
 class TableHeaderCheckbox {
     constructor(dt, tableService, cd) {
         this.dt = dt;
@@ -3246,10 +3620,24 @@ class TableHeaderCheckbox {
         }
     }
 }
-TableHeaderCheckbox.decorators = [
-    { type: Component, args: [{
-                selector: 'p-tableHeaderCheckbox',
-                template: `
+TableHeaderCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableHeaderCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TableHeaderCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: { disabled: "disabled", inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "boxViewChild", first: true, predicate: ["box"], descendants: true }], ngImport: i0, template: `
+        <div class="p-checkbox p-component" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()"
+                [disabled]="isDisabled()" [attr.aria-label]="ariaLabel">
+            </div>
+            <div #box [ngClass]="{'p-checkbox-box':true,
+                'p-highlight':checked, 'p-disabled': isDisabled()}" role="checkbox" [attr.aria-checked]="checked">
+                <span class="p-checkbox-icon" [ngClass]="{'pi pi-check':checked}"></span>
+            </div>
+        </div>
+    `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-tableHeaderCheckbox',
+                    template: `
         <div class="p-checkbox p-component" (click)="onClick($event)">
             <div class="p-hidden-accessible">
                 <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()"
@@ -3261,22 +3649,21 @@ TableHeaderCheckbox.decorators = [
             </div>
         </div>
     `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-TableHeaderCheckbox.ctorParameters = () => [
-    { type: Table },
-    { type: TableService },
-    { type: ChangeDetectorRef }
-];
-TableHeaderCheckbox.propDecorators = {
-    boxViewChild: [{ type: ViewChild, args: ['box',] }],
-    disabled: [{ type: Input }],
-    inputId: [{ type: Input }],
-    name: [{ type: Input }],
-    ariaLabel: [{ type: Input }]
-};
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { boxViewChild: [{
+                type: ViewChild,
+                args: ['box']
+            }], disabled: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
 class ReorderableRowHandle {
     constructor(el) {
         this.el = el;
@@ -3285,17 +3672,17 @@ class ReorderableRowHandle {
         DomHandler.addClass(this.el.nativeElement, 'p-datatable-reorderablerow-handle');
     }
 }
-ReorderableRowHandle.decorators = [
-    { type: Directive, args: [{
-                selector: '[pReorderableRowHandle]'
-            },] }
-];
-ReorderableRowHandle.ctorParameters = () => [
-    { type: ElementRef }
-];
-ReorderableRowHandle.propDecorators = {
-    index: [{ type: Input, args: ["pReorderableRowHandle",] }]
-};
+ReorderableRowHandle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ReorderableRowHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ReorderableRowHandle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: ReorderableRowHandle, selector: "[pReorderableRowHandle]", inputs: { index: ["pReorderableRowHandle", "index"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ReorderableRowHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pReorderableRowHandle]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { index: [{
+                type: Input,
+                args: ["pReorderableRowHandle"]
+            }] } });
 class ReorderableRow {
     constructor(dt, el, zone) {
         this.dt = dt;
@@ -3374,21 +3761,22 @@ class ReorderableRow {
         event.preventDefault();
     }
 }
-ReorderableRow.decorators = [
-    { type: Directive, args: [{
-                selector: '[pReorderableRow]'
-            },] }
-];
-ReorderableRow.ctorParameters = () => [
-    { type: Table },
-    { type: ElementRef },
-    { type: NgZone }
-];
-ReorderableRow.propDecorators = {
-    index: [{ type: Input, args: ["pReorderableRow",] }],
-    pReorderableRowDisabled: [{ type: Input }],
-    onDrop: [{ type: HostListener, args: ['drop', ['$event'],] }]
-};
+ReorderableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ReorderableRow, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ReorderableRow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: ReorderableRow, selector: "[pReorderableRow]", inputs: { index: ["pReorderableRow", "index"], pReorderableRowDisabled: "pReorderableRowDisabled" }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ReorderableRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pReorderableRow]'
+                }]
+        }], ctorParameters: function () { return [{ type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { index: [{
+                type: Input,
+                args: ["pReorderableRow"]
+            }], pReorderableRowDisabled: [{
+                type: Input
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
 class ColumnFilterFormElement {
     constructor(dt) {
         this.dt = dt;
@@ -3417,10 +3805,28 @@ class ColumnFilterFormElement {
         }
     }
 }
-ColumnFilterFormElement.decorators = [
-    { type: Component, args: [{
-                selector: 'p-columnFilterFormElement',
-                template: `
+ColumnFilterFormElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Component });
+ColumnFilterFormElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ColumnFilterFormElement, selector: "p-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping" }, ngImport: i0, template: `
+        <ng-container *ngIf="filterTemplate; else builtInElement">
+            <ng-container *ngTemplateOutlet="filterTemplate; context: {$implicit: filterConstraint.value, filterCallback: filterCallback}"></ng-container>
+        </ng-container>
+        <ng-template #builtInElement>
+            <ng-container [ngSwitch]="type">
+                <input *ngSwitchCase="'text'" type="text" pInputText [value]="filterConstraint?.value" (input)="onModelChange($event.target.value)"
+                    (keydown.enter)="onTextInputEnterKeyDown($event)" [attr.placeholder]="placeholder">
+                <p-inputNumber *ngSwitchCase="'numeric'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" (onKeyDown)="onNumericInputKeyDown($event)" [showButtons]="true" [attr.placeholder]="placeholder"
+                    [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits" [prefix]="prefix" [suffix]="suffix" [placeholder]="placeholder"
+                    [mode]="currency ? 'currency' : 'decimal'" [locale]="locale" [localeMatcher]="localeMatcher" [currency]="currency" [currencyDisplay]="currencyDisplay" [useGrouping]="useGrouping"></p-inputNumber>
+                <p-triStateCheckbox *ngSwitchCase="'boolean'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)"></p-triStateCheckbox>
+                <p-calendar *ngSwitchCase="'date'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)"></p-calendar>
+            </ng-container>
+        </ng-template>
+    `, isInline: true, components: [{ type: i5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "step", "inputStyle", "inputStyleClass", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i6.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { type: i7.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "numberOfMonths", "view", "touchUI", "timeSeparator", "focusTrap", "firstDayOfWeek", "showTransitionOptions", "hideTransitionOptions", "tabindex", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.InputText, selector: "[pInputText]" }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-columnFilterFormElement',
+                    template: `
         <ng-container *ngIf="filterTemplate; else builtInElement">
             <ng-container *ngTemplateOutlet="filterTemplate; context: {$implicit: filterConstraint.value, filterCallback: filterCallback}"></ng-container>
         </ng-container>
@@ -3436,28 +3842,37 @@ ColumnFilterFormElement.decorators = [
             </ng-container>
         </ng-template>
     `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-ColumnFilterFormElement.ctorParameters = () => [
-    { type: Table }
-];
-ColumnFilterFormElement.propDecorators = {
-    field: [{ type: Input }],
-    type: [{ type: Input }],
-    filterConstraint: [{ type: Input }],
-    filterTemplate: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    minFractionDigits: [{ type: Input }],
-    maxFractionDigits: [{ type: Input }],
-    prefix: [{ type: Input }],
-    suffix: [{ type: Input }],
-    locale: [{ type: Input }],
-    localeMatcher: [{ type: Input }],
-    currency: [{ type: Input }],
-    currencyDisplay: [{ type: Input }],
-    useGrouping: [{ type: Input }]
-};
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: Table }]; }, propDecorators: { field: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], filterConstraint: [{
+                type: Input
+            }], filterTemplate: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], minFractionDigits: [{
+                type: Input
+            }], maxFractionDigits: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], localeMatcher: [{
+                type: Input
+            }], currency: [{
+                type: Input
+            }], currencyDisplay: [{
+                type: Input
+            }], useGrouping: [{
+                type: Input
+            }] } });
 class ColumnFilter {
     constructor(el, dt, renderer, config) {
         this.el = el;
@@ -3493,9 +3908,10 @@ class ColumnFilter {
     }
     generateMatchModeOptions() {
         var _a;
-        this.matchModes = this.matchModeOptions || ((_a = this.config.filterMatchModeOptions[this.type]) === null || _a === void 0 ? void 0 : _a.map(key => {
-            return { label: this.config.getTranslation(key), value: key };
-        }));
+        this.matchModes = this.matchModeOptions ||
+            ((_a = this.config.filterMatchModeOptions[this.type]) === null || _a === void 0 ? void 0 : _a.map(key => {
+                return { label: this.config.getTranslation(key), value: key };
+            }));
     }
     generateOperatorOptions() {
         this.operatorOptions = [
@@ -3781,18 +4197,74 @@ class ColumnFilter {
         }
     }
 }
-ColumnFilter.decorators = [
-    { type: Component, args: [{
-                selector: 'p-columnFilter',
-                template: `
+ColumnFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColumnFilter, deps: [{ token: i0.ElementRef }, { token: Table }, { token: i0.Renderer2 }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
+ColumnFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ColumnFilter, selector: "p-columnFilter", inputs: { field: "field", type: "type", display: "display", showMenu: "showMenu", matchMode: "matchMode", operator: "operator", showOperator: "showOperator", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showMatchModes: "showMatchModes", showAddButton: "showAddButton", hideOnClear: "hideOnClear", placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: "maxConstraints", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }], ngImport: i0, template: `
+        <div class="p-column-filter" [ngClass]="{'p-column-filter-row': display === 'row', 'p-column-filter-menu': display === 'menu'}">
+            <p-columnFilterFormElement *ngIf="display === 'row'" class="p-fluid" [type]="type" [field]="field" [filterConstraint]="dt.filters[field]" [filterTemplate]="filterTemplate" [placeholder]="placeholder" [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits" [prefix]="prefix" [suffix]="suffix"
+                                    [locale]="locale"  [localeMatcher]="localeMatcher" [currency]="currency" [currencyDisplay]="currencyDisplay" [useGrouping]="useGrouping"></p-columnFilterFormElement>
+            <button #icon *ngIf="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" [attr.aria-expanded]="overlayVisible"
+                [ngClass]="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}"
+                (click)="toggleMenu()" (keydown)="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
+            <button #icon *ngIf="showMenuButton && display === 'row'" [ngClass]="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" (click)="clearFilter()"><span class="pi pi-filter-slash"></span></button>
+            <div *ngIf="showMenu && overlayVisible" [ngClass]="{'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu'}"
+                [@overlayAnimation]="'visible'" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (keydown.escape)="onEscape()">
+                <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: field}"></ng-container>
+                <ul *ngIf="display === 'row'; else menu" class="p-column-filter-row-items">
+                    <li class="p-column-filter-row-item" *ngFor="let matchMode of matchModes; let i = index;" (click)="onRowMatchModeChange(matchMode.value)" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="this.onRowMatchModeChange(matchMode.value)"
+                        [ngClass]="{'p-highlight': isRowMatchModeSelected(matchMode.value)}" [attr.tabindex]="i === 0 ? '0' : null">{{matchMode.label}}</li>
+                    <li class="p-column-filter-separator"></li>
+                    <li class="p-column-filter-row-item" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">{{noFilterLabel}}</li>
+                </ul>
+                <ng-template #menu>
+                    <div class="p-column-filter-operator" *ngIf="isShowOperator">
+                        <p-dropdown [options]="operatorOptions" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" styleClass="p-column-filter-operator-dropdown"></p-dropdown>
+                    </div>
+                    <div class="p-column-filter-constraints">
+                        <div *ngFor="let fieldConstraint of fieldConstraints; let i = index" class="p-column-filter-constraint">
+                            <p-dropdown  *ngIf="showMatchModes && matchModes" [options]="matchModes" [ngModel]="fieldConstraint.matchMode" (ngModelChange)="onMenuMatchModeChange($event, fieldConstraint)" styleClass="p-column-filter-matchmode-dropdown"></p-dropdown>
+                            <p-columnFilterFormElement [type]="type" [field]="field" [filterConstraint]="fieldConstraint" [filterTemplate]="filterTemplate" [placeholder]="placeholder"
+                            [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits" [prefix]="prefix" [suffix]="suffix"
+                            [locale]="locale"  [localeMatcher]="localeMatcher" [currency]="currency" [currencyDisplay]="currencyDisplay" [useGrouping]="useGrouping"></p-columnFilterFormElement>
+                            <div>
+                                <button *ngIf="showRemoveIcon" type="button" pButton icon="pi pi-trash" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" (click)="removeConstraint(fieldConstraint)" pRipple [label]="removeRuleButtonLabel"></button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-column-filter-add-rule" *ngIf="isShowAddConstraint">
+                        <button type="button" pButton [label]="addRuleButtonLabel" icon="pi pi-plus" class="p-column-filter-add-button p-button-text p-button-sm" (click)="addConstraint()" pRipple></button>
+                    </div>
+                    <div class="p-column-filter-buttonbar">
+                        <button *ngIf="showClearButton" type="button" pButton class="p-button-outlined" (click)="clearFilter()" [label]="clearButtonLabel" pRipple></button>
+                        <button *ngIf="showApplyButton" type="button" pButton (click)="applyFilter()" [label]="applyButtonLabel" pRipple></button>
+                    </div>
+                </ng-template>
+                <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: field}"></ng-container>
+            </div>
+        </div>
+    `, isInline: true, components: [{ type: ColumnFilterFormElement, selector: "p-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { type: i10.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i11.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], animations: [
+        trigger('overlayAnimation', [
+            transition(':enter', [
+                style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                animate('.12s cubic-bezier(0, 0, 0.2, 1)')
+            ]),
+            transition(':leave', [
+                animate('.1s linear', style({ opacity: 0 }))
+            ])
+        ])
+    ], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColumnFilter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-columnFilter',
+                    template: `
         <div class="p-column-filter" [ngClass]="{'p-column-filter-row': display === 'row', 'p-column-filter-menu': display === 'menu'}">
             <p-columnFilterFormElement *ngIf="display === 'row'" class="p-fluid" [type]="type" [field]="field" [filterConstraint]="dt.filters[field]" [filterTemplate]="filterTemplate" [placeholder]="placeholder" [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits" [prefix]="prefix" [suffix]="suffix"
                                     [locale]="locale"  [localeMatcher]="localeMatcher" [currency]="currency" [currencyDisplay]="currencyDisplay" [useGrouping]="useGrouping"></p-columnFilterFormElement>
             <button #icon *ngIf="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" [attr.aria-expanded]="overlayVisible"
-                [ngClass]="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}" 
+                [ngClass]="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}"
                 (click)="toggleMenu()" (keydown)="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
             <button #icon *ngIf="showMenuButton && display === 'row'" [ngClass]="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" (click)="clearFilter()"><span class="pi pi-filter-slash"></span></button>
-            <div *ngIf="showMenu && overlayVisible" [ngClass]="{'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu'}" 
+            <div *ngIf="showMenu && overlayVisible" [ngClass]="{'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu'}"
                 [@overlayAnimation]="'visible'" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (keydown.escape)="onEscape()">
                 <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: field}"></ng-container>
                 <ul *ngIf="display === 'row'; else menu" class="p-column-filter-row-items">
@@ -3828,65 +4300,90 @@ ColumnFilter.decorators = [
             </div>
         </div>
     `,
-                animations: [
-                    trigger('overlayAnimation', [
-                        transition(':enter', [
-                            style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                            animate('.12s cubic-bezier(0, 0, 0.2, 1)')
-                        ]),
-                        transition(':leave', [
-                            animate('.1s linear', style({ opacity: 0 }))
+                    animations: [
+                        trigger('overlayAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                                animate('.12s cubic-bezier(0, 0, 0.2, 1)')
+                            ]),
+                            transition(':leave', [
+                                animate('.1s linear', style({ opacity: 0 }))
+                            ])
                         ])
-                    ])
-                ],
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-ColumnFilter.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Table },
-    { type: Renderer2 },
-    { type: PrimeNGConfig }
-];
-ColumnFilter.propDecorators = {
-    field: [{ type: Input }],
-    type: [{ type: Input }],
-    display: [{ type: Input }],
-    showMenu: [{ type: Input }],
-    matchMode: [{ type: Input }],
-    operator: [{ type: Input }],
-    showOperator: [{ type: Input }],
-    showClearButton: [{ type: Input }],
-    showApplyButton: [{ type: Input }],
-    showMatchModes: [{ type: Input }],
-    showAddButton: [{ type: Input }],
-    hideOnClear: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    matchModeOptions: [{ type: Input }],
-    maxConstraints: [{ type: Input }],
-    minFractionDigits: [{ type: Input }],
-    maxFractionDigits: [{ type: Input }],
-    prefix: [{ type: Input }],
-    suffix: [{ type: Input }],
-    locale: [{ type: Input }],
-    localeMatcher: [{ type: Input }],
-    currency: [{ type: Input }],
-    currencyDisplay: [{ type: Input }],
-    useGrouping: [{ type: Input }],
-    icon: [{ type: ViewChild, args: ['icon',] }],
-    templates: [{ type: ContentChildren, args: [PrimeTemplate,] }]
-};
+                    ],
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Table }, { type: i0.Renderer2 }, { type: i1.PrimeNGConfig }]; }, propDecorators: { field: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], showMenu: [{
+                type: Input
+            }], matchMode: [{
+                type: Input
+            }], operator: [{
+                type: Input
+            }], showOperator: [{
+                type: Input
+            }], showClearButton: [{
+                type: Input
+            }], showApplyButton: [{
+                type: Input
+            }], showMatchModes: [{
+                type: Input
+            }], showAddButton: [{
+                type: Input
+            }], hideOnClear: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], matchModeOptions: [{
+                type: Input
+            }], maxConstraints: [{
+                type: Input
+            }], minFractionDigits: [{
+                type: Input
+            }], maxFractionDigits: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], localeMatcher: [{
+                type: Input
+            }], currency: [{
+                type: Input
+            }], currencyDisplay: [{
+                type: Input
+            }], useGrouping: [{
+                type: Input
+            }], icon: [{
+                type: ViewChild,
+                args: ['icon']
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }] } });
 class TableModule {
 }
-TableModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, PaginatorModule, InputTextModule, DropdownModule, ScrollingModule, FormsModule, ButtonModule, SelectButtonModule, CalendarModule, InputNumberModule, TriStateCheckboxModule],
-                exports: [Table, SharedModule, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, SortIcon,
-                    TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ScrollingModule, ColumnFilter],
-                declarations: [Table, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, TableBody, ScrollableView, SortIcon,
-                    TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement]
-            },] }
-];
+TableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableModule, declarations: [Table, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, TableBody, ScrollableView, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement], imports: [CommonModule, PaginatorModule, InputTextModule, DropdownModule, ScrollingModule, FormsModule, ButtonModule, SelectButtonModule, CalendarModule, InputNumberModule, TriStateCheckboxModule], exports: [Table, SharedModule, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ScrollingModule, ColumnFilter] });
+TableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableModule, imports: [[CommonModule, PaginatorModule, InputTextModule, DropdownModule, ScrollingModule, FormsModule, ButtonModule, SelectButtonModule, CalendarModule, InputNumberModule, TriStateCheckboxModule], SharedModule,
+        ScrollingModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PaginatorModule, InputTextModule, DropdownModule, ScrollingModule, FormsModule, ButtonModule, SelectButtonModule, CalendarModule, InputNumberModule, TriStateCheckboxModule],
+                    exports: [Table, SharedModule, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, SortIcon,
+                        TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ScrollingModule, ColumnFilter],
+                    declarations: [Table, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, TableBody, ScrollableView, SortIcon,
+                        TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.