primeng 19.1.3 → 20.0.0-rc.1

package/fesm2022/primeng-table.mjs

@@ -1,24 +1,27 @@
-import { trigger, transition, style, animate } from '@angular/animations';
+import { trigger, transition, style as style$1, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, NgZone, numberAttribute, booleanAttribute, ContentChild, ContentChildren, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, HostListener, ElementRef, PLATFORM_ID, Inject, Optional, input, forwardRef, NgModule } from '@angular/core';
-import * as i5 from '@angular/forms';
+import { Injectable, EventEmitter, inject, NgZone, numberAttribute, booleanAttribute, ContentChild, ContentChildren, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, HostListener, ElementRef, Optional, input, forwardRef, NgModule } from '@angular/core';
+import * as i6 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from 'primeng/api';
 import { OverlayService, FilterService, FilterOperator, FilterMatchMode, PrimeTemplate, TranslationKeys, SharedModule } from 'primeng/api';
+import * as i5 from 'primeng/badge';
+import { BadgeModule } from 'primeng/badge';
 import { BaseComponent } from 'primeng/basecomponent';
-import * as i9 from 'primeng/button';
+import * as i10 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
-import * as i7 from 'primeng/checkbox';
+import * as i8 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
-import * as i11 from 'primeng/datepicker';
+import * as i12 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ArrowDownIcon } from 'primeng/icons/arrowdown';
 import { ArrowUpIcon } from 'primeng/icons/arrowup';
 import { CheckIcon } from 'primeng/icons/check';
 import { FilterIcon } from 'primeng/icons/filter';
+import { FilterFillIcon } from 'primeng/icons/filterfill';
 import { FilterSlashIcon } from 'primeng/icons/filterslash';
 import { PlusIcon } from 'primeng/icons/plus';
 import { SortAltIcon } from 'primeng/icons/sortalt';
@@ -26,658 +29,182 @@ import { SortAmountDownIcon } from 'primeng/icons/sortamountdown';
 import { SortAmountUpAltIcon } from 'primeng/icons/sortamountupalt';
 import { SpinnerIcon } from 'primeng/icons/spinner';
 import { TrashIcon } from 'primeng/icons/trash';
-import * as i12 from 'primeng/inputnumber';
+import * as i13 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i10 from 'primeng/inputtext';
+import * as i11 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i2 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i6 from 'primeng/radiobutton';
+import * as i7 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i4 from 'primeng/scroller';
 import { ScrollerModule } from 'primeng/scroller';
-import * as i8 from 'primeng/select';
+import * as i9 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { UniqueComponentId, ObjectUtils, ZIndexUtils } from 'primeng/utils';
 import { Subject } from 'rxjs';
+import { css, dt } from '@primeuix/styled';
+import { style } from '@primeuix/styles/datatable';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-datatable {
-    position: relative;
-}
-
-.p-datatable-table {
-    border-spacing: 0;
-    border-collapse: separate;
-    width: 100%;
-}
-
-.p-datatable-scrollable > .p-datatable-table-container {
-    position: relative;
-}
-/* For PrimeNG */
-.p-datatable-scrollable-table > .p-datatable-thead {
-    top: 0;
-    z-index: 2;
-}
-/* For PrimeNG */
-.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
-    position: sticky;
-    z-index: 2;
-}
-/* For PrimeNG */
-.p-datatable-scrollable-table > .p-datatable-frozen-tbody + .p-datatable-frozen-tbody {
-    z-index: 1;
-}
-
-.p-datatable-scrollable-table > .p-datatable-tfoot {
-    bottom: 0;
-    z-index: 1;
-}
-
-.p-datatable-scrollable > tr:not(:has(.p-datatable-selectable-row)) >.p-datatable-frozen-column {
-    position: sticky;
-    background: ${dt('datatable.header.cell.background')};
-}
-
-.p-datatable-scrollable th.p-datatable-frozen-column {
-    z-index: 1;
-    position: sticky;
-    background: ${dt('datatable.header.cell.background')};
-}
-.p-datatable-scrollable td.p-datatable-frozen-column {
-    z-index: 1;
-    position: sticky;
-    background: ${dt('datatable.header.cell.background')};
-}
-
-.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,
-.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {
-    background: ${dt('datatable.header.cell.background')};
-}
-
-.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,
-.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
-    background: ${dt('datatable.footer.cell.background')};
-}
-
-.p-datatable-flex-scrollable {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.p-datatable-flex-scrollable > .p-datatable-table-container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-}
-
-.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header {
-    position: sticky;
-    z-index: 1;
-}
-
-.p-datatable-resizable-table > .p-datatable-thead > tr > th,
-.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
-.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) {
-    background-clip: padding-box;
-    position: relative;
-}
+const theme = css `
+    ${style}
 
-.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer {
-    display: none;
-}
-
-.p-datatable-column-resizer {
-    display: block;
-    position: absolute;
-    top: 0;
-    inset-inline-end: 0;
-    margin: 0;
-    width: ${dt('datatable.column.resizer.width')};
-    height: 100%;
-    padding: 0px;
-    cursor: col-resize;
-    border: 1px solid transparent;
-}
-
-/*
-.p-datatable-column-header-content {
-    display: flex;
-    align-items: center;
-    gap: ${dt('datatable.header.cell.gap')};
-}
-.p-datatable-thead > tr > th {
-    display: flex;
-    align-items: center;
-    gap: ${dt('datatable.header.cell.gap')};
-}
-*/
-
-.p-datatable-column-resize-indicator {
-    width: ${dt('datatable.resize.indicator.width')};
-    position: absolute;
-    z-index: 10;
-    display: none;
-    background: ${dt('datatable.resize.indicator.color')};
-}
-
-.p-datatable-row-reorder-indicator-up,
-.p-datatable-row-reorder-indicator-down {
-    position: absolute;
-    display: none;
-}
-
-.p-datatable-reorderable-column,
-.p-datatable-reorderable-row-handle {
-    cursor: move;
-}
-
-.p-datatable-mask {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 3;
-}
-
-.p-datatable-inline-filter {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    gap: ${dt('datatable.filter.inline.gap')};
-}
-
-.p-datatable-inline-filter .p-datatable-filter-element-container {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-.p-datatable-filter-overlay {
-    position: absolute;
-    background: ${dt('datatable.filter.overlay.select.background')};
-    color: ${dt('datatable.filter.overlay.select.color')};
-    border: 1px solid ${dt('datatable.filter.overlay.select.border.color')};
-    border-radius: ${dt('datatable.filter.overlay.select.border.radius')};
-    box-shadow: ${dt('datatable.filter.overlay.select.shadow')};
-    min-width: 12.5rem;
-}
-
-.p-datatable-filter-constraint-list {
-    margin: 0;
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    padding: ${dt('datatable.filter.constraint.list.padding')};
-    gap: ${dt('datatable.filter.constraint.list.gap')};
-}
-
-.p-datatable-filter-constraint {
-    padding: ${dt('datatable.filter.constraint.padding')};
-    color: ${dt('datatable.filter.constraint.color')};
-    border-radius: ${dt('datatable.filter.constraint.border.radius')};
-    cursor: pointer;
-    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
-        box-shadow ${dt('datatable.transition.duration')};
-}
-
-.p-datatable-filter-constraint-selected {
-    background: ${dt('datatable.filter.constraint.selected.background')};
-    color: ${dt('datatable.filter.constraint.selected.color')};
-}
-
-.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover {
-    background: ${dt('datatable.filter.constraint.focus.background')};
-    color: ${dt('datatable.filter.constraint.focus.color')};
-}
-
-.p-datatable-filter-constraint:focus-visible {
-    outline: 0 none;
-    background: ${dt('datatable.filter.constraint.focus.background')};
-    color: ${dt('datatable.filter.constraint.focus.color')};
-}
-
-.p-datatable-filter-constraint-selected:focus-visible {
-    outline: 0 none;
-    background: ${dt('datatable.filter.constraint.selected.focus.background')};
-    color: ${dt('datatable.filter.constraint.selected.focus.color')};
-}
-
-.p-datatable-filter-constraint-separator {
-    border-top: 1px solid ${dt('datatable.filter.constraint.separator.border.color')};
-}
-
-.p-datatable-popover-filter {
-    display: inline-flex;
-    margin-inline-start: auto;
-}
-
-.p-datatable-filter-overlay-popover {
-    background: ${dt('datatable.filter.overlay.popover.background')};
-    color: ${dt('datatable.filter.overlay.popover.color')};
-    border: 1px solid ${dt('datatable.filter.overlay.popover.border.color')};
-    border-radius: ${dt('datatable.filter.overlay.popover.border.radius')};
-    box-shadow: ${dt('datatable.filter.overlay.popover.shadow')};
-    min-width: 12.5rem;
-    padding: ${dt('datatable.filter.overlay.popover.padding')};
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('datatable.filter.overlay.popover.gap')};
-}
-
-.p-datatable-filter-operator-dropdown, .p-datatable-filter-constraint-dropdown {
-    width: 100%;
-}
-
-.p-datatable-filter-rule-list,
-.p-datatable-filter-rule {
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('datatable.filter.overlay.popover.gap')};
-}
-
-.p-datatable-filter-rule {
-    border-bottom: 1px solid ${dt('datatable.filter.rule.border.color')};
-}
-
-.p-datatable-filter-rule:last-child {
-    border-bottom: 0 none;
-}
-
-.p-datatable-filter-add-rule-button, .p-datatable-filter-remove-rule-button {
-    width: 100%;
-}
-
-.p-datatable-filter-remove-button {
-    width: 100%;
-}
-
-.p-datatable-filter-buttonbar {
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.p-datatable-virtualscroller-spacer {
-    display: flex;
-}
-
-.p-datatable .p-virtualscroller .p-virtualscroller-loading {
-    transform: none !important;
-    min-height: 0;
-    position: sticky;
-    top: 0;
-    inset-inline-start: 0;
-}
-
-.p-datatable-paginator-top {
-    border-color: ${dt('datatable.paginator.top.border.color')};
-    border-style: solid;
-    border-width: ${dt('datatable.paginator.top.border.width')};
-}
-
-.p-datatable-paginator-bottom {
-    border-color: ${dt('datatable.paginator.bottom.border.color')};
-    border-style: solid;
-    border-width: ${dt('datatable.paginator.bottom.border.width')};
-}
-
-.p-datatable-header {
-    background: ${dt('datatable.header.background')};
-    color: ${dt('datatable.header.color')};
-    border-color: ${dt('datatable.header.border.color')};
-    border-style: solid;
-    border-width: ${dt('datatable.header.border.width')};
-    padding: ${dt('datatable.header.padding')};
-}
-
-.p-datatable-footer {
-    background: ${dt('datatable.footer.background')};
-    color: ${dt('datatable.footer.color')};
-    border-color: ${dt('datatable.footer.border.color')};
-    border-style: solid;
-    border-width: ${dt('datatable.footer.border.width')};
-    padding: ${dt('datatable.footer.padding')};
-}
-
-.p-datatable-thead > tr > th {
-    padding: ${dt('datatable.header.cell.padding')};
-    background: ${dt('datatable.header.cell.background')};
-    border-color: ${dt('datatable.header.cell.border.color')};
-    border-style: solid;
-    border-width: 0 0 1px 0;
-    color: ${dt('datatable.header.cell.color')};
-    font-weight: ${dt('datatable.column.title.font.weight')};
-    text-align: start;
-    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
-            outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
-}
-
-/** For PrimeNG **/
-.p-datatable-thead > tr > th p-columnfilter {
-    font-weight: normal;
-}
-/** For PrimeNG End **/
-
-/*
-.p-datatable-column-title {
-    font-weight: ${dt('datatable.column.title.font.weight')};
-}
-*/
-
-.p-datatable-tbody > tr {
-    outline-color: transparent;
-    background: ${dt('datatable.row.background')};
-    color: ${dt('datatable.row.color')};
-    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
-            outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
-}
-
-.p-datatable-tbody > tr > td {
-    text-align: start;
-    border-color: ${dt('datatable.body.cell.border.color')};
-    border-style: solid;
-    border-width: 0 0 1px 0;
-    padding: ${dt('datatable.body.cell.padding')};
-}
-
-.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {
-    background: ${dt('datatable.row.hover.background')};
-    color: ${dt('datatable.row.hover.color')};
-}
-
-.p-datatable-tbody > tr.p-datatable-row-selected {
-    background: ${dt('datatable.row.selected.background')};
-    color: ${dt('datatable.row.selected.color')};
-}
-
-.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {
-    border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};
-}
-
-.p-datatable-tbody > tr.p-datatable-row-selected > td {
-    border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};
-}
-
-.p-datatable-tbody > tr:focus-visible,
-.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {
-    box-shadow: ${dt('datatable.row.focus.ring.shadow')};
-    outline: ${dt('datatable.row.focus.ring.width')} ${dt('datatable.row.focus.ring.style')} ${dt('datatable.row.focus.ring.color')};
-    outline-offset: ${dt('datatable.row.focus.ring.offset')};
-}
-
-.p-datatable-tbody:has(+ .p-datatable-tfoot) > tr:last-child > td {
-    border-width: 0;
-}
-
-.p-datatable-tfoot > tr > td {
-    text-align: start;
-    padding: ${dt('datatable.footer.cell.padding')};
-    border-color: ${dt('datatable.footer.cell.border.color')};
-    border-style: solid;
-    border-width: 1px 0 1px 0;
-    color: ${dt('datatable.footer.cell.color')};
-    background: ${dt('datatable.footer.cell.background')};
-}
-
-.p-datatable-column-footer {
-    font-weight: ${dt('datatable.column.footer.font.weight')};
-}
-
-.p-datatable-sortable-column {
-    cursor: pointer;
-    user-select: none;
-    outline-color: transparent;
-}
-
-.p-datatable-thead > tr > th,
-.p-datatable-sort-icon,
-.p-datatable-sort-badge {
-    vertical-align: middle;
-}
-
-.p-datatable-sort-icon {
-    color: ${dt('datatable.sort.icon.color')};
-    transition: color ${dt('datatable.transition.duration')};
-}
-
-.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
-    background: ${dt('datatable.header.cell.hover.background')};
-    color: ${dt('datatable.header.cell.hover.color')};
-}
-
-.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {
-    color: ${dt('datatable.sort.icon.hover.color')};
-}
-
-.p-datatable-thead > tr > th.p-datatable-column-sorted {
-    background: ${dt('datatable.header.cell.selected.background')};
-    color: ${dt('datatable.header.cell.selected.color')};
-}
-
-.p-datatable-thead > tr > th.p-datatable-column-sorted .p-datatable-sort-icon {
-    color: ${dt('datatable.header.cell.selected.color')};
-}
-
-.p-datatable-sortable-column:focus-visible {
-    box-shadow: ${dt('datatable.header.cell.focus.ring.shadow')};
-    outline: ${dt('datatable.header.cell.focus.ring.width')} ${dt('datatable.header.cell.focus.ring.style')} ${dt('datatable.header.cell.focus.ring.color')};
-    outline-offset: ${dt('datatable.header.cell.focus.ring.offset')};
-}
-
-.p-datatable-hoverable .p-datatable-selectable-row {
-    cursor: pointer;
-}
-
-.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-    box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')};
-}
-
-.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-    box-shadow: inset 0 -2px 0 0 ${dt('datatable.drop.point.color')};
-}
-
-.p-datatable-loading-icon {
-    font-size: ${dt('datatable.loading.icon.size')};
-    width: ${dt('datatable.loading.icon.size')};
-    height: ${dt('datatable.loading.icon.size')};
-}
-
-.p-datatable-gridlines .p-datatable-header {
-    border-width: 1px 1px 0 1px;
-}
-
-.p-datatable-gridlines .p-datatable-footer {
-    border-width: 0 1px 1px 1px;
-}
-
-.p-datatable-gridlines .p-datatable-paginator-top {
-    border-width: 1px 1px 0 1px;
-}
-
-.p-datatable-gridlines .p-datatable-paginator-bottom {
-    border-width: 0 1px 1px 1px;
-}
-
-.p-datatable-gridlines .p-datatable-thead > tr > th {
-    border-width: 1px 0 1px 1px;
-}
-
-.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
-    border-width: 1px;
-}
-
-.p-datatable-gridlines .p-datatable-tbody > tr > td {
-    border-width: 1px 0 0 1px;
-}
-
-.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
-    border-width: 1px 1px 0 1px;
-}
-
-p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
-    border-width: 1px 0 1px 1px;
-}
-
-.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
-    border-width: 1px;
-}
-
-.p-datatable-gridlines .p-datatable-tfoot > tr > td {
-    border-width: 1px 0 1px 1px;
-}
-
-.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
-    border-width: 1px 1px 1px 1px;
-}
-
-.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
-    border-width: 0 0 1px 1px;
-}
-
-.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
-    border-width: 0 1px 1px 1px;
-}
-
-.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
-    border-width: 0 0 1px 1px;
-}
+    /* For PrimeNG */
+    .p-datatable-scrollable-table > .p-datatable-thead {
+        top: 0;
+        z-index: 2;
+    }
 
-.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
-    border-width: 0 1px 1px 1px;
-}
+    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {
+        position: sticky;
+        z-index: 2;
+    }
 
-.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
-    border-width: 0 0 0 1px;
-}
+    .p-datatable-scrollable-table > .p-datatable-frozen-tbody + .p-datatable-frozen-tbody {
+        z-index: 1;
+    }
 
-.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
-    border-width: 0 1px 0 1px;
-}
+    .p-datatable-scrollable > tr:not(:has(.p-datatable-selectable-row)) > .p-datatable-frozen-column {
+        position: sticky;
+        background: ${dt('datatable.header.cell.background')};
+    }
 
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
-    background: ${dt('datatable.row.striped.background')};
-}
+    .p-datatable-scrollable th.p-datatable-frozen-column {
+        z-index: 1;
+        position: sticky;
+        background: ${dt('datatable.header.cell.background')};
+    }
+    .p-datatable-scrollable td.p-datatable-frozen-column {
+        z-index: 1;
+        position: sticky;
+        background: ${dt('datatable.header.cell.background')};
+    }
 
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd).p-datatable-row-selected {
-    background: ${dt('datatable.row.selected.background')};
-    color: ${dt('datatable.row.selected.color')};
-}
+    .p-datatable-mask {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 3;
+    }
 
-.p-datatable-striped.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {
-    background: ${dt('datatable.row.hover.background')};
-    color: ${dt('datatable.row.hover.color')};
-}
+    .p-datatable-filter-overlay {
+        position: absolute;
+        background: ${dt('datatable.filter.overlay.select.background')};
+        color: ${dt('datatable.filter.overlay.select.color')};
+        border: 1px solid ${dt('datatable.filter.overlay.select.border.color')};
+        border-radius: ${dt('datatable.filter.overlay.select.border.radius')};
+        box-shadow: ${dt('datatable.filter.overlay.select.shadow')};
+        min-width: 12.5rem;
+    }
 
-.p-datatable.p-datatable-sm .p-datatable-header {
-    padding: ${dt('datatable.header.sm.padding')};
-}
+    .p-datatable-filter-rule {
+        border-bottom: 1px solid ${dt('datatable.filter.rule.border.color')};
+    }
 
-.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
-    padding: ${dt('datatable.header.cell.sm.padding')};
-}
+    .p-datatable-filter-rule:last-child {
+        border-bottom: 0 none;
+    }
 
-.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-    padding: ${dt('datatable.body.cell.sm.padding')};
-}
+    .p-datatable-filter-add-rule-button,
+    .p-datatable-filter-remove-rule-button {
+        width: 100%;
+    }
 
-.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
-    padding: ${dt('datatable.footer.cell.sm.padding')};
-}
+    .p-datatable-filter-remove-button {
+        width: 100%;
+    }
 
-.p-datatable.p-datatable-sm .p-datatable-footer {
-    padding: ${dt('datatable.footer.sm.padding')};
-}
+    .p-datatable-thead > tr > th {
+        padding: ${dt('datatable.header.cell.padding')};
+        background: ${dt('datatable.header.cell.background')};
+        border-color: ${dt('datatable.header.cell.border.color')};
+        border-style: solid;
+        border-width: 0 0 1px 0;
+        color: ${dt('datatable.header.cell.color')};
+        font-weight: ${dt('datatable.column.title.font.weight')};
+        text-align: start;
+        transition:
+            background ${dt('datatable.transition.duration')},
+            color ${dt('datatable.transition.duration')},
+            border-color ${dt('datatable.transition.duration')},
+            outline-color ${dt('datatable.transition.duration')},
+            box-shadow ${dt('datatable.transition.duration')};
+    }
 
-.p-datatable.p-datatable-lg .p-datatable-header {
-    padding: ${dt('datatable.header.lg.padding')};
-}
+    .p-datatable-thead > tr > th p-columnfilter {
+        font-weight: normal;
+    }
 
-.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
-    padding: ${dt('datatable.header.cell.lg.padding')};
-}
+    .p-datatable-thead > tr > th,
+    .p-datatable-sort-icon,
+    .p-datatable-sort-badge {
+        vertical-align: middle;
+    }
 
-.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
-    padding: ${dt('datatable.body.cell.lg.padding')};
-}
+    .p-datatable-thead > tr > th.p-datatable-column-sorted {
+        background: ${dt('datatable.header.cell.selected.background')};
+        color: ${dt('datatable.header.cell.selected.color')};
+    }
 
-.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
-    padding: ${dt('datatable.footer.cell.lg.padding')};
-}
+    .p-datatable-thead > tr > th.p-datatable-column-sorted .p-datatable-sort-icon {
+        color: ${dt('datatable.header.cell.selected.color')};
+    }
 
-.p-datatable.p-datatable-lg .p-datatable-footer {
-    padding: ${dt('datatable.footer.lg.padding')};
-}
+    .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
+        background: ${dt('datatable.row.striped.background')};
+    }
 
-.p-datatable-row-toggle-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    width: ${dt('datatable.row.toggle.button.size')};
-    height: ${dt('datatable.row.toggle.button.size')};
-    color: ${dt('datatable.row.toggle.button.color')};
-    border: 0 none;
-    background: transparent;
-    cursor: pointer;
-    border-radius: ${dt('datatable.row.toggle.button.border.radius')};
-    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
-            outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
-    outline-color: transparent;
-    user-select: none;
-}
+    .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd).p-datatable-row-selected {
+        background: ${dt('datatable.row.selected.background')};
+        color: ${dt('datatable.row.selected.color')};
+    }
 
-.p-datatable-row-toggle-button:enabled:hover {
-    color: ${dt('datatable.row.toggle.button.hover.color')};
-    background: ${dt('datatable.row.toggle.button.hover.background')};
-}
+    p-sortIcon {
+        display: inline-flex;
+        align-items: center;
+        gap: ${dt('datatable.header.cell.gap')};
+    }
 
-.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
-    background: ${dt('datatable.row.toggle.button.selected.hover.background')};
-    color: ${dt('datatable.row.toggle.button.selected.hover.color')};
-}
+    .p-datatable .p-editable-column.p-cell-editing {
+        padding: 0;
+    }
 
-.p-datatable-row-toggle-button:focus-visible {
-    box-shadow: ${dt('datatable.row.toggle.button.focus.ring.shadow')};
-    outline: ${dt('datatable.row.toggle.button.focus.ring.width')} ${dt('datatable.row.toggle.button.focus.ring.style')} ${dt('datatable.row.toggle.button.focus.ring.color')};
-    outline-offset: ${dt('datatable.row.toggle.button.focus.ring.offset')};
-}
+    .p-datatable .p-editable-column.p-cell-editing p-celleditor {
+        display: block;
+        width: 100%;
+    }
 `;
 const classes = {
-    root: ({ instance }) => ({
-        'p-datatable p-component': true,
-        'p-datatable-hoverable': instance.rowHover || instance.selectionMode,
-        'p-datatable-resizable': instance.resizableColumns,
-        'p-datatable-resizable-fit': instance.resizableColumns && instance.columnResizeMode === 'fit',
-        'p-datatable-scrollable': instance.scrollable,
-        'p-datatable-flex-scrollable': instance.scrollable && instance.scrollHeight === 'flex',
-        'p-datatable-striped': instance.stripedRows,
-        'p-datatable-gridlines': instance.showGridlines,
-        'p-datatable-sm': instance.size === 'small',
-        'p-datatable-lg': instance.size === 'large'
-    }),
+    root: ({ instance }) => [
+        'p-datatable p-component',
+        {
+            'p-datatable-hoverable': instance.rowHover || instance.selectionMode,
+            'p-datatable-resizable': instance.resizableColumns,
+            'p-datatable-resizable-fit': instance.resizableColumns && instance.columnResizeMode === 'fit',
+            'p-datatable-scrollable': instance.scrollable,
+            'p-datatable-flex-scrollable': instance.scrollable && instance.scrollHeight === 'flex',
+            'p-datatable-striped': instance.stripedRows,
+            'p-datatable-gridlines': instance.showGridlines,
+            'p-datatable-sm': instance.size === 'small',
+            'p-datatable-lg': instance.size === 'large'
+        }
+    ],
     mask: 'p-datatable-mask p-overlay-mask',
     loadingIcon: 'p-datatable-loading-icon',
     header: 'p-datatable-header',
     pcPaginator: ({ instance }) => 'p-datatable-paginator-' + instance.paginatorPosition,
     tableContainer: 'p-datatable-table-container',
-    table: ({ instance }) => ({
-        'p-datatable-table': true,
-        'p-datatable-scrollable-table': instance.scrollable,
-        'p-datatable-resizable-table': instance.resizableColumns,
-        'p-datatable-resizable-table-fit': instance.resizableColumns && instance.columnResizeMode === 'fit'
-    }),
+    table: ({ instance }) => [
+        'p-datatable-table',
+        {
+            'p-datatable-scrollable-table': instance.scrollable,
+            'p-datatable-resizable-table': instance.resizableColumns,
+            'p-datatable-resizable-table-fit': instance.resizableColumns && instance.columnResizeMode === 'fit'
+        }
+    ],
     thead: 'p-datatable-thead',
     columnResizer: 'p-datatable-column-resizer',
     columnHeaderContent: 'p-datatable-column-header-content',
@@ -736,7 +263,20 @@ const classes = {
     footer: 'p-datatable-tfoot',
     columnResizeIndicator: 'p-datatable-column-resize-indicator',
     rowReorderIndicatorUp: 'p-datatable-row-reorder-indicator-up',
-    rowReorderIndicatorDown: 'p-datatable-row-reorder-indicator-down'
+    rowReorderIndicatorDown: 'p-datatable-row-reorder-indicator-down',
+    sortableColumn: ({ instance }) => ({
+        'p-datatable-sortable-column': instance.isEnabled(),
+        ' p-datatable-column-sorted': instance.sorted
+    }),
+    sortableColumnIcon: 'p-datatable-sort-icon',
+    sortableColumnBadge: 'p-sortable-column-badge',
+    selectableRow: ({ instance }) => ({
+        'p-datatable-selectable-row': instance.isEnabled(),
+        'p-datatable-row-selected': instance.selected
+    }),
+    resizableColumn: 'p-datatable-resizable-column',
+    reorderableColumn: 'p-datatable-reorderable-column',
+    rowEditorCancel: 'p-datatable-row-editor-cancel'
 };
 const inlineStyles = {
     tableContainer: ({ instance }) => ({
@@ -751,10 +291,10 @@ class TableStyle extends BaseStyle {
     theme = theme;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -960,6 +500,30 @@ var TableClasses;
      * Class name of the row reorder indicator down element
      */
     TableClasses["rowReorderIndicatorDown"] = "p-datatable-row-reorder-indicator-down";
+    /**
+     * Class name of the sortable column element
+     */
+    TableClasses["sortableColumn"] = "p-datatable-sortable-column";
+    /**
+     * Class name of the sortable column icon element
+     */
+    TableClasses["sortableColumnIcon"] = "p-sortable-column-icon";
+    /**
+     * Class name of the sortable column badge element
+     */
+    TableClasses["sortableColumnBadge"] = "p-sortable-column-badge";
+    /**
+     * Class name of the selectable row element
+     */
+    TableClasses["selectableRow"] = "p-datatable-selectable-row";
+    /**
+     * Class name of the resizable column element
+     */
+    TableClasses["resizableColumn"] = "p-datatable-resizable-column";
+    /**
+     * Class name of the row editor cancel element
+     */
+    TableClasses["rowEditorCancel"] = "p-datatable-row-editor-cancel";
 })(TableClasses || (TableClasses = {}));
 
 class TableService {
@@ -993,10 +557,10 @@ class TableService {
     onColumnsChange(columns) {
         this.columnsSource.next(columns);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1014,13 +578,9 @@ class Table extends BaseComponent {
      * @group Props
      */
     frozenValue;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -1230,12 +790,6 @@ class Table extends BaseComponent {
      * @group Props
      */
     scrollable;
-    /**
-     * Orientation of the scrolling, options are "vertical", "horizontal" and "both".
-     * @group Props
-     * @deprecated Property is obselete since v14.2.0.
-     */
-    scrollDirection = 'vertical';
     /**
      * Type of the row grouping, valid values are "subheader" and "rowspan".
      * @group Props
@@ -1271,19 +825,6 @@ class Table extends BaseComponent {
      * @group Props
      */
     frozenWidth;
-    /**
-     * Defines if the table is responsive.
-     * @group Props
-     * @deprecated table is always responsive with scrollable behavior.
-     */
-    get responsive() {
-        return this._responsive;
-    }
-    set responsive(val) {
-        this._responsive = val;
-        console.log('responsive property is deprecated as table is always responsive with scrollable behavior.');
-    }
-    _responsive;
     /**
      * Local ng-template varilable of a ContextMenu.
      * @group Props
@@ -1334,11 +875,6 @@ class Table extends BaseComponent {
      * @group Props
      */
     showInitialSortBadge = true;
-    /**
-     * Whether the cell widths scale according to their content or not.  Deprecated:  Table layout is always "auto".
-     * @group Props
-     */
-    autoLayout;
     /**
      * Export function.
      * @group Props
@@ -1391,6 +927,7 @@ class Table extends BaseComponent {
     groupRowsByOrder = 1;
     /**
      * Defines the responsive mode, valid options are "stack" and "scroll".
+     * @deprecated since v20.0.0, always defaults to scroll, stack mode needs custom implementation
      * @group Props
      */
     responsiveLayout = 'scroll';
@@ -1495,18 +1032,6 @@ class Table extends BaseComponent {
     set selection(val) {
         this._selection = val;
     }
-    /**
-     * Indicates the height of rows to be scrolled.
-     * @group Props
-     * @deprecated use virtualScrollItemSize property instead.
-     */
-    get virtualRowHeight() {
-        return this._virtualRowHeight;
-    }
-    set virtualRowHeight(val) {
-        this._virtualRowHeight = val;
-        console.log('The virtualRowHeight property is deprecated.');
-    }
     /**
      * Whether all data is selected.
      * @group Props
@@ -1655,7 +1180,6 @@ class Table extends BaseComponent {
      * @group Emits
      */
     onStateRestore = new EventEmitter();
-    containerViewChild;
     resizeHelperViewChild;
     reorderIndicatorUpViewChild;
     reorderIndicatorDownViewChild;
@@ -1665,7 +1189,6 @@ class Table extends BaseComponent {
     tableFooterViewChild;
     scroller;
     _templates;
-    _virtualRowHeight = 28;
     _value = [];
     _columns;
     _totalRecords = 0;
@@ -3024,28 +2547,28 @@ class Table extends BaseComponent {
         return this.selectionMode === 'multiple';
     }
     onColumnResizeBegin(event) {
-        let containerLeft = DomHandler.getOffset(this.containerViewChild?.nativeElement).left;
+        let containerLeft = DomHandler.getOffset(this.el?.nativeElement).left;
         this.resizeColumnElement = event.target.closest('th');
         this.columnResizing = true;
         if (event.type == 'touchstart') {
-            this.lastResizerHelperX = event.changedTouches[0].clientX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft;
+            this.lastResizerHelperX = event.changedTouches[0].clientX - containerLeft + this.el?.nativeElement.scrollLeft;
         }
         else {
-            this.lastResizerHelperX = event.pageX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft;
+            this.lastResizerHelperX = event.pageX - containerLeft + this.el?.nativeElement.scrollLeft;
         }
         this.onColumnResize(event);
         event.preventDefault();
     }
     onColumnResize(event) {
-        let containerLeft = DomHandler.getOffset(this.containerViewChild?.nativeElement).left;
-        DomHandler.addClass(this.containerViewChild?.nativeElement, 'p-unselectable-text');
-        this.resizeHelperViewChild.nativeElement.style.height = this.containerViewChild?.nativeElement.offsetHeight + 'px';
+        let containerLeft = DomHandler.getOffset(this.el?.nativeElement).left;
+        DomHandler.addClass(this.el?.nativeElement, 'p-unselectable-text');
+        this.resizeHelperViewChild.nativeElement.style.height = this.el?.nativeElement.offsetHeight + 'px';
         this.resizeHelperViewChild.nativeElement.style.top = 0 + 'px';
         if (event.type == 'touchmove') {
-            this.resizeHelperViewChild.nativeElement.style.left = event.changedTouches[0].clientX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft + 'px';
+            this.resizeHelperViewChild.nativeElement.style.left = event.changedTouches[0].clientX - containerLeft + this.el?.nativeElement.scrollLeft + 'px';
         }
         else {
-            this.resizeHelperViewChild.nativeElement.style.left = event.pageX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft + 'px';
+            this.resizeHelperViewChild.nativeElement.style.left = event.pageX - containerLeft + this.el?.nativeElement.scrollLeft + 'px';
         }
         this.resizeHelperViewChild.nativeElement.style.display = 'block';
     }
@@ -3078,11 +2601,11 @@ class Table extends BaseComponent {
             }
         }
         this.resizeHelperViewChild.nativeElement.style.display = 'none';
-        DomHandler.removeClass(this.containerViewChild?.nativeElement, 'p-unselectable-text');
+        DomHandler.removeClass(this.el?.nativeElement, 'p-unselectable-text');
     }
     _totalTableWidth() {
         let widths = [];
-        const tableHead = DomHandler.findSingle(this.containerViewChild.nativeElement, '.p-datatable-thead');
+        const tableHead = DomHandler.findSingle(this.el.nativeElement, '.p-datatable-thead');
         let headers = DomHandler.find(tableHead, 'tr > th');
         headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
         return widths;
@@ -3096,7 +2619,7 @@ class Table extends BaseComponent {
     onColumnDragEnter(event, dropHeader) {
         if (this.reorderableColumns && this.draggedColumn && dropHeader) {
             event.preventDefault();
-            let containerOffset = DomHandler.getOffset(this.containerViewChild?.nativeElement);
+            let containerOffset = DomHandler.getOffset(this.el?.nativeElement);
             let dropHeaderOffset = DomHandler.getOffset(dropHeader);
             if (this.draggedColumn != dropHeader) {
                 let dragIndex = DomHandler.indexWithinGroup(this.draggedColumn, 'preorderablecolumn');
@@ -3370,7 +2893,7 @@ class Table extends BaseComponent {
     saveColumnWidths(state) {
         let widths = [];
         let headers = [];
-        const container = this.containerViewChild?.nativeElement;
+        const container = this.el?.nativeElement;
         if (container) {
             headers = DomHandler.find(container, '.p-datatable-thead > tr > th');
         }
@@ -3517,447 +3040,451 @@ class Table extends BaseComponent {
         this.destroyResponsiveStyle();
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Table, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: Table, isStandalone: false, selector: "p-table", inputs: { frozenColumns: "frozenColumns", frozenValue: "frozenValue", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: ["paginator", "paginator", booleanAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: ["showJumpToPageInput", "showJumpToPageInput", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], selectionMode: "selectionMode", selectionPageOnly: ["selectionPageOnly", "selectionPageOnly", booleanAttribute], contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], rowSelectable: "rowSelectable", rowTrackBy: "rowTrackBy", lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: ["scrollable", "scrollable", booleanAttribute], scrollDirection: "scrollDirection", rowGroupMode: "rowGroupMode", scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", responsive: "responsive", contextMenu: "contextMenu", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], rowHover: ["rowHover", "rowHover", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], showInitialSortBadge: ["showInitialSortBadge", "showInitialSortBadge", booleanAttribute], autoLayout: ["autoLayout", "autoLayout", booleanAttribute], exportFunction: "exportFunction", exportHeader: "exportHeader", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", groupRowsBy: "groupRowsBy", size: "size", showGridlines: ["showGridlines", "showGridlines", booleanAttribute], stripedRows: ["stripedRows", "stripedRows", booleanAttribute], groupRowsByOrder: ["groupRowsByOrder", "groupRowsByOrder", numberAttribute], responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", paginatorLocale: "paginatorLocale", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", virtualRowHeight: "virtualRowHeight", selectAll: "selectAll" }, outputs: { contextMenuSelectionChange: "contextMenuSelectionChange", selectAllChange: "selectAllChange", selectionChange: "selectionChange", 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, TableStyle], queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_headerGroupedTemplate", first: true, predicate: ["headergrouped"] }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"] }, { propertyName: "_loadingBodyTemplate", first: true, predicate: ["loadingbody"] }, { propertyName: "_captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_footerGroupedTemplate", first: true, predicate: ["footergrouped"] }, { propertyName: "_summaryTemplate", first: true, predicate: ["summary"] }, { propertyName: "_colGroupTemplate", first: true, predicate: ["colgroup"] }, { propertyName: "_expandedRowTemplate", first: true, predicate: ["expandedrow"] }, { propertyName: "_groupHeaderTemplate", first: true, predicate: ["groupheader"] }, { propertyName: "_groupFooterTemplate", first: true, predicate: ["groupfooter"] }, { propertyName: "_frozenExpandedRowTemplate", first: true, predicate: ["frozenexpandedrow"] }, { propertyName: "_frozenHeaderTemplate", first: true, predicate: ["frozenheader"] }, { propertyName: "_frozenBodyTemplate", first: true, predicate: ["frozenbody"] }, { propertyName: "_frozenFooterTemplate", first: true, predicate: ["frozenfooter"] }, { propertyName: "_frozenColGroupTemplate", first: true, predicate: ["frozencolgroup"] }, { propertyName: "_emptyMessageTemplate", first: true, predicate: ["emptymessage"] }, { propertyName: "_paginatorLeftTemplate", first: true, predicate: ["paginatorleft"] }, { propertyName: "_paginatorRightTemplate", first: true, predicate: ["paginatorright"] }, { propertyName: "_paginatorDropdownItemTemplate", first: true, predicate: ["paginatordropdownitem"] }, { propertyName: "_loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "_reorderIndicatorUpIconTemplate", first: true, predicate: ["reorderindicatorupicon"] }, { propertyName: "_reorderIndicatorDownIconTemplate", first: true, predicate: ["reorderindicatordownicon"] }, { propertyName: "_sortIconTemplate", first: true, predicate: ["sorticon"] }, { propertyName: "_checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "_headerCheckboxIconTemplate", first: true, predicate: ["headercheckboxicon"] }, { propertyName: "_paginatorDropdownIconTemplate", first: true, predicate: ["paginatordropdownicon"] }, { propertyName: "_paginatorFirstPageLinkIconTemplate", first: true, predicate: ["paginatorfirstpagelinkicon"] }, { propertyName: "_paginatorLastPageLinkIconTemplate", first: true, predicate: ["paginatorlastpagelinkicon"] }, { propertyName: "_paginatorPreviousPageLinkIconTemplate", first: true, predicate: ["paginatorpreviouspagelinkicon"] }, { propertyName: "_paginatorNextPageLinkIconTemplate", first: true, predicate: ["paginatornextpagelinkicon"] }, { 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: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableHeaderViewChild", first: true, predicate: ["thead"], descendants: true }, { propertyName: "tableFooterViewChild", first: true, predicate: ["tfoot"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div #container [ngStyle]="style" [class]="styleClass" [ngClass]="cx('root')" [attr.id]="id">
-            <div [ngClass]="cx('mask')" *ngIf="loading && showLoader">
-                <i *ngIf="loadingIcon" [class]="'p-datatable-loading-icon ' + loadingIcon"></i>
-                <ng-container *ngIf="!loadingIcon">
-                    <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="cx('loadingIcon')" />
-                    <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [ngClass]="cx('loadingIcon')">
-                        <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
-                    </span>
-                </ng-container>
-            </div>
-            <div *ngIf="captionTemplate || _captionTemplate" [ngClass]="cx('header')">
-                <ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
-            </div>
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="onPageChange($event)"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
-                [templateLeft]="paginatorLeftTemplate || _paginatorLeftTemplate"
-                [templateRight]="paginatorRightTemplate || _paginatorRightTemplate"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatorDropdownItemTemplate || _paginatorDropdownItemTemplate"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showJumpToPageInput]="showJumpToPageInput"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
-                [locale]="paginatorLocale"
-            >
-                <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
-                </ng-template>
-
-                <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
-                </ng-template>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Table, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: Table, isStandalone: false, selector: "p-table", inputs: { frozenColumns: "frozenColumns", frozenValue: "frozenValue", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: ["paginator", "paginator", booleanAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: ["showJumpToPageInput", "showJumpToPageInput", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], selectionMode: "selectionMode", selectionPageOnly: ["selectionPageOnly", "selectionPageOnly", booleanAttribute], contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], rowSelectable: "rowSelectable", rowTrackBy: "rowTrackBy", lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: ["scrollable", "scrollable", booleanAttribute], rowGroupMode: "rowGroupMode", scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", contextMenu: "contextMenu", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], rowHover: ["rowHover", "rowHover", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], showInitialSortBadge: ["showInitialSortBadge", "showInitialSortBadge", booleanAttribute], exportFunction: "exportFunction", exportHeader: "exportHeader", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", groupRowsBy: "groupRowsBy", size: "size", showGridlines: ["showGridlines", "showGridlines", booleanAttribute], stripedRows: ["stripedRows", "stripedRows", booleanAttribute], groupRowsByOrder: ["groupRowsByOrder", "groupRowsByOrder", numberAttribute], responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", paginatorLocale: "paginatorLocale", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", selectAll: "selectAll" }, outputs: { contextMenuSelectionChange: "contextMenuSelectionChange", selectAllChange: "selectAllChange", selectionChange: "selectionChange", 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" }, host: { properties: { "attr.id": "id", "class": "cn(cx('root'), styleClass)" } }, providers: [TableService, TableStyle], queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_headerGroupedTemplate", first: true, predicate: ["headergrouped"] }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"] }, { propertyName: "_loadingBodyTemplate", first: true, predicate: ["loadingbody"] }, { propertyName: "_captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_footerGroupedTemplate", first: true, predicate: ["footergrouped"] }, { propertyName: "_summaryTemplate", first: true, predicate: ["summary"] }, { propertyName: "_colGroupTemplate", first: true, predicate: ["colgroup"] }, { propertyName: "_expandedRowTemplate", first: true, predicate: ["expandedrow"] }, { propertyName: "_groupHeaderTemplate", first: true, predicate: ["groupheader"] }, { propertyName: "_groupFooterTemplate", first: true, predicate: ["groupfooter"] }, { propertyName: "_frozenExpandedRowTemplate", first: true, predicate: ["frozenexpandedrow"] }, { propertyName: "_frozenHeaderTemplate", first: true, predicate: ["frozenheader"] }, { propertyName: "_frozenBodyTemplate", first: true, predicate: ["frozenbody"] }, { propertyName: "_frozenFooterTemplate", first: true, predicate: ["frozenfooter"] }, { propertyName: "_frozenColGroupTemplate", first: true, predicate: ["frozencolgroup"] }, { propertyName: "_emptyMessageTemplate", first: true, predicate: ["emptymessage"] }, { propertyName: "_paginatorLeftTemplate", first: true, predicate: ["paginatorleft"] }, { propertyName: "_paginatorRightTemplate", first: true, predicate: ["paginatorright"] }, { propertyName: "_paginatorDropdownItemTemplate", first: true, predicate: ["paginatordropdownitem"] }, { propertyName: "_loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "_reorderIndicatorUpIconTemplate", first: true, predicate: ["reorderindicatorupicon"] }, { propertyName: "_reorderIndicatorDownIconTemplate", first: true, predicate: ["reorderindicatordownicon"] }, { propertyName: "_sortIconTemplate", first: true, predicate: ["sorticon"] }, { propertyName: "_checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "_headerCheckboxIconTemplate", first: true, predicate: ["headercheckboxicon"] }, { propertyName: "_paginatorDropdownIconTemplate", first: true, predicate: ["paginatordropdownicon"] }, { propertyName: "_paginatorFirstPageLinkIconTemplate", first: true, predicate: ["paginatorfirstpagelinkicon"] }, { propertyName: "_paginatorLastPageLinkIconTemplate", first: true, predicate: ["paginatorlastpagelinkicon"] }, { propertyName: "_paginatorPreviousPageLinkIconTemplate", first: true, predicate: ["paginatorpreviouspagelinkicon"] }, { propertyName: "_paginatorNextPageLinkIconTemplate", first: true, predicate: ["paginatornextpagelinkicon"] }, { propertyName: "_templates", predicate: PrimeTemplate }], viewQueries: [{ 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: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableHeaderViewChild", first: true, predicate: ["thead"], descendants: true }, { propertyName: "tableFooterViewChild", first: true, predicate: ["tfoot"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <div [class]="cx('mask')" *ngIf="loading && showLoader">
+            <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon)"></i>
+            <ng-container *ngIf="!loadingIcon">
+                <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="cx('loadingIcon')" />
+                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
+                    <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
+                </span>
+            </ng-container>
+        </div>
+        <div *ngIf="captionTemplate || _captionTemplate" [class]="cx('header')">
+            <ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
+        </div>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="onPageChange($event)"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
+            [templateLeft]="paginatorLeftTemplate || _paginatorLeftTemplate"
+            [templateRight]="paginatorRightTemplate || _paginatorRightTemplate"
+            [appendTo]="paginatorDropdownAppendTo"
+            [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatorDropdownItemTemplate || _paginatorDropdownItemTemplate"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showJumpToPageInput]="showJumpToPageInput"
+            [showPageLinks]="showPageLinks"
+            [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
+            [locale]="paginatorLocale"
+        >
+            <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
-                </ng-template>
-            </p-paginator>
+            <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-            <div #wrapper [ngClass]="cx('tableContainer')" [ngStyle]="sx('tableContainer')">
-                <p-scroller
-                    #scroller
-                    *ngIf="virtualScroll"
-                    [items]="processedData"
-                    [columns]="columns"
-                    [style]="{
-                        height: scrollHeight !== 'flex' ? scrollHeight : undefined
-                    }"
-                    [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
-                    [itemSize]="virtualScrollItemSize || _virtualRowHeight"
-                    [step]="rows"
-                    [delay]="lazy ? virtualScrollDelay : 0"
-                    [inline]="true"
-                    [lazy]="lazy"
-                    (onLazyLoad)="onLazyItemLoad($event)"
-                    [loaderDisabled]="true"
-                    [showSpacer]="false"
-                    [showLoader]="loadingBodyTemplate || _loadingBodyTemplate"
-                    [options]="virtualScrollOptions"
-                    [autoSize]="true"
-                >
-                    <ng-template #content let-items let-scrollerOptions="options">
-                        <ng-container
-                            *ngTemplateOutlet="
-                                buildInTable;
-                                context: {
-                                    $implicit: items,
-                                    options: scrollerOptions
-                                }
-                            "
-                        ></ng-container>
-                    </ng-template>
-                </p-scroller>
-                <ng-container *ngIf="!virtualScroll">
+            <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
+            </ng-template>
+        </p-paginator>
+
+        <div #wrapper [class]="cx('tableContainer')" [ngStyle]="sx('tableContainer')">
+            <p-scroller
+                #scroller
+                *ngIf="virtualScroll"
+                [items]="processedData"
+                [columns]="columns"
+                [style]="{
+                    height: scrollHeight !== 'flex' ? scrollHeight : undefined
+                }"
+                [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
+                [itemSize]="virtualScrollItemSize"
+                [step]="rows"
+                [delay]="lazy ? virtualScrollDelay : 0"
+                [inline]="true"
+                [lazy]="lazy"
+                (onLazyLoad)="onLazyItemLoad($event)"
+                [loaderDisabled]="true"
+                [showSpacer]="false"
+                [showLoader]="loadingBodyTemplate || _loadingBodyTemplate"
+                [options]="virtualScrollOptions"
+                [autoSize]="true"
+            >
+                <ng-template #content let-items let-scrollerOptions="options">
                     <ng-container
                         *ngTemplateOutlet="
                             buildInTable;
                             context: {
-                                $implicit: processedData,
-                                options: { columns }
+                                $implicit: items,
+                                options: scrollerOptions
                             }
                         "
                     ></ng-container>
-                </ng-container>
-
-                <ng-template #buildInTable let-items let-scrollerOptions="options">
-                    <table #table [ngClass]="cx('table')" [class]="tableStyleClass" [style]="tableStyle" [attr.id]="id + '-table'">
-                        <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
-                        <thead #thead [ngClass]="cx('thead')" [ngStyle]="sx('thead')">
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    headerGroupedTemplate || headerTemplate || _headerTemplate;
-                                    context: {
-                                        $implicit: scrollerOptions.columns
-                                    }
-                                "
-                            ></ng-container>
-                        </thead>
-                        <tbody
-                            [ngClass]="cx('tbody')"
-                            *ngIf="frozenValue || frozenBodyTemplate || _frozenBodyTemplate"
-                            [value]="frozenValue"
-                            [frozenRows]="true"
-                            [pTableBody]="scrollerOptions.columns"
-                            [pTableBodyTemplate]="frozenBodyTemplate || _frozenBodyTemplate"
-                            [frozen]="true"
-                        ></tbody>
-                        <tbody
-                            [ngClass]="cx('tbody', scrollerOptions.contentStyleClass)"
-                            [style]="scrollerOptions.contentStyle"
-                            [value]="dataToRender(scrollerOptions.rows)"
-                            [pTableBody]="scrollerOptions.columns"
-                            [pTableBodyTemplate]="bodyTemplate || _bodyTemplate"
-                            [scrollerOptions]="scrollerOptions"
-                        ></tbody>
-                        <tbody
-                            *ngIf="scrollerOptions.spacerStyle"
-                            [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'"
-                            [ngClass]="cx('virtualScrollerSpacer')"
-                        ></tbody>
-                        <tfoot *ngIf="footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate" #tfoot [ngClass]="cx('footer')" [ngStyle]="sx('tfoot')">
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate;
-                                    context: {
-                                        $implicit: scrollerOptions.columns
-                                    }
-                                "
-                            ></ng-container>
-                        </tfoot>
-                    </table>
                 </ng-template>
-            </div>
+            </p-scroller>
+            <ng-container *ngIf="!virtualScroll">
+                <ng-container
+                    *ngTemplateOutlet="
+                        buildInTable;
+                        context: {
+                            $implicit: processedData,
+                            options: { columns }
+                        }
+                    "
+                ></ng-container>
+            </ng-container>
 
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="onPageChange($event)"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
-                [templateLeft]="paginatorLeftTemplate || _paginatorLeftTemplate"
-                [templateRight]="paginatorRightTemplate || _paginatorRightTemplate"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatorDropdownItemTemplate || _paginatorDropdownItemTemplate"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showJumpToPageInput]="showJumpToPageInput"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
-                [locale]="paginatorLocale"
-            >
-                <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template #buildInTable let-items let-scrollerOptions="options">
+                <table #table role="table" [class]="cn(cx('table'), tableStyleClass)" [style]="tableStyle" [attr.id]="id + '-table'">
+                    <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
+                    <thead role="rowgroup" #thead [class]="cx('thead')" [ngStyle]="sx('thead')">
+                        <ng-container
+                            *ngTemplateOutlet="
+                                headerGroupedTemplate || headerTemplate || _headerTemplate;
+                                context: {
+                                    $implicit: scrollerOptions.columns
+                                }
+                            "
+                        ></ng-container>
+                    </thead>
+                    <tbody
+                        role="rowgroup"
+                        [class]="cx('tbody')"
+                        *ngIf="frozenValue || frozenBodyTemplate || _frozenBodyTemplate"
+                        [value]="frozenValue"
+                        [frozenRows]="true"
+                        [pTableBody]="scrollerOptions.columns"
+                        [pTableBodyTemplate]="frozenBodyTemplate || _frozenBodyTemplate"
+                        [frozen]="true"
+                    ></tbody>
+                    <tbody
+                        role="rowgroup"
+                        [class]="cx('tbody', scrollerOptions.contentStyleClass)"
+                        [style]="scrollerOptions.contentStyle"
+                        [value]="dataToRender(scrollerOptions.rows)"
+                        [pTableBody]="scrollerOptions.columns"
+                        [pTableBodyTemplate]="bodyTemplate || _bodyTemplate"
+                        [scrollerOptions]="scrollerOptions"
+                    ></tbody>
+                    <tbody
+                        role="rowgroup"
+                        *ngIf="scrollerOptions.spacerStyle"
+                        [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'"
+                        [class]="cx('virtualScrollerSpacer')"
+                    ></tbody>
+                    <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate" #tfoot [ngClass]="cx('footer')" [ngStyle]="sx('tfoot')">
+                        <ng-container
+                            *ngTemplateOutlet="
+                                footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate;
+                                context: {
+                                    $implicit: scrollerOptions.columns
+                                }
+                            "
+                        ></ng-container>
+                    </tfoot>
+                </table>
+            </ng-template>
+        </div>
 
-                <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
-                </ng-template>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="onPageChange($event)"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
+            [templateLeft]="paginatorLeftTemplate || _paginatorLeftTemplate"
+            [templateRight]="paginatorRightTemplate || _paginatorRightTemplate"
+            [appendTo]="paginatorDropdownAppendTo"
+            [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatorDropdownItemTemplate || _paginatorDropdownItemTemplate"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showJumpToPageInput]="showJumpToPageInput"
+            [showPageLinks]="showPageLinks"
+            [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
+            [locale]="paginatorLocale"
+        >
+            <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
-                </ng-template>
-            </p-paginator>
+            <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-            <div *ngIf="summaryTemplate || _summaryTemplate" [ngClass]="cx('footer')">
-                <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
-            </div>
+            <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
+            </ng-template>
+        </p-paginator>
 
-            <div #resizeHelper [ngClass]="cx('columnResizeIndicator')" style="display:none" *ngIf="resizableColumns"></div>
-            <span #reorderIndicatorUp [ngClass]="cx('rowReorderIndicatorUp')" style="display: none;" *ngIf="reorderableColumns">
-                <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
-                <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
-            </span>
-            <span #reorderIndicatorDown [ngClass]="cx('rowReorderIndicatorDown')" style="display: none;" *ngIf="reorderableColumns">
-                <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
-                <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
-            </span>
+        <div *ngIf="summaryTemplate || _summaryTemplate" [ngClass]="cx('footer')">
+            <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i2.Paginator), selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i0.forwardRef(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => i4.Scroller), selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "component", type: i0.forwardRef(() => ArrowDownIcon), selector: "ArrowDownIcon" }, { kind: "component", type: i0.forwardRef(() => ArrowUpIcon), selector: "ArrowUpIcon" }, { kind: "component", type: i0.forwardRef(() => SpinnerIcon), selector: "SpinnerIcon" }, { kind: "component", type: i0.forwardRef(() => TableBody), selector: "[pTableBody]", inputs: ["pTableBody", "pTableBodyTemplate", "value", "frozen", "frozenRows", "scrollerOptions"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+
+        <div #resizeHelper [ngClass]="cx('columnResizeIndicator')" style="display:none" *ngIf="resizableColumns"></div>
+        <span #reorderIndicatorUp [ngClass]="cx('rowReorderIndicatorUp')" style="display: none;" *ngIf="reorderableColumns">
+            <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
+            <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
+        </span>
+        <span #reorderIndicatorDown [ngClass]="cx('rowReorderIndicatorDown')" style="display: none;" *ngIf="reorderableColumns">
+            <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
+            <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i2.Paginator), selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "directive", type: i0.forwardRef(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => i4.Scroller), selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "component", type: i0.forwardRef(() => ArrowDownIcon), selector: "ArrowDownIcon" }, { kind: "component", type: i0.forwardRef(() => ArrowUpIcon), selector: "ArrowUpIcon" }, { kind: "component", type: i0.forwardRef(() => SpinnerIcon), selector: "SpinnerIcon" }, { kind: "component", type: i0.forwardRef(() => TableBody), selector: "[pTableBody]", inputs: ["pTableBody", "pTableBodyTemplate", "value", "frozen", "frozenRows", "scrollerOptions"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Table, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Table, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-table',
                     standalone: false,
                     template: `
-        <div #container [ngStyle]="style" [class]="styleClass" [ngClass]="cx('root')" [attr.id]="id">
-            <div [ngClass]="cx('mask')" *ngIf="loading && showLoader">
-                <i *ngIf="loadingIcon" [class]="'p-datatable-loading-icon ' + loadingIcon"></i>
-                <ng-container *ngIf="!loadingIcon">
-                    <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="cx('loadingIcon')" />
-                    <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [ngClass]="cx('loadingIcon')">
-                        <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
-                    </span>
-                </ng-container>
-            </div>
-            <div *ngIf="captionTemplate || _captionTemplate" [ngClass]="cx('header')">
-                <ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
-            </div>
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="onPageChange($event)"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
-                [templateLeft]="paginatorLeftTemplate || _paginatorLeftTemplate"
-                [templateRight]="paginatorRightTemplate || _paginatorRightTemplate"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatorDropdownItemTemplate || _paginatorDropdownItemTemplate"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showJumpToPageInput]="showJumpToPageInput"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
-                [locale]="paginatorLocale"
-            >
-                <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
-                </ng-template>
-
-                <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
-                </ng-template>
+        <div [class]="cx('mask')" *ngIf="loading && showLoader">
+            <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon)"></i>
+            <ng-container *ngIf="!loadingIcon">
+                <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="cx('loadingIcon')" />
+                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
+                    <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
+                </span>
+            </ng-container>
+        </div>
+        <div *ngIf="captionTemplate || _captionTemplate" [class]="cx('header')">
+            <ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
+        </div>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="onPageChange($event)"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
+            [templateLeft]="paginatorLeftTemplate || _paginatorLeftTemplate"
+            [templateRight]="paginatorRightTemplate || _paginatorRightTemplate"
+            [appendTo]="paginatorDropdownAppendTo"
+            [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatorDropdownItemTemplate || _paginatorDropdownItemTemplate"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showJumpToPageInput]="showJumpToPageInput"
+            [showPageLinks]="showPageLinks"
+            [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
+            [locale]="paginatorLocale"
+        >
+            <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
-                </ng-template>
-            </p-paginator>
+            <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-            <div #wrapper [ngClass]="cx('tableContainer')" [ngStyle]="sx('tableContainer')">
-                <p-scroller
-                    #scroller
-                    *ngIf="virtualScroll"
-                    [items]="processedData"
-                    [columns]="columns"
-                    [style]="{
-                        height: scrollHeight !== 'flex' ? scrollHeight : undefined
-                    }"
-                    [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
-                    [itemSize]="virtualScrollItemSize || _virtualRowHeight"
-                    [step]="rows"
-                    [delay]="lazy ? virtualScrollDelay : 0"
-                    [inline]="true"
-                    [lazy]="lazy"
-                    (onLazyLoad)="onLazyItemLoad($event)"
-                    [loaderDisabled]="true"
-                    [showSpacer]="false"
-                    [showLoader]="loadingBodyTemplate || _loadingBodyTemplate"
-                    [options]="virtualScrollOptions"
-                    [autoSize]="true"
-                >
-                    <ng-template #content let-items let-scrollerOptions="options">
-                        <ng-container
-                            *ngTemplateOutlet="
-                                buildInTable;
-                                context: {
-                                    $implicit: items,
-                                    options: scrollerOptions
-                                }
-                            "
-                        ></ng-container>
-                    </ng-template>
-                </p-scroller>
-                <ng-container *ngIf="!virtualScroll">
+            <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
+            </ng-template>
+        </p-paginator>
+
+        <div #wrapper [class]="cx('tableContainer')" [ngStyle]="sx('tableContainer')">
+            <p-scroller
+                #scroller
+                *ngIf="virtualScroll"
+                [items]="processedData"
+                [columns]="columns"
+                [style]="{
+                    height: scrollHeight !== 'flex' ? scrollHeight : undefined
+                }"
+                [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
+                [itemSize]="virtualScrollItemSize"
+                [step]="rows"
+                [delay]="lazy ? virtualScrollDelay : 0"
+                [inline]="true"
+                [lazy]="lazy"
+                (onLazyLoad)="onLazyItemLoad($event)"
+                [loaderDisabled]="true"
+                [showSpacer]="false"
+                [showLoader]="loadingBodyTemplate || _loadingBodyTemplate"
+                [options]="virtualScrollOptions"
+                [autoSize]="true"
+            >
+                <ng-template #content let-items let-scrollerOptions="options">
                     <ng-container
                         *ngTemplateOutlet="
                             buildInTable;
                             context: {
-                                $implicit: processedData,
-                                options: { columns }
+                                $implicit: items,
+                                options: scrollerOptions
                             }
                         "
                     ></ng-container>
-                </ng-container>
-
-                <ng-template #buildInTable let-items let-scrollerOptions="options">
-                    <table #table [ngClass]="cx('table')" [class]="tableStyleClass" [style]="tableStyle" [attr.id]="id + '-table'">
-                        <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
-                        <thead #thead [ngClass]="cx('thead')" [ngStyle]="sx('thead')">
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    headerGroupedTemplate || headerTemplate || _headerTemplate;
-                                    context: {
-                                        $implicit: scrollerOptions.columns
-                                    }
-                                "
-                            ></ng-container>
-                        </thead>
-                        <tbody
-                            [ngClass]="cx('tbody')"
-                            *ngIf="frozenValue || frozenBodyTemplate || _frozenBodyTemplate"
-                            [value]="frozenValue"
-                            [frozenRows]="true"
-                            [pTableBody]="scrollerOptions.columns"
-                            [pTableBodyTemplate]="frozenBodyTemplate || _frozenBodyTemplate"
-                            [frozen]="true"
-                        ></tbody>
-                        <tbody
-                            [ngClass]="cx('tbody', scrollerOptions.contentStyleClass)"
-                            [style]="scrollerOptions.contentStyle"
-                            [value]="dataToRender(scrollerOptions.rows)"
-                            [pTableBody]="scrollerOptions.columns"
-                            [pTableBodyTemplate]="bodyTemplate || _bodyTemplate"
-                            [scrollerOptions]="scrollerOptions"
-                        ></tbody>
-                        <tbody
-                            *ngIf="scrollerOptions.spacerStyle"
-                            [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'"
-                            [ngClass]="cx('virtualScrollerSpacer')"
-                        ></tbody>
-                        <tfoot *ngIf="footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate" #tfoot [ngClass]="cx('footer')" [ngStyle]="sx('tfoot')">
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate;
-                                    context: {
-                                        $implicit: scrollerOptions.columns
-                                    }
-                                "
-                            ></ng-container>
-                        </tfoot>
-                    </table>
                 </ng-template>
-            </div>
+            </p-scroller>
+            <ng-container *ngIf="!virtualScroll">
+                <ng-container
+                    *ngTemplateOutlet="
+                        buildInTable;
+                        context: {
+                            $implicit: processedData,
+                            options: { columns }
+                        }
+                    "
+                ></ng-container>
+            </ng-container>
 
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="onPageChange($event)"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
-                [templateLeft]="paginatorLeftTemplate || _paginatorLeftTemplate"
-                [templateRight]="paginatorRightTemplate || _paginatorRightTemplate"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatorDropdownItemTemplate || _paginatorDropdownItemTemplate"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showJumpToPageInput]="showJumpToPageInput"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
-                [locale]="paginatorLocale"
-            >
-                <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template #buildInTable let-items let-scrollerOptions="options">
+                <table #table role="table" [class]="cn(cx('table'), tableStyleClass)" [style]="tableStyle" [attr.id]="id + '-table'">
+                    <ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: scrollerOptions.columns }"></ng-container>
+                    <thead role="rowgroup" #thead [class]="cx('thead')" [ngStyle]="sx('thead')">
+                        <ng-container
+                            *ngTemplateOutlet="
+                                headerGroupedTemplate || headerTemplate || _headerTemplate;
+                                context: {
+                                    $implicit: scrollerOptions.columns
+                                }
+                            "
+                        ></ng-container>
+                    </thead>
+                    <tbody
+                        role="rowgroup"
+                        [class]="cx('tbody')"
+                        *ngIf="frozenValue || frozenBodyTemplate || _frozenBodyTemplate"
+                        [value]="frozenValue"
+                        [frozenRows]="true"
+                        [pTableBody]="scrollerOptions.columns"
+                        [pTableBodyTemplate]="frozenBodyTemplate || _frozenBodyTemplate"
+                        [frozen]="true"
+                    ></tbody>
+                    <tbody
+                        role="rowgroup"
+                        [class]="cx('tbody', scrollerOptions.contentStyleClass)"
+                        [style]="scrollerOptions.contentStyle"
+                        [value]="dataToRender(scrollerOptions.rows)"
+                        [pTableBody]="scrollerOptions.columns"
+                        [pTableBodyTemplate]="bodyTemplate || _bodyTemplate"
+                        [scrollerOptions]="scrollerOptions"
+                    ></tbody>
+                    <tbody
+                        role="rowgroup"
+                        *ngIf="scrollerOptions.spacerStyle"
+                        [style]="'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'"
+                        [class]="cx('virtualScrollerSpacer')"
+                    ></tbody>
+                    <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate" #tfoot [ngClass]="cx('footer')" [ngStyle]="sx('tfoot')">
+                        <ng-container
+                            *ngTemplateOutlet="
+                                footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate;
+                                context: {
+                                    $implicit: scrollerOptions.columns
+                                }
+                            "
+                        ></ng-container>
+                    </tfoot>
+                </table>
+            </ng-template>
+        </div>
 
-                <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
-                </ng-template>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="onPageChange($event)"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
+            [templateLeft]="paginatorLeftTemplate || _paginatorLeftTemplate"
+            [templateRight]="paginatorRightTemplate || _paginatorRightTemplate"
+            [appendTo]="paginatorDropdownAppendTo"
+            [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatorDropdownItemTemplate || _paginatorDropdownItemTemplate"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showJumpToPageInput]="showJumpToPageInput"
+            [showPageLinks]="showPageLinks"
+            [styleClass]="cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass"
+            [locale]="paginatorLocale"
+        >
+            <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
-                </ng-template>
+            <ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-                <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
-                    <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
-                </ng-template>
-            </p-paginator>
+            <ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
+            </ng-template>
 
-            <div *ngIf="summaryTemplate || _summaryTemplate" [ngClass]="cx('footer')">
-                <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
-            </div>
+            <ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
+                <ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
+            </ng-template>
+        </p-paginator>
 
-            <div #resizeHelper [ngClass]="cx('columnResizeIndicator')" style="display:none" *ngIf="resizableColumns"></div>
-            <span #reorderIndicatorUp [ngClass]="cx('rowReorderIndicatorUp')" style="display: none;" *ngIf="reorderableColumns">
-                <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
-                <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
-            </span>
-            <span #reorderIndicatorDown [ngClass]="cx('rowReorderIndicatorDown')" style="display: none;" *ngIf="reorderableColumns">
-                <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
-                <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
-            </span>
+        <div *ngIf="summaryTemplate || _summaryTemplate" [ngClass]="cx('footer')">
+            <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
         </div>
+
+        <div #resizeHelper [ngClass]="cx('columnResizeIndicator')" style="display:none" *ngIf="resizableColumns"></div>
+        <span #reorderIndicatorUp [ngClass]="cx('rowReorderIndicatorUp')" style="display: none;" *ngIf="reorderableColumns">
+            <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
+            <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
+        </span>
+        <span #reorderIndicatorDown [ngClass]="cx('rowReorderIndicatorDown')" style="display: none;" *ngIf="reorderableColumns">
+            <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
+            <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
+        </span>
     `,
                     providers: [TableService, TableStyle],
                     changeDetection: ChangeDetectionStrategy.Default,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[attr.id]': 'id',
+                        '[class]': "cn(cx('root'), styleClass)"
+                    }
                 }]
         }], propDecorators: { frozenColumns: [{
                 type: Input
             }], frozenValue: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], tableStyle: [{
@@ -4058,8 +3585,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], scrollable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], scrollDirection: [{
-                type: Input
             }], rowGroupMode: [{
                 type: Input
             }], scrollHeight: [{
@@ -4077,8 +3602,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [{ transform: numberAttribute }]
             }], frozenWidth: [{
                 type: Input
-            }], responsive: [{
-                type: Input
             }], contextMenu: [{
                 type: Input
             }], resizableColumns: [{
@@ -4106,9 +3629,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], showInitialSortBadge: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], autoLayout: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], exportFunction: [{
                 type: Input
             }], exportHeader: [{
@@ -4156,8 +3676,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], selection: [{
                 type: Input
-            }], virtualRowHeight: [{
-                type: Input
             }], selectAll: [{
                 type: Input
             }], selectAllChange: [{
@@ -4206,9 +3724,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Output
             }], onStateRestore: [{
                 type: Output
-            }], containerViewChild: [{
-                type: ViewChild,
-                args: ['container']
             }], resizeHelperViewChild: [{
                 type: ViewChild,
                 args: ['resizeHelper']
@@ -4451,8 +3966,8 @@ class TableBody {
         const getItemOptions = this.getScrollerOption('getItemOptions');
         return getItemOptions ? getItemOptions(index).index : index;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableBody, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: TableBody, isStandalone: false, selector: "[pTableBody]", inputs: { columns: ["pTableBody", "columns"], template: ["pTableBodyTemplate", "template"], value: "value", frozen: ["frozen", "frozen", booleanAttribute], frozenRows: ["frozenRows", "frozenRows", booleanAttribute], scrollerOptions: "scrollerOptions" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableBody, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: TableBody, isStandalone: false, selector: "[pTableBody]", inputs: { columns: ["pTableBody", "columns"], template: ["pTableBodyTemplate", "template"], value: "value", frozen: ["frozen", "frozen", booleanAttribute], frozenRows: ["frozenRows", "frozenRows", booleanAttribute], scrollerOptions: "scrollerOptions" }, ngImport: i0, template: `
         <ng-container *ngIf="!dt.expandedRowTemplate && !dt._expandedRowTemplate">
             <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
                 <ng-container *ngIf="(dt.groupHeaderTemplate || dt._groupHeaderTemplate) && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))" role="row">
@@ -4615,7 +4130,7 @@ class TableBody {
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableBody, decorators: [{
             type: Component,
             args: [{
                     selector: '[pTableBody]',
@@ -4810,10 +4325,10 @@ class RowGroupHeader {
     get getFrozenRowGroupHeaderStickyPosition() {
         return this.dt.rowGroupHeaderStyleObject ? this.dt.rowGroupHeaderStyleObject.top : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RowGroupHeader, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: RowGroupHeader, isStandalone: false, selector: "[pRowGroupHeader]", host: { properties: { "style.top": "getFrozenRowGroupHeaderStickyPosition" }, classAttribute: "p-datatable-row-group-header" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: RowGroupHeader, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: RowGroupHeader, isStandalone: false, selector: "[pRowGroupHeader]", host: { properties: { "style.top": "getFrozenRowGroupHeaderStickyPosition" }, classAttribute: "p-datatable-row-group-header" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RowGroupHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: RowGroupHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pRowGroupHeader]',
@@ -4885,10 +4400,10 @@ class FrozenColumn {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FrozenColumn, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: FrozenColumn, isStandalone: false, selector: "[pFrozenColumn]", inputs: { frozen: "frozen", alignFrozen: "alignFrozen" }, host: { listeners: { "window:resize": "recalculateColumns($event)" }, properties: { "class.p-datatable-frozen-column": "frozen", "class.p-datatable-frozen-column-left": "alignFrozen === \"left\"" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FrozenColumn, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: FrozenColumn, isStandalone: false, selector: "[pFrozenColumn]", inputs: { frozen: "frozen", alignFrozen: "alignFrozen" }, host: { listeners: { "window:resize": "recalculateColumns($event)" }, properties: { "class.p-datatable-frozen-column": "frozen", "class.p-datatable-frozen-column-left": "alignFrozen === \"left\"" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FrozenColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FrozenColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pFrozenColumn]',
@@ -4906,7 +4421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }] } });
-class SortableColumn {
+class SortableColumn extends BaseComponent {
     dt;
     #elementRef = inject(ElementRef);
     field;
@@ -4915,7 +4430,9 @@ class SortableColumn {
     sorted;
     sortOrder;
     subscription;
+    _componentStyle = inject(TableStyle);
     constructor(dt) {
+        super();
         this.dt = dt;
         if (this.isEnabled()) {
             this.subscription = this.dt.tableService.sortSource$.subscribe((sortMeta) => {
@@ -4924,6 +4441,7 @@ class SortableColumn {
         }
     }
     ngOnInit() {
+        super.ngOnInit();
         if (this.isEnabled()) {
             this.updateSortState();
         }
@@ -4967,25 +4485,26 @@ class SortableColumn {
         return DomHandler.hasClass(element, 'pi-filter-icon') || DomHandler.hasClass(element, 'p-column-filter-menu-button');
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SortableColumn, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: SortableColumn, isStandalone: false, selector: "[pSortableColumn]", inputs: { field: ["pSortableColumn", "field"], pSortableColumnDisabled: ["pSortableColumnDisabled", "pSortableColumnDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown.space": "onEnterKey($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class.p-datatable-sortable-column": "isEnabled()", "class.p-datatable-column-sorted": "sorted", "attr.tabindex": "isEnabled() ? \"0\" : null", "attr.role": "role", "attr.aria-sort": "sortOrder" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortableColumn, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: SortableColumn, isStandalone: false, selector: "[pSortableColumn]", inputs: { field: ["pSortableColumn", "field"], pSortableColumnDisabled: ["pSortableColumnDisabled", "pSortableColumnDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown.space": "onEnterKey($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class": "cx('sortableColumn')", "tabindex": "isEnabled() ? \"0\" : null", "role": "\"columnheader\"", "aria-sort": "sortOrder" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SortableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSortableColumn]',
                     standalone: false,
                     host: {
-                        '[class.p-datatable-sortable-column]': 'isEnabled()',
-                        '[class.p-datatable-column-sorted]': 'sorted',
-                        '[attr.tabindex]': 'isEnabled() ? "0" : null',
-                        '[attr.role]': 'role',
-                        '[attr.aria-sort]': 'sortOrder'
-                    }
+                        '[class]': "cx('sortableColumn')",
+                        '[tabindex]': 'isEnabled() ? "0" : null',
+                        '[role]': '"columnheader"',
+                        '[aria-sort]': 'sortOrder'
+                    },
+                    providers: [TableStyle]
                 }]
         }], ctorParameters: () => [{ type: Table }], propDecorators: { field: [{
                 type: Input,
@@ -5003,13 +4522,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
             }] } });
-class SortIcon {
+class SortIcon extends BaseComponent {
     dt;
     cd;
     field;
     subscription;
     sortOrder;
+    _componentStyle = inject(TableStyle);
     constructor(dt, cd) {
+        super();
         this.dt = dt;
         this.cd = cd;
         this.subscription = this.dt.tableService.sortSource$.subscribe((sortMeta) => {
@@ -5017,6 +4538,7 @@ class SortIcon {
         });
     }
     ngOnInit() {
+        super.ngOnInit();
         this.updateSortState();
     }
     onClick(event) {
@@ -5054,58 +4576,60 @@ class SortIcon {
         return this.dt.sortMode === 'multiple' && this.getMultiSortMetaIndex() > -1;
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SortIcon, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: SortIcon, isStandalone: false, selector: "p-sortIcon", inputs: { field: "field" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortIcon, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SortIcon, isStandalone: false, selector: "p-sortIcon", inputs: { field: "field" }, providers: [TableStyle], usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="!(dt.sortIconTemplate || dt._sortIconTemplate)">
-            <SortAltIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === 0" />
-            <SortAmountUpAltIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === 1" />
-            <SortAmountDownIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === -1" />
+            <SortAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 0" />
+            <SortAmountUpAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" />
+            <SortAmountDownIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" />
         </ng-container>
-        <span *ngIf="dt.sortIconTemplate || dt._sortIconTemplate" class="p-sortable-column-icon">
+        <span *ngIf="dt.sortIconTemplate || dt._sortIconTemplate" [class]="cx('sortableColumnIcon')">
             <ng-template *ngTemplateOutlet="dt.sortIconTemplate || dt._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
         </span>
-        <span *ngIf="isMultiSorted()" class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => SortAltIcon), selector: "SortAltIcon" }, { kind: "component", type: i0.forwardRef(() => SortAmountUpAltIcon), selector: "SortAmountUpAltIcon" }, { kind: "component", type: i0.forwardRef(() => SortAmountDownIcon), selector: "SortAmountDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        <p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small"></p-badge>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => i5.Badge), selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "component", type: i0.forwardRef(() => SortAltIcon), selector: "SortAltIcon" }, { kind: "component", type: i0.forwardRef(() => SortAmountUpAltIcon), selector: "SortAmountUpAltIcon" }, { kind: "component", type: i0.forwardRef(() => SortAmountDownIcon), selector: "SortAmountDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SortIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-sortIcon',
                     standalone: false,
                     template: `
         <ng-container *ngIf="!(dt.sortIconTemplate || dt._sortIconTemplate)">
-            <SortAltIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === 0" />
-            <SortAmountUpAltIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === 1" />
-            <SortAmountDownIcon [styleClass]="'p-sortable-column-icon'" *ngIf="sortOrder === -1" />
+            <SortAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 0" />
+            <SortAmountUpAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" />
+            <SortAmountDownIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" />
         </ng-container>
-        <span *ngIf="dt.sortIconTemplate || dt._sortIconTemplate" class="p-sortable-column-icon">
+        <span *ngIf="dt.sortIconTemplate || dt._sortIconTemplate" [class]="cx('sortableColumnIcon')">
             <ng-template *ngTemplateOutlet="dt.sortIconTemplate || dt._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
         </span>
-        <span *ngIf="isMultiSorted()" class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
+        <p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small"></p-badge>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [TableStyle]
                 }]
         }], ctorParameters: () => [{ type: Table }, { type: i0.ChangeDetectorRef }], propDecorators: { field: [{
                 type: Input
             }] } });
-class SelectableRow {
+class SelectableRow extends BaseComponent {
     dt;
     tableService;
-    el;
     data;
     index;
     pSelectableRowDisabled;
     selected;
     subscription;
-    constructor(dt, tableService, el) {
+    _componentStyle = inject(TableStyle);
+    constructor(dt, tableService) {
+        super();
         this.dt = dt;
         this.tableService = tableService;
-        this.el = el;
         if (this.isEnabled()) {
             this.subscription = this.dt.tableService.selectionSource$.subscribe(() => {
                 this.selected = this.dt.isSelected(this.data);
@@ -5118,6 +4642,7 @@ class SelectableRow {
         }
     }
     ngOnInit() {
+        super.ngOnInit();
         if (this.isEnabled()) {
             this.selected = this.dt.isSelected(this.data);
         }
@@ -5289,26 +4814,27 @@ class SelectableRow {
         return this.pSelectableRowDisabled !== true;
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectableRow, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: SelectableRow, isStandalone: false, selector: "[pSelectableRow]", inputs: { data: ["pSelectableRow", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: ["pSelectableRowDisabled", "pSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "touchend": "onTouchEnd($event)", "keydown": "onKeyDown($event)" }, properties: { "class.p-datatable-selectable-row": "isEnabled()", "class.p-datatable-row-selected": "selected", "attr.tabindex": "setRowTabIndex()", "attr.data-p-selectable-row": "true" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectableRow, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: SelectableRow, isStandalone: false, selector: "[pSelectableRow]", inputs: { data: ["pSelectableRow", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: ["pSelectableRowDisabled", "pSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "touchend": "onTouchEnd($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "cx('selectableRow')", "tabindex": "setRowTabIndex()", "data-p-selectable-row": "true" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSelectableRow]',
                     standalone: false,
                     host: {
-                        '[class.p-datatable-selectable-row]': 'isEnabled()',
-                        '[class.p-datatable-row-selected]': 'selected',
-                        '[attr.tabindex]': 'setRowTabIndex()',
-                        '[attr.data-p-selectable-row]': 'true'
-                    }
+                        '[class]': "cx('selectableRow')",
+                        '[tabindex]': 'setRowTabIndex()',
+                        '[data-p-selectable-row]': 'true'
+                    },
+                    providers: [TableStyle]
                 }]
-        }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ElementRef }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: Table }, { type: TableService }], propDecorators: { data: [{
                 type: Input,
                 args: ['pSelectableRow']
             }], index: [{
@@ -5366,10 +4892,10 @@ class SelectableRowDblClick {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectableRowDblClick, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: SelectableRowDblClick, isStandalone: false, selector: "[pSelectableRowDblClick]", inputs: { data: ["pSelectableRowDblClick", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: ["pSelectableRowDisabled", "pSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class.p-selectable-row": "isEnabled()", "class.p-highlight": "selected" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectableRowDblClick, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: SelectableRowDblClick, isStandalone: false, selector: "[pSelectableRowDblClick]", inputs: { data: ["pSelectableRowDblClick", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: ["pSelectableRowDisabled", "pSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class.p-selectable-row": "isEnabled()", "class.p-highlight": "selected" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectableRowDblClick, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectableRowDblClick, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSelectableRowDblClick]',
@@ -5430,16 +4956,16 @@ class ContextMenuRow {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ContextMenuRow, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: ContextMenuRow, isStandalone: false, selector: "[pContextMenuRow]", inputs: { data: ["pContextMenuRow", "data"], index: ["pContextMenuRowIndex", "index"], pContextMenuRowDisabled: ["pContextMenuRowDisabled", "pContextMenuRowDisabled", booleanAttribute] }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class.p-highlight-contextmenu": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ContextMenuRow, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: ContextMenuRow, isStandalone: false, selector: "[pContextMenuRow]", inputs: { data: ["pContextMenuRow", "data"], index: ["pContextMenuRowIndex", "index"], pContextMenuRowDisabled: ["pContextMenuRowDisabled", "pContextMenuRowDisabled", booleanAttribute] }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class.p-datatable-contextmenu-row-selected": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ContextMenuRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ContextMenuRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pContextMenuRow]',
                     standalone: false,
                     host: {
-                        '[class.p-highlight-contextmenu]': 'selected',
+                        '[class.p-datatable-contextmenu-row-selected]': 'selected',
                         '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
                     }
                 }]
@@ -5472,10 +4998,10 @@ class RowToggler {
     isEnabled() {
         return this.pRowTogglerDisabled !== true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RowToggler, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: RowToggler, isStandalone: false, selector: "[pRowToggler]", inputs: { data: ["pRowToggler", "data"], pRowTogglerDisabled: ["pRowTogglerDisabled", "pRowTogglerDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: RowToggler, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: RowToggler, isStandalone: false, selector: "[pRowToggler]", inputs: { data: ["pRowToggler", "data"], pRowTogglerDisabled: ["pRowTogglerDisabled", "pRowTogglerDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RowToggler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: RowToggler, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pRowToggler]',
@@ -5491,10 +5017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
-class ResizableColumn {
-    document;
-    platformId;
-    renderer;
+class ResizableColumn extends BaseComponent {
     dt;
     el;
     zone;
@@ -5506,15 +5029,15 @@ class ResizableColumn {
     resizerTouchEndListener;
     documentMouseMoveListener;
     documentMouseUpListener;
-    constructor(document, platformId, renderer, dt, el, zone) {
-        this.document = document;
-        this.platformId = platformId;
-        this.renderer = renderer;
+    _componentStyle = inject(TableStyle);
+    constructor(dt, el, zone) {
+        super();
         this.dt = dt;
         this.el = el;
         this.zone = zone;
     }
     ngAfterViewInit() {
+        super.ngAfterViewInit();
         if (isPlatformBrowser(this.platformId)) {
             if (this.isEnabled()) {
                 DomHandler.addClass(this.el.nativeElement, 'p-datatable-resizable-column');
@@ -5580,37 +5103,31 @@ class ResizableColumn {
         return this.pResizableColumnDisabled !== true;
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.resizerMouseDownListener) {
             this.resizerMouseDownListener();
             this.resizerMouseDownListener = null;
         }
         this.unbindDocumentEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ResizableColumn, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: ResizableColumn, isStandalone: false, selector: "[pResizableColumn]", inputs: { pResizableColumnDisabled: ["pResizableColumnDisabled", "pResizableColumnDisabled", booleanAttribute] }, host: { classAttribute: "p-datatable-resizable-column" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ResizableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: ResizableColumn, isStandalone: false, selector: "[pResizableColumn]", inputs: { pResizableColumnDisabled: ["pResizableColumnDisabled", "pResizableColumnDisabled", booleanAttribute] }, host: { properties: { "class": "cx('resizableColumn')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ResizableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ResizableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pResizableColumn]',
                     standalone: false,
                     host: {
-                        class: 'p-datatable-resizable-column'
-                    }
+                        '[class]': "cx('resizableColumn')"
+                    },
+                    providers: [TableStyle]
                 }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.Renderer2 }, { type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { pResizableColumnDisabled: [{
+        }], ctorParameters: () => [{ type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { pResizableColumnDisabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }] } });
-class ReorderableColumn {
-    platformId;
-    renderer;
+class ReorderableColumn extends BaseComponent {
     dt;
     el;
     zone;
@@ -5620,14 +5137,15 @@ class ReorderableColumn {
     dragEnterListener;
     dragLeaveListener;
     mouseDownListener;
-    constructor(platformId, renderer, dt, el, zone) {
-        this.platformId = platformId;
-        this.renderer = renderer;
+    _componentStyle = inject(TableStyle);
+    constructor(dt, el, zone) {
+        super();
         this.dt = dt;
         this.el = el;
         this.zone = zone;
     }
     ngAfterViewInit() {
+        super.ngAfterViewInit();
         if (this.isEnabled()) {
             this.bindEvents();
         }
@@ -5692,24 +5210,23 @@ class ReorderableColumn {
         return this.pReorderableColumnDisabled !== true;
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this.unbindEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ReorderableColumn, deps: [{ token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: ReorderableColumn, isStandalone: false, selector: "[pReorderableColumn]", inputs: { pReorderableColumnDisabled: ["pReorderableColumnDisabled", "pReorderableColumnDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" }, classAttribute: "p-datatable-reorderable-column" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ReorderableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: ReorderableColumn, isStandalone: false, selector: "[pReorderableColumn]", inputs: { pReorderableColumnDisabled: ["pReorderableColumnDisabled", "pReorderableColumnDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" }, properties: { "class": "cx('reorderableColumn')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ReorderableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ReorderableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pReorderableColumn]',
                     standalone: false,
                     host: {
-                        class: 'p-datatable-reorderable-column'
-                    }
+                        '[class]': "cx('reorderableColumn')"
+                    },
+                    providers: [TableStyle]
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.Renderer2 }, { type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { pReorderableColumnDisabled: [{
+        }], ctorParameters: () => [{ type: Table }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { pReorderableColumnDisabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], onDrop: [{
@@ -6001,10 +5518,10 @@ class EditableColumn {
             this.dt.overlaySubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: EditableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: EditableColumn, isStandalone: false, selector: "[pEditableColumn]", inputs: { data: ["pEditableColumn", "data"], field: ["pEditableColumnField", "field"], rowIndex: ["pEditableColumnRowIndex", "rowIndex"], pEditableColumnDisabled: ["pEditableColumnDisabled", "pEditableColumnDisabled", booleanAttribute], pFocusCellSelector: "pFocusCellSelector" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.escape": "onEscapeKeyDown($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)" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: EditableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: EditableColumn, isStandalone: false, selector: "[pEditableColumn]", inputs: { data: ["pEditableColumn", "data"], field: ["pEditableColumnField", "field"], rowIndex: ["pEditableColumnRowIndex", "rowIndex"], pEditableColumnDisabled: ["pEditableColumnDisabled", "pEditableColumnDisabled", booleanAttribute], pFocusCellSelector: "pFocusCellSelector" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.escape": "onEscapeKeyDown($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)" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: EditableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: EditableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pEditableColumn]',
@@ -6068,10 +5585,10 @@ class EditableRow {
     isEnabled() {
         return this.pEditableRowDisabled !== true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: EditableRow, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: EditableRow, isStandalone: false, selector: "[pEditableRow]", inputs: { data: ["pEditableRow", "data"], pEditableRowDisabled: ["pEditableRowDisabled", "pEditableRowDisabled", booleanAttribute] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: EditableRow, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: EditableRow, isStandalone: false, selector: "[pEditableRow]", inputs: { data: ["pEditableRow", "data"], pEditableRowDisabled: ["pEditableRowDisabled", "pEditableRowDisabled", booleanAttribute] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: EditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: EditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pEditableRow]',
@@ -6095,10 +5612,10 @@ class InitEditableRow {
         this.dt.initRowEdit(this.editableRow.data);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: InitEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: InitEditableRow, isStandalone: false, selector: "[pInitEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-init" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InitEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: InitEditableRow, isStandalone: false, selector: "[pInitEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-init" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: InitEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InitEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pInitEditableRow]',
@@ -6122,10 +5639,10 @@ class SaveEditableRow {
         this.dt.saveRowEdit(this.editableRow.data, this.editableRow.el.nativeElement);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SaveEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: SaveEditableRow, isStandalone: false, selector: "[pSaveEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-save" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SaveEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SaveEditableRow, isStandalone: false, selector: "[pSaveEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-save" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SaveEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SaveEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pSaveEditableRow]',
@@ -6138,28 +5655,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
-class CancelEditableRow {
+class CancelEditableRow extends BaseComponent {
     dt;
     editableRow;
     constructor(dt, editableRow) {
+        super();
         this.dt = dt;
         this.editableRow = editableRow;
     }
+    _componentStyle = inject(TableStyle);
     onClick(event) {
         this.dt.cancelRowEdit(this.editableRow.data);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CancelEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: CancelEditableRow, isStandalone: false, selector: "[pCancelEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "p-datatable-row-editor-cancel" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CancelEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: CancelEditableRow, isStandalone: false, selector: "[pCancelEditableRow]", host: { listeners: { "click": "onClick($event)" }, properties: { "class": "cx('rowEditorCancel')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CancelEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CancelEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pCancelEditableRow]',
                     standalone: false,
                     host: {
-                        class: 'p-datatable-row-editor-cancel'
-                    }
+                        '[class]': "cx('rowEditorCancel')"
+                    },
+                    providers: [TableStyle]
                 }]
         }], ctorParameters: () => [{ type: Table }, { type: EditableRow }], propDecorators: { onClick: [{
                 type: HostListener,
@@ -6194,8 +5714,8 @@ class CellEditor {
     get editing() {
         return (this.dt.editingCell && this.editableColumn && this.dt.editingCell === this.editableColumn.el.nativeElement) || (this.editableRow && this.dt.editMode === 'row' && this.dt.isRowEditing(this.editableRow.data));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CellEditor, deps: [{ token: Table }, { token: EditableColumn, optional: true }, { token: EditableRow, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: CellEditor, isStandalone: false, selector: "p-cellEditor", queries: [{ propertyName: "_inputTemplate", first: true, predicate: ["input"], descendants: true }, { propertyName: "_outputTemplate", first: true, predicate: ["output"], descendants: true }, { propertyName: "_templates", predicate: PrimeTemplate }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellEditor, deps: [{ token: Table }, { token: EditableColumn, optional: true }, { token: EditableRow, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: CellEditor, isStandalone: false, selector: "p-cellEditor", queries: [{ propertyName: "_inputTemplate", first: true, predicate: ["input"], descendants: true }, { propertyName: "_outputTemplate", first: true, predicate: ["output"], descendants: true }, { propertyName: "_templates", predicate: PrimeTemplate }], ngImport: i0, template: `
         <ng-container *ngIf="editing">
             <ng-container *ngTemplateOutlet="inputTemplate || _inputTemplate"></ng-container>
         </ng-container>
@@ -6204,7 +5724,7 @@ class CellEditor {
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CellEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellEditor, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-cellEditor',
@@ -6272,10 +5792,10 @@ class TableRadioButton {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableRadioButton, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: TableRadioButton, isStandalone: false, selector: "p-tableRadioButton", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["rb"], descendants: true }], ngImport: i0, template: ` <p-radioButton #rb [(ngModel)]="checked" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel" [binary]="true" [value]="value" (onClick)="onClick($event)" /> `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableRadioButton, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: TableRadioButton, isStandalone: false, selector: "p-tableRadioButton", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["rb"], descendants: true }], ngImport: i0, template: ` <p-radioButton #rb [(ngModel)]="checked" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel" [binary]="true" [value]="value" (onClick)="onClick($event)" /> `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableRadioButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableRadioButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableRadioButton',
@@ -6332,8 +5852,8 @@ class TableCheckbox {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: TableCheckbox, isStandalone: false, selector: "p-tableCheckbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TableCheckbox, isStandalone: false, selector: "p-tableCheckbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         <p-checkbox [(ngModel)]="checked" [binary]="true" (onChange)="onClick($event)" [required]="required()" [disabled]="disabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel">
             @if (dt.checkboxIconTemplate || dt._checkboxIconTemplate; as template) {
                 <ng-template pTemplate="icon">
@@ -6341,9 +5861,9 @@ class TableCheckbox {
                 </ng-template>
             }
         </p-checkbox>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableCheckbox',
@@ -6422,8 +5942,8 @@ class TableHeaderCheckbox {
             return ObjectUtils.isNotEmpty(selectableVal) && ObjectUtils.isNotEmpty(this.dt.selection) && selectableVal.every((v) => this.dt.selection.some((s) => this.dt.equals(v, s)));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableHeaderCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: TableHeaderCheckbox, isStandalone: false, selector: "p-tableHeaderCheckbox", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableHeaderCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TableHeaderCheckbox, isStandalone: false, selector: "p-tableHeaderCheckbox", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         <p-checkbox [(ngModel)]="checked" (onChange)="onClick($event)" [binary]="true" [disabled]="isDisabled()" [inputId]="inputId()" [name]="name()" [ariaLabel]="ariaLabel">
             @if (dt.headerCheckboxIconTemplate || dt._headerCheckboxIconTemplate; as template) {
                 <ng-template pTemplate="icon">
@@ -6431,9 +5951,9 @@ class TableHeaderCheckbox {
                 </ng-template>
             }
         </p-checkbox>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableHeaderCheckbox',
@@ -6453,25 +5973,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { ariaLabel: [{
                 type: Input
             }] } });
-class ReorderableRowHandle {
+class ReorderableRowHandle extends BaseComponent {
     el;
+    _componentStyle = inject(TableStyle);
     constructor(el) {
+        super();
         this.el = el;
     }
     ngAfterViewInit() {
         // DomHandler.addClass(this.el.nativeElement, 'p-datatable-reorderable-row-handle');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ReorderableRowHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: ReorderableRowHandle, isStandalone: false, selector: "[pReorderableRowHandle]", host: { classAttribute: "p-datatable-reorderable-row-handle" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ReorderableRowHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: ReorderableRowHandle, isStandalone: false, selector: "[pReorderableRowHandle]", host: { properties: { "class": "cx('reorderableRowHandle')" } }, providers: [TableStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ReorderableRowHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ReorderableRowHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pReorderableRowHandle]',
                     standalone: false,
                     host: {
-                        class: 'p-datatable-reorderable-row-handle'
-                    }
+                        '[class]': "cx('reorderableRowHandle')"
+                    },
+                    providers: [TableStyle]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 class ReorderableRow {
@@ -6570,10 +6093,10 @@ class ReorderableRow {
     ngOnDestroy() {
         this.unbindEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ReorderableRow, deps: [{ token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: ReorderableRow, isStandalone: false, selector: "[pReorderableRow]", inputs: { index: ["pReorderableRow", "index"], pReorderableRowDisabled: ["pReorderableRowDisabled", "pReorderableRowDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ReorderableRow, deps: [{ token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.6", type: ReorderableRow, isStandalone: false, selector: "[pReorderableRow]", inputs: { index: ["pReorderableRow", "index"], pReorderableRowDisabled: ["pReorderableRowDisabled", "pReorderableRowDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ReorderableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ReorderableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pReorderableRow]',
@@ -6650,7 +6173,7 @@ class ColumnFilter extends BaseComponent {
      * Decides whether to close popup on clear button click.
      * @group Props
      */
-    hideOnClear = false;
+    hideOnClear = true;
     /**
      * Filter placeholder.
      * @group Props
@@ -6706,6 +6229,12 @@ class ColumnFilter extends BaseComponent {
      * @group Props
      */
     currencyDisplay;
+    /**
+     * Default trigger to run filtering on built-in text and numeric filters, valid values are 'enter' and 'input'.
+     * @defaultValue enter
+     * @group Props
+     */
+    filterOn = 'enter';
     /**
      * Defines if filter grouping will be enabled.
      * @group Props
@@ -7207,9 +6736,9 @@ class ColumnFilter extends BaseComponent {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: ColumnFilter, isStandalone: false, selector: "p-columnFilter", inputs: { field: "field", type: "type", display: "display", showMenu: ["showMenu", "showMenu", booleanAttribute], matchMode: "matchMode", operator: "operator", showOperator: ["showOperator", "showOperator", booleanAttribute], showClearButton: ["showClearButton", "showClearButton", booleanAttribute], showApplyButton: ["showApplyButton", "showApplyButton", booleanAttribute], showMatchModes: ["showMatchModes", "showMatchModes", booleanAttribute], showAddButton: ["showAddButton", "showAddButton", booleanAttribute], hideOnClear: ["hideOnClear", "hideOnClear", booleanAttribute], placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: ["maxConstraints", "maxConstraints", numberAttribute], minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], showButtons: ["showButtons", "showButtons", booleanAttribute], ariaLabel: "ariaLabel", filterButtonProps: "filterButtonProps" }, outputs: { onShow: "onShow", onHide: "onHide" }, queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "_removeRuleIconTemplate", first: true, predicate: ["removeruleicon"] }, { propertyName: "_addRuleIconTemplate", first: true, predicate: ["addruleicon"] }, { propertyName: "_clearFilterIconTemplate", first: true, predicate: ["clearfiltericon"] }, { propertyName: "_templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "icon", first: true, predicate: Button, descendants: true, read: ElementRef }, { propertyName: "clearButtonViewChild", first: true, predicate: ["clearBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div [ngClass]="cx('filter')">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColumnFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: ColumnFilter, isStandalone: false, selector: "p-columnFilter", inputs: { field: "field", type: "type", display: "display", showMenu: ["showMenu", "showMenu", booleanAttribute], matchMode: "matchMode", operator: "operator", showOperator: ["showOperator", "showOperator", booleanAttribute], showClearButton: ["showClearButton", "showClearButton", booleanAttribute], showApplyButton: ["showApplyButton", "showApplyButton", booleanAttribute], showMatchModes: ["showMatchModes", "showMatchModes", booleanAttribute], showAddButton: ["showAddButton", "showAddButton", booleanAttribute], hideOnClear: ["hideOnClear", "hideOnClear", booleanAttribute], placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: ["maxConstraints", "maxConstraints", numberAttribute], minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", filterOn: "filterOn", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], showButtons: ["showButtons", "showButtons", booleanAttribute], ariaLabel: "ariaLabel", filterButtonProps: "filterButtonProps" }, outputs: { onShow: "onShow", onHide: "onHide" }, queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "_removeRuleIconTemplate", first: true, predicate: ["removeruleicon"] }, { propertyName: "_addRuleIconTemplate", first: true, predicate: ["addruleicon"] }, { propertyName: "_clearFilterIconTemplate", first: true, predicate: ["clearfiltericon"] }, { propertyName: "_templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "icon", first: true, predicate: Button, descendants: true, read: ElementRef }, { propertyName: "clearButtonViewChild", first: true, predicate: ["clearBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div [class]="cx('filter')">
             <p-columnFilterFormElement
                 *ngIf="display === 'row'"
                 class="p-fluid"
@@ -7229,6 +6758,7 @@ class ColumnFilter extends BaseComponent {
                 [currencyDisplay]="currencyDisplay"
                 [useGrouping]="useGrouping"
                 [showButtons]="showButtons"
+                [filterOn]="filterOn"
             ></p-columnFilterFormElement>
             <p-button
                 *ngIf="showMenuButton"
@@ -7242,21 +6772,18 @@ class ColumnFilter extends BaseComponent {
                 [buttonProps]="filterButtonProps?.filter"
             >
                 <ng-template #icon>
-                    <FilterIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" />
-                    <span class="pi-filter-icon" *ngIf="filterIconTemplate || _filterIconTemplate">
-                        <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate; context: { hasFilter: hasFilter }"></ng-template>
-                    </span>
-                </ng-template>
-            </p-button>
-            <p-button *ngIf="showClearButton && display === 'row' && hasFilter" [styleClass]="cx('pcColumnfilterClearButton')" (onClick)="clearFilter()" [ariaLabel]="clearButtonLabel" [buttonProps]="filterButtonProps?.inline?.clear">
-                <ng-template #icon>
-                    <FilterSlashIcon *ngIf="!clearFilterIconTemplate && !_clearFilterIconTemplate" />
-                    <ng-template *ngTemplateOutlet="clearFilterIconTemplate || _clearFilterIconTemplate"></ng-template>
+                    <ng-container>
+                        <FilterIcon *ngIf="!filterIconTemplate && !_filterIconTemplate && !hasFilter" />
+                        <FilterFillIcon *ngIf="!filterIconTemplate && !_filterIconTemplate && hasFilter" />
+                        <span class="pi-filter-icon" *ngIf="filterIconTemplate || _filterIconTemplate">
+                            <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate; context: { hasFilter: hasFilter }"></ng-template>
+                        </span>
+                    </ng-container>
                 </ng-template>
             </p-button>
             <div
                 *ngIf="showMenu && overlayVisible"
-                [ngClass]="cx('filterOverlay')"
+                [class]="cx('filterOverlay')"
                 [id]="overlayId"
                 [attr.aria-modal]="true"
                 role="dialog"
@@ -7267,28 +6794,28 @@ class ColumnFilter extends BaseComponent {
                 (keydown.escape)="onEscape()"
             >
                 <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: field }"></ng-container>
-                <ul *ngIf="display === 'row'; else menu" [ngClass]="cx('filterConstraintList')">
+                <ul *ngIf="display === 'row'; else menu" [class]="cx('filterConstraintList')">
                     <li
                         *ngFor="let matchMode of matchModes; let i = index"
                         (click)="onRowMatchModeChange(matchMode.value)"
                         (keydown)="onRowMatchModeKeyDown($event)"
                         (keydown.enter)="onRowMatchModeChange(matchMode.value)"
-                        [ngClass]="cx('filterConstraint')"
+                        [class]="cx('filterConstraint')"
                         [class.p-datatable-filter-constraint-selected]="isRowMatchModeSelected(matchMode.value)"
                         [attr.tabindex]="i === 0 ? '0' : null"
                     >
                         {{ matchMode.label }}
                     </li>
-                    <li [ngClass]="cx('filterConstraintSeparator')"></li>
-                    <li [ngClass]="cx('filterConstraint')" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">
+                    <li [class]="cx('filterConstraintSeparator')"></li>
+                    <li [class]="cx('filterConstraint')" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">
                         {{ noFilterLabel }}
                     </li>
                 </ul>
                 <ng-template #menu>
-                    <div [ngClass]="cx('filterOperator')" *ngIf="isShowOperator">
+                    <div [class]="cx('filterOperator')" *ngIf="isShowOperator">
                         <p-select [options]="operatorOptions" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" [styleClass]="cx('pcFilterOperatorDropdown')"></p-select>
                     </div>
-                    <div [ngClass]="cx('filterRuleList')">
+                    <div [class]="cx('filterRuleList')">
                         <div *ngFor="let fieldConstraint of fieldConstraints; let i = index" [ngClass]="cx('filterRule')">
                             <p-select
                                 *ngIf="showMatchModes && matchModes"
@@ -7312,6 +6839,7 @@ class ColumnFilter extends BaseComponent {
                                 [currency]="currency"
                                 [currencyDisplay]="currencyDisplay"
                                 [useGrouping]="useGrouping"
+                                [filterOn]="filterOn"
                             ></p-columnFilterFormElement>
                             <div>
                                 <p-button
@@ -7346,7 +6874,7 @@ class ColumnFilter extends BaseComponent {
                             <ng-template *ngTemplateOutlet="addRuleIconTemplate || _addRuleIconTemplate"></ng-template>
                         </p-button>
                     </div>
-                    <div [ngClass]="cx('filterButtonbar')">
+                    <div [class]="cx('filterButtonbar')">
                         <p-button #clearBtn *ngIf="showClearButton" [outlined]="true" (onClick)="clearFilter()" [attr.aria-label]="clearButtonLabel" [label]="clearButtonLabel" [buttonProps]="filterButtonProps?.popover?.clear" />
                         <p-button *ngIf="showApplyButton" (onClick)="applyFilter()" size="small" [label]="applyButtonLabel" [attr.aria-label]="applyButtonLabel" [buttonProps]="filterButtonProps?.popover?.apply" />
                     </div>
@@ -7354,15 +6882,15 @@ class ColumnFilter extends BaseComponent {
                 <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: field }"></ng-container>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => i8.Select), selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i0.forwardRef(() => i5.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i5.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => i9.Button), selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i0.forwardRef(() => FilterIcon), selector: "FilterIcon" }, { kind: "component", type: i0.forwardRef(() => FilterSlashIcon), selector: "FilterSlashIcon" }, { kind: "component", type: i0.forwardRef(() => PlusIcon), selector: "PlusIcon" }, { kind: "component", type: i0.forwardRef(() => TrashIcon), selector: "TrashIcon" }, { kind: "component", type: i0.forwardRef(() => ColumnFilterFormElement), selector: "p-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "ariaLabel"] }], 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 });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => i9.Select), selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i0.forwardRef(() => i6.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i6.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => i10.Button), selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i0.forwardRef(() => FilterIcon), selector: "FilterIcon" }, { kind: "component", type: i0.forwardRef(() => FilterFillIcon), selector: "FilterFillIcon" }, { kind: "component", type: i0.forwardRef(() => PlusIcon), selector: "PlusIcon" }, { kind: "component", type: i0.forwardRef(() => TrashIcon), selector: "TrashIcon" }, { kind: "component", type: i0.forwardRef(() => ColumnFilterFormElement), selector: "p-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "ariaLabel", "filterOn"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style$1({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style$1({ opacity: 0 }))])])], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColumnFilter, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-columnFilter',
                     standalone: false,
                     template: `
-        <div [ngClass]="cx('filter')">
+        <div [class]="cx('filter')">
             <p-columnFilterFormElement
                 *ngIf="display === 'row'"
                 class="p-fluid"
@@ -7382,6 +6910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 [currencyDisplay]="currencyDisplay"
                 [useGrouping]="useGrouping"
                 [showButtons]="showButtons"
+                [filterOn]="filterOn"
             ></p-columnFilterFormElement>
             <p-button
                 *ngIf="showMenuButton"
@@ -7395,21 +6924,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 [buttonProps]="filterButtonProps?.filter"
             >
                 <ng-template #icon>
-                    <FilterIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" />
-                    <span class="pi-filter-icon" *ngIf="filterIconTemplate || _filterIconTemplate">
-                        <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate; context: { hasFilter: hasFilter }"></ng-template>
-                    </span>
-                </ng-template>
-            </p-button>
-            <p-button *ngIf="showClearButton && display === 'row' && hasFilter" [styleClass]="cx('pcColumnfilterClearButton')" (onClick)="clearFilter()" [ariaLabel]="clearButtonLabel" [buttonProps]="filterButtonProps?.inline?.clear">
-                <ng-template #icon>
-                    <FilterSlashIcon *ngIf="!clearFilterIconTemplate && !_clearFilterIconTemplate" />
-                    <ng-template *ngTemplateOutlet="clearFilterIconTemplate || _clearFilterIconTemplate"></ng-template>
+                    <ng-container>
+                        <FilterIcon *ngIf="!filterIconTemplate && !_filterIconTemplate && !hasFilter" />
+                        <FilterFillIcon *ngIf="!filterIconTemplate && !_filterIconTemplate && hasFilter" />
+                        <span class="pi-filter-icon" *ngIf="filterIconTemplate || _filterIconTemplate">
+                            <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate; context: { hasFilter: hasFilter }"></ng-template>
+                        </span>
+                    </ng-container>
                 </ng-template>
             </p-button>
             <div
                 *ngIf="showMenu && overlayVisible"
-                [ngClass]="cx('filterOverlay')"
+                [class]="cx('filterOverlay')"
                 [id]="overlayId"
                 [attr.aria-modal]="true"
                 role="dialog"
@@ -7420,28 +6946,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 (keydown.escape)="onEscape()"
             >
                 <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: field }"></ng-container>
-                <ul *ngIf="display === 'row'; else menu" [ngClass]="cx('filterConstraintList')">
+                <ul *ngIf="display === 'row'; else menu" [class]="cx('filterConstraintList')">
                     <li
                         *ngFor="let matchMode of matchModes; let i = index"
                         (click)="onRowMatchModeChange(matchMode.value)"
                         (keydown)="onRowMatchModeKeyDown($event)"
                         (keydown.enter)="onRowMatchModeChange(matchMode.value)"
-                        [ngClass]="cx('filterConstraint')"
+                        [class]="cx('filterConstraint')"
                         [class.p-datatable-filter-constraint-selected]="isRowMatchModeSelected(matchMode.value)"
                         [attr.tabindex]="i === 0 ? '0' : null"
                     >
                         {{ matchMode.label }}
                     </li>
-                    <li [ngClass]="cx('filterConstraintSeparator')"></li>
-                    <li [ngClass]="cx('filterConstraint')" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">
+                    <li [class]="cx('filterConstraintSeparator')"></li>
+                    <li [class]="cx('filterConstraint')" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">
                         {{ noFilterLabel }}
                     </li>
                 </ul>
                 <ng-template #menu>
-                    <div [ngClass]="cx('filterOperator')" *ngIf="isShowOperator">
+                    <div [class]="cx('filterOperator')" *ngIf="isShowOperator">
                         <p-select [options]="operatorOptions" [ngModel]="operator" (ngModelChange)="onOperatorChange($event)" [styleClass]="cx('pcFilterOperatorDropdown')"></p-select>
                     </div>
-                    <div [ngClass]="cx('filterRuleList')">
+                    <div [class]="cx('filterRuleList')">
                         <div *ngFor="let fieldConstraint of fieldConstraints; let i = index" [ngClass]="cx('filterRule')">
                             <p-select
                                 *ngIf="showMatchModes && matchModes"
@@ -7465,6 +6991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                 [currency]="currency"
                                 [currencyDisplay]="currencyDisplay"
                                 [useGrouping]="useGrouping"
+                                [filterOn]="filterOn"
                             ></p-columnFilterFormElement>
                             <div>
                                 <p-button
@@ -7499,7 +7026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                             <ng-template *ngTemplateOutlet="addRuleIconTemplate || _addRuleIconTemplate"></ng-template>
                         </p-button>
                     </div>
-                    <div [ngClass]="cx('filterButtonbar')">
+                    <div [class]="cx('filterButtonbar')">
                         <p-button #clearBtn *ngIf="showClearButton" [outlined]="true" (onClick)="clearFilter()" [attr.aria-label]="clearButtonLabel" [label]="clearButtonLabel" [buttonProps]="filterButtonProps?.popover?.clear" />
                         <p-button *ngIf="showApplyButton" (onClick)="applyFilter()" size="small" [label]="applyButtonLabel" [attr.aria-label]="applyButtonLabel" [buttonProps]="filterButtonProps?.popover?.apply" />
                     </div>
@@ -7508,7 +7035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             </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$1({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style$1({ opacity: 0 }))])])],
                     encapsulation: ViewEncapsulation.None
                 }]
         }], propDecorators: { field: [{
@@ -7567,6 +7094,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], currencyDisplay: [{
                 type: Input
+            }], filterOn: [{
+                type: Input
             }], useGrouping: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -7630,6 +7159,7 @@ class ColumnFilterFormElement {
     currencyDisplay;
     useGrouping = true;
     ariaLabel;
+    filterOn;
     get showButtons() {
         return this.colFilter.showButtons;
     }
@@ -7646,7 +7176,7 @@ class ColumnFilterFormElement {
     }
     onModelChange(value) {
         this.filterConstraint.value = value;
-        if (this.type === 'date' || this.type === 'boolean' || value === '') {
+        if (this.type === 'date' || this.type === 'boolean' || ((this.type === 'text' || this.type === 'numeric') && this.filterOn === 'input') || !value) {
             this.dt._filter();
         }
     }
@@ -7660,8 +7190,8 @@ class ColumnFilterFormElement {
             event.preventDefault();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: Table }, { token: ColumnFilter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: ColumnFilterFormElement, isStandalone: false, selector: "p-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: Table }, { token: ColumnFilter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: ColumnFilterFormElement, isStandalone: false, selector: "p-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel", filterOn: "filterOn" }, ngImport: i0, template: `
         <ng-container *ngIf="filterTemplate; else builtInElement">
             <ng-container
                 *ngTemplateOutlet="
@@ -7723,9 +7253,9 @@ class ColumnFilterFormElement {
                 <p-datepicker [ariaLabel]="ariaLabel" *ngSwitchCase="'date'" [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" appendTo="body"></p-datepicker>
             </ng-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i12.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i7.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i12.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i13.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i8.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-columnFilterFormElement',
@@ -7828,10 +7358,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], ariaLabel: [{
                 type: Input
+            }], filterOn: [{
+                type: Input
             }] } });
 class TableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: TableModule, declarations: [Table, SortableColumn, FrozenColumn, RowGroupHeader, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, TableBody, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: TableModule, declarations: [Table, SortableColumn, FrozenColumn, RowGroupHeader, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, TableBody, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement], imports: [CommonModule,
             PaginatorModule,
             InputTextModule,
             SelectModule,
@@ -7840,6 +7372,7 @@ class TableModule {
             SelectButtonModule,
             DatePickerModule,
             InputNumberModule,
+            BadgeModule,
             CheckboxModule,
             ScrollerModule,
             ArrowDownIcon,
@@ -7850,11 +7383,12 @@ class TableModule {
             SortAmountDownIcon,
             CheckIcon,
             FilterIcon,
+            FilterFillIcon,
             FilterSlashIcon,
             PlusIcon,
             TrashIcon,
             RadioButtonModule], exports: [Table, SharedModule, SortableColumn, FrozenColumn, RowGroupHeader, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement, ScrollerModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableModule, providers: [TableStyle], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableModule, providers: [TableStyle], imports: [CommonModule,
             PaginatorModule,
             InputTextModule,
             SelectModule,
@@ -7863,6 +7397,7 @@ class TableModule {
             SelectButtonModule,
             DatePickerModule,
             InputNumberModule,
+            BadgeModule,
             CheckboxModule,
             ScrollerModule,
             ArrowDownIcon,
@@ -7873,13 +7408,14 @@ class TableModule {
             SortAmountDownIcon,
             CheckIcon,
             FilterIcon,
+            FilterFillIcon,
             FilterSlashIcon,
             PlusIcon,
             TrashIcon,
             RadioButtonModule, SharedModule,
             ScrollerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7892,6 +7428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         SelectButtonModule,
                         DatePickerModule,
                         InputNumberModule,
+                        BadgeModule,
                         CheckboxModule,
                         ScrollerModule,
                         ArrowDownIcon,
@@ -7902,6 +7439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         SortAmountDownIcon,
                         CheckIcon,
                         FilterIcon,
+                        FilterFillIcon,
                         FilterSlashIcon,
                         PlusIcon,
                         TrashIcon,