primeng/fesm2022/primeng-table.mjs.map

PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB

{"version":3,"file":"primeng-table.mjs","sources":["../../src/table/style/tablestyle.ts","../../src/table/table.ts","../../src/table/primeng-table.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n.p-datatable {\n    position: relative;\n}\n\n.p-datatable-table {\n    border-spacing: 0;\n    border-collapse: separate;\n    width: 100%;\n}\n\n.p-datatable-scrollable > .p-datatable-table-container {\n    position: relative;\n}\n/* For PrimeNG */\n.p-datatable-scrollable-table > .p-datatable-thead {\n    top: 0;\n    z-index: 2;\n}\n/* For PrimeNG */\n.p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n    position: sticky;\n    z-index: 2;\n}\n/* For PrimeNG */\n.p-datatable-scrollable-table > .p-datatable-frozen-tbody + .p-datatable-frozen-tbody {\n    z-index: 1;\n}\n\n.p-datatable-scrollable-table > .p-datatable-tfoot {\n    bottom: 0;\n    z-index: 1;\n}\n\n.p-datatable-scrollable > tr:not(:has(.p-datatable-selectable-row)) >.p-datatable-frozen-column {\n    position: sticky;\n    background: ${dt('datatable.header.cell.background')};\n}\n\n.p-datatable-scrollable th.p-datatable-frozen-column {\n    z-index: 1;\n    position: sticky;\n    background: ${dt('datatable.header.cell.background')};\n}\n.p-datatable-scrollable td.p-datatable-frozen-column {\n    z-index: 1;\n    position: sticky;\n    background: ${dt('datatable.header.cell.background')};\n}\n\n.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,\n.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {\n    background: ${dt('datatable.header.cell.background')};\n}\n\n.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,\n.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {\n    background: ${dt('datatable.footer.cell.background')};\n}\n\n.p-datatable-flex-scrollable {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.p-datatable-flex-scrollable > .p-datatable-table-container {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    height: 100%;\n}\n\n.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header {\n    position: sticky;\n    z-index: 1;\n}\n\n.p-datatable-resizable-table > .p-datatable-thead > tr > th,\n.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n.p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) {\n    background-clip: padding-box;\n    position: relative;\n}\n\n.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer {\n    display: none;\n}\n\n.p-datatable-column-resizer {\n    display: block;\n    position: absolute;\n    top: 0;\n    inset-inline-end: 0;\n    margin: 0;\n    width: ${dt('datatable.column.resizer.width')};\n    height: 100%;\n    padding: 0px;\n    cursor: col-resize;\n    border: 1px solid transparent;\n}\n\n/*\n.p-datatable-column-header-content {\n    display: flex;\n    align-items: center;\n    gap: ${dt('datatable.header.cell.gap')};\n}\n.p-datatable-thead > tr > th {\n    display: flex;\n    align-items: center;\n    gap: ${dt('datatable.header.cell.gap')};\n}\n*/\n\n.p-datatable-column-resize-indicator {\n    width: ${dt('datatable.resize.indicator.width')};\n    position: absolute;\n    z-index: 10;\n    display: none;\n    background: ${dt('datatable.resize.indicator.color')};\n}\n\n.p-datatable-row-reorder-indicator-up,\n.p-datatable-row-reorder-indicator-down {\n    position: absolute;\n    display: none;\n}\n\n.p-datatable-reorderable-column,\n.p-datatable-reorderable-row-handle {\n    cursor: move;\n}\n\n.p-datatable-mask {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n}\n\n.p-datatable-inline-filter {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: ${dt('datatable.filter.inline.gap')};\n}\n\n.p-datatable-inline-filter .p-datatable-filter-element-container {\n    flex: 1 1 auto;\n    width: 1%;\n}\n\n.p-datatable-filter-overlay {\n    position: absolute;\n    background: ${dt('datatable.filter.overlay.select.background')};\n    color: ${dt('datatable.filter.overlay.select.color')};\n    border: 1px solid ${dt('datatable.filter.overlay.select.border.color')};\n    border-radius: ${dt('datatable.filter.overlay.select.border.radius')};\n    box-shadow: ${dt('datatable.filter.overlay.select.shadow')};\n    min-width: 12.5rem;\n}\n\n.p-datatable-filter-constraint-list {\n    margin: 0;\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    padding: ${dt('datatable.filter.constraint.list.padding')};\n    gap: ${dt('datatable.filter.constraint.list.gap')};\n}\n\n.p-datatable-filter-constraint {\n    padding: ${dt('datatable.filter.constraint.padding')};\n    color: ${dt('datatable.filter.constraint.color')};\n    border-radius: ${dt('datatable.filter.constraint.border.radius')};\n    cursor: pointer;\n    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},\n        box-shadow ${dt('datatable.transition.duration')};\n}\n\n.p-datatable-filter-constraint-selected {\n    background: ${dt('datatable.filter.constraint.selected.background')};\n    color: ${dt('datatable.filter.constraint.selected.color')};\n}\n\n.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover {\n    background: ${dt('datatable.filter.constraint.focus.background')};\n    color: ${dt('datatable.filter.constraint.focus.color')};\n}\n\n.p-datatable-filter-constraint:focus-visible {\n    outline: 0 none;\n    background: ${dt('datatable.filter.constraint.focus.background')};\n    color: ${dt('datatable.filter.constraint.focus.color')};\n}\n\n.p-datatable-filter-constraint-selected:focus-visible {\n    outline: 0 none;\n    background: ${dt('datatable.filter.constraint.selected.focus.background')};\n    color: ${dt('datatable.filter.constraint.selected.focus.color')};\n}\n\n.p-datatable-filter-constraint-separator {\n    border-top: 1px solid ${dt('datatable.filter.constraint.separator.border.color')};\n}\n\n.p-datatable-popover-filter {\n    display: inline-flex;\n    margin-inline-start: auto;\n}\n\n.p-datatable-filter-overlay-popover {\n    background: ${dt('datatable.filter.overlay.popover.background')};\n    color: ${dt('datatable.filter.overlay.popover.color')};\n    border: 1px solid ${dt('datatable.filter.overlay.popover.border.color')};\n    border-radius: ${dt('datatable.filter.overlay.popover.border.radius')};\n    box-shadow: ${dt('datatable.filter.overlay.popover.shadow')};\n    min-width: 12.5rem;\n    padding: ${dt('datatable.filter.overlay.popover.padding')};\n    display: flex;\n    flex-direction: column;\n    gap: ${dt('datatable.filter.overlay.popover.gap')};\n}\n\n.p-datatable-filter-operator-dropdown, .p-datatable-filter-constraint-dropdown {\n    width: 100%;\n}\n\n.p-datatable-filter-rule-list,\n.p-datatable-filter-rule {\n    display: flex;\n    flex-direction: column;\n    gap: ${dt('datatable.filter.overlay.popover.gap')};\n}\n\n.p-datatable-filter-rule {\n    border-bottom: 1px solid ${dt('datatable.filter.rule.border.color')};\n}\n\n.p-datatable-filter-rule:last-child {\n    border-bottom: 0 none;\n}\n\n.p-datatable-filter-add-rule-button, .p-datatable-filter-remove-rule-button {\n    width: 100%;\n}\n\n.p-datatable-filter-remove-button {\n    width: 100%;\n}\n\n.p-datatable-filter-buttonbar {\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.p-datatable-virtualscroller-spacer {\n    display: flex;\n}\n\n.p-datatable .p-virtualscroller .p-virtualscroller-loading {\n    transform: none !important;\n    min-height: 0;\n    position: sticky;\n    top: 0;\n    inset-inline-start: 0;\n}\n\n.p-datatable-paginator-top {\n    border-color: ${dt('datatable.paginator.top.border.color')};\n    border-style: solid;\n    border-width: ${dt('datatable.paginator.top.border.width')};\n}\n\n.p-datatable-paginator-bottom {\n    border-color: ${dt('datatable.paginator.bottom.border.color')};\n    border-style: solid;\n    border-width: ${dt('datatable.paginator.bottom.border.width')};\n}\n\n.p-datatable-header {\n    background: ${dt('datatable.header.background')};\n    color: ${dt('datatable.header.color')};\n    border-color: ${dt('datatable.header.border.color')};\n    border-style: solid;\n    border-width: ${dt('datatable.header.border.width')};\n    padding: ${dt('datatable.header.padding')};\n}\n\n.p-datatable-footer {\n    background: ${dt('datatable.footer.background')};\n    color: ${dt('datatable.footer.color')};\n    border-color: ${dt('datatable.footer.border.color')};\n    border-style: solid;\n    border-width: ${dt('datatable.footer.border.width')};\n    padding: ${dt('datatable.footer.padding')};\n}\n\n.p-datatable-thead > tr > th {\n    padding: ${dt('datatable.header.cell.padding')};\n    background: ${dt('datatable.header.cell.background')};\n    border-color: ${dt('datatable.header.cell.border.color')};\n    border-style: solid;\n    border-width: 0 0 1px 0;\n    color: ${dt('datatable.header.cell.color')};\n    font-weight: ${dt('datatable.column.title.font.weight')};\n    text-align: start;\n    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},\n            outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};\n}\n\n/** For PrimeNG **/\n.p-datatable-thead > tr > th p-columnfilter {\n    font-weight: normal;\n}\n/** For PrimeNG End **/\n\n/*\n.p-datatable-column-title {\n    font-weight: ${dt('datatable.column.title.font.weight')};\n}\n*/\n\n.p-datatable-tbody > tr {\n    outline-color: transparent;\n    background: ${dt('datatable.row.background')};\n    color: ${dt('datatable.row.color')};\n    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},\n            outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};\n}\n\n.p-datatable-tbody > tr > td {\n    text-align: start;\n    border-color: ${dt('datatable.body.cell.border.color')};\n    border-style: solid;\n    border-width: 0 0 1px 0;\n    padding: ${dt('datatable.body.cell.padding')};\n}\n\n.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {\n    background: ${dt('datatable.row.hover.background')};\n    color: ${dt('datatable.row.hover.color')};\n}\n\n.p-datatable-tbody > tr.p-datatable-row-selected {\n    background: ${dt('datatable.row.selected.background')};\n    color: ${dt('datatable.row.selected.color')};\n}\n\n.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {\n    border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};\n}\n\n.p-datatable-tbody > tr.p-datatable-row-selected > td {\n    border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};\n}\n\n.p-datatable-tbody > tr:focus-visible,\n.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {\n    box-shadow: ${dt('datatable.row.focus.ring.shadow')};\n    outline: ${dt('datatable.row.focus.ring.width')} ${dt('datatable.row.focus.ring.style')} ${dt('datatable.row.focus.ring.color')};\n    outline-offset: ${dt('datatable.row.focus.ring.offset')};\n}\n\n.p-datatable-tbody:has(+ .p-datatable-tfoot) > tr:last-child > td {\n    border-width: 0;\n}\n\n.p-datatable-tfoot > tr > td {\n    text-align: start;\n    padding: ${dt('datatable.footer.cell.padding')};\n    border-color: ${dt('datatable.footer.cell.border.color')};\n    border-style: solid;\n    border-width: 1px 0 1px 0;\n    color: ${dt('datatable.footer.cell.color')};\n    background: ${dt('datatable.footer.cell.background')};\n}\n\n.p-datatable-column-footer {\n    font-weight: ${dt('datatable.column.footer.font.weight')};\n}\n\n.p-datatable-sortable-column {\n    cursor: pointer;\n    user-select: none;\n    outline-color: transparent;\n}\n\n.p-datatable-thead > tr > th,\n.p-datatable-sort-icon,\n.p-datatable-sort-badge {\n    vertical-align: middle;\n}\n\n.p-datatable-sort-icon {\n    color: ${dt('datatable.sort.icon.color')};\n    transition: color ${dt('datatable.transition.duration')};\n}\n\n.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {\n    background: ${dt('datatable.header.cell.hover.background')};\n    color: ${dt('datatable.header.cell.hover.color')};\n}\n\n.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {\n    color: ${dt('datatable.sort.icon.hover.color')};\n}\n\n.p-datatable-thead > tr > th.p-datatable-column-sorted {\n    background: ${dt('datatable.header.cell.selected.background')};\n    color: ${dt('datatable.header.cell.selected.color')};\n}\n\n.p-datatable-thead > tr > th.p-datatable-column-sorted .p-datatable-sort-icon {\n    color: ${dt('datatable.header.cell.selected.color')};\n}\n\n.p-datatable-sortable-column:focus-visible {\n    box-shadow: ${dt('datatable.header.cell.focus.ring.shadow')};\n    outline: ${dt('datatable.header.cell.focus.ring.width')} ${dt('datatable.header.cell.focus.ring.style')} ${dt('datatable.header.cell.focus.ring.color')};\n    outline-offset: ${dt('datatable.header.cell.focus.ring.offset')};\n}\n\n.p-datatable-hoverable .p-datatable-selectable-row {\n    cursor: pointer;\n}\n\n.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {\n    box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')};\n}\n\n.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {\n    box-shadow: inset 0 -2px 0 0 ${dt('datatable.drop.point.color')};\n}\n\n.p-datatable-loading-icon {\n    font-size: ${dt('datatable.loading.icon.size')};\n    width: ${dt('datatable.loading.icon.size')};\n    height: ${dt('datatable.loading.icon.size')};\n}\n\n.p-datatable-gridlines .p-datatable-header {\n    border-width: 1px 1px 0 1px;\n}\n\n.p-datatable-gridlines .p-datatable-footer {\n    border-width: 0 1px 1px 1px;\n}\n\n.p-datatable-gridlines .p-datatable-paginator-top {\n    border-width: 1px 1px 0 1px;\n}\n\n.p-datatable-gridlines .p-datatable-paginator-bottom {\n    border-width: 0 1px 1px 1px;\n}\n\n.p-datatable-gridlines .p-datatable-thead > tr > th {\n    border-width: 1px 0 1px 1px;\n}\n\n.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {\n    border-width: 1px;\n}\n\n.p-datatable-gridlines .p-datatable-tbody > tr > td {\n    border-width: 1px 0 0 1px;\n}\n\n.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {\n    border-width: 1px 1px 0 1px;\n}\n\np-datatable-gridlines .p-datatable-tbody > tr:last-child > td {\n    border-width: 1px 0 1px 1px;\n}\n\n.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {\n    border-width: 1px;\n}\n\n.p-datatable-gridlines .p-datatable-tfoot > tr > td {\n    border-width: 1px 0 1px 1px;\n}\n\n.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {\n    border-width: 1px 1px 1px 1px;\n}\n\n.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {\n    border-width: 0 0 1px 1px;\n}\n\n.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {\n    border-width: 0 1px 1px 1px;\n}\n\n.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {\n    border-width: 0 0 1px 1px;\n}\n\n.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {\n    border-width: 0 1px 1px 1px;\n}\n\n.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {\n    border-width: 0 0 0 1px;\n}\n\n.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {\n    border-width: 0 1px 0 1px;\n}\n\n.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {\n    background: ${dt('datatable.row.striped.background')};\n}\n\n.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd).p-datatable-row-selected {\n    background: ${dt('datatable.row.selected.background')};\n    color: ${dt('datatable.row.selected.color')};\n}\n\n.p-datatable-striped.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {\n    background: ${dt('datatable.row.hover.background')};\n    color: ${dt('datatable.row.hover.color')};\n}\n\n.p-datatable.p-datatable-sm .p-datatable-header {\n    padding: 0.375rem 0.5rem;\n}\n\n.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {\n    padding: 0.375rem 0.5rem;\n}\n\n.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {\n    padding: 0.375rem 0.5rem;\n}\n\n.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {\n    padding: 0.375rem 0.5rem;\n}\n\n.p-datatable.p-datatable-sm .p-datatable-footer {\n    padding: 0.375rem 0.5rem;\n}\n\n.p-datatable.p-datatable-lg .p-datatable-header {\n    padding: 0.9375rem 1.25rem;\n}\n\n.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {\n    padding: 0.9375rem 1.25rem;\n}\n\n.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td {\n    padding: 0.9375rem 1.25rem;\n}\n\n.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td {\n    padding: 0.9375rem 1.25rem;\n}\n\n.p-datatable.p-datatable-lg .p-datatable-footer {\n    padding: 0.9375rem 1.25rem;\n}\n\n.p-datatable-row-toggle-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    width: ${dt('datatable.row.toggle.button.size')};\n    height: ${dt('datatable.row.toggle.button.size')};\n    color: ${dt('datatable.row.toggle.button.color')};\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n    border-radius: ${dt('datatable.row.toggle.button.border.radius')};\n    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},\n            outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};\n    outline-color: transparent;\n    user-select: none;\n}\n\n.p-datatable-row-toggle-button:enabled:hover {\n    color: ${dt('datatable.row.toggle.button.hover.color')};\n    background: ${dt('datatable.row.toggle.button.hover.background')};\n}\n\n.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {\n    background: ${dt('datatable.row.toggle.button.selected.hover.background')};\n    ${dt('datatable.row.toggle.button.selected.hover.color')};\n}\n\n.p-datatable-row-toggle-button:focus-visible {\n    box-shadow: ${dt('datatable.row.toggle.button.focus.ring.shadow')};\n    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')};\n    outline-offset: ${dt('datatable.row.toggle.button.focus.ring.offset')};\n}\n`;\n\nconst classes = {\n    root: ({ instance }) => ({\n        'p-datatable p-component': true,\n        'p-datatable-hoverable': instance.rowHover || instance.selectionMode,\n        'p-datatable-resizable': instance.resizableColumns,\n        'p-datatable-resizable-fit': instance.resizableColumns && instance.columnResizeMode === 'fit',\n        'p-datatable-scrollable': instance.scrollable,\n        'p-datatable-flex-scrollable': instance.scrollable && instance.scrollHeight === 'flex',\n        'p-datatable-striped': instance.stripedRows,\n        'p-datatable-gridlines': instance.showGridlines,\n        'p-datatable-sm': instance.size === 'small',\n        'p-datatable-lg': instance.size === 'large'\n    }),\n    mask: 'p-datatable-mask p-overlay-mask',\n    loadingIcon: 'p-datatable-loading-icon',\n    header: 'p-datatable-header',\n    pcPaginator: ({ instance }) => 'p-datatable-paginator-' + instance.paginatorPosition,\n    tableContainer: 'p-datatable-table-container',\n    table: ({ instance }) => ({\n        'p-datatable-table': true,\n        'p-datatable-scrollable-table': instance.scrollable,\n        'p-datatable-resizable-table': instance.resizableColumns,\n        'p-datatable-resizable-table-fit': instance.resizableColumns && instance.columnResizeMode === 'fit'\n    }),\n    thead: 'p-datatable-thead',\n    columnResizer: 'p-datatable-column-resizer',\n    columnHeaderContent: 'p-datatable-column-header-content',\n    columnTitle: 'p-datatable-column-title',\n    columnFooter: 'p-datatable-column-footer',\n    sortIcon: 'p-datatable-sort-icon',\n    pcSortBadge: 'p-datatable-sort-badge',\n    filter: ({ instance }) => ({\n        'p-datatable-filter': true,\n        'p-datatable-inline-filter': instance.display === 'row',\n        'p-datatable-popover-filter': instance.display === 'menu'\n    }),\n    filterElementContainer: 'p-datatable-filter-element-container',\n    pcColumnFilterButton: 'p-datatable-column-filter-button',\n    pcColumnFilterClearButton: 'p-datatable-column-filter-clear-button',\n    filterOverlay: ({ instance }) => ({\n        'p-datatable-filter-overlay p-component': true,\n        'p-datatable-filter-overlay-popover': instance.display === 'menu'\n    }),\n    filterConstraintList: 'p-datatable-filter-constraint-list',\n    filterConstraint: 'p-datatable-filter-constraint',\n    filterConstraintSeparator: 'p-datatable-filter-constraint-separator',\n    filterOperator: 'p-datatable-filter-operator',\n    pcFilterOperatorDropdown: 'p-datatable-filter-operator-dropdown',\n    filterRuleList: 'p-datatable-filter-rule-list',\n    filterRule: 'p-datatable-filter-rule',\n    pcFilterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',\n    pcFilterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',\n    pcFilterAddRuleButton: 'p-datatable-filter-add-rule-button',\n    filterButtonbar: 'p-datatable-filter-buttonbar',\n    pcFilterClearButton: 'p-datatable-filter-clear-button',\n    pcFilterApplyButton: 'p-datatable-filter-apply-button',\n    tbody: ({ instance }) => ({\n        'p-datatable-tbody': true,\n        'p-datatable-frozen-tbody': instance.frozenValue || instance.frozenBodyTemplate,\n        'p-virtualscroller-content': instance.virtualScroll\n    }),\n    rowGroupHeader: 'p-datatable-row-group-header',\n    rowToggleButton: 'p-datatable-row-toggle-button',\n    rowToggleIcon: 'p-datatable-row-toggle-icon',\n\n    rowExpansion: 'p-datatable-row-expansion',\n    rowGroupFooter: 'p-datatable-row-group-footer',\n    emptyMessage: 'p-datatable-empty-message',\n    bodyCell: ({ instance }) => ({\n        'p-datatable-frozen-column': instance.columnProp('frozen')\n    }),\n    reorderableRowHandle: 'p-datatable-reorderable-row-handle',\n    pcRowEditorInit: 'p-datatable-row-editor-init',\n    pcRowEditorSave: 'p-datatable-row-editor-save',\n    pcRowEditorCancel: 'p-datatable-row-editor-cancel',\n    tfoot: 'p-datatable-tfoot',\n    footerCell: ({ instance }) => ({\n        'p-datatable-frozen-column': instance.columnProp('frozen')\n    }),\n    virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',\n    footer: 'p-datatable-tfoot',\n    columnResizeIndicator: 'p-datatable-column-resize-indicator',\n    rowReorderIndicatorUp: 'p-datatable-row-reorder-indicator-up',\n    rowReorderIndicatorDown: 'p-datatable-row-reorder-indicator-down'\n};\n\nconst inlineStyles = {\n    tableContainer: ({ instance }) => ({\n        'max-height': instance.virtualScroll ? '' : instance.scrollHeight,\n        overflow: 'auto'\n    }),\n    thead: { position: 'sticky' },\n    tfoot: { position: 'sticky' }\n};\n\n@Injectable()\nexport class TableStyle extends BaseStyle {\n    name = 'datatable';\n\n    theme = theme;\n\n    classes = classes;\n\n    inlineStyles = inlineStyles;\n}\n\n/**\n *\n * DataTable displays data in tabular format.\n *\n * [Live Demo](https://www.primeng.org/table/)\n *\n * @module tablestyle\n *\n */\nexport enum TableClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-datatable',\n    /**\n     * Class name of the mask element\n     */\n    mask = 'p-datatable-mask',\n    /**\n     * Class name of the loading icon element\n     */\n    loadingIcon = 'p-datatable-loading-icon',\n    /**\n     * Class name of the header element\n     */\n    header = 'p-datatable-header',\n    /**\n     * Class name of the paginator element\n     */\n    pcPaginator = 'p-datatable-paginator-[position]',\n    /**\n     * Class name of the table container element\n     */\n    tableContainer = 'p-datatable-table-container',\n    /**\n     * Class name of the table element\n     */\n    table = 'p-datatable-table',\n    /**\n     * Class name of the thead element\n     */\n    thead = 'p-datatable-thead',\n    /**\n     * Class name of the column resizer element\n     */\n    columnResizer = 'p-datatable-column-resizer',\n    /**\n     * Class name of the column header content element\n     */\n    columnHeaderContent = 'p-datatable-column-header-content',\n    /**\n     * Class name of the column title element\n     */\n    columnTitle = 'p-datatable-column-title',\n    /**\n     * Class name of the sort icon element\n     */\n    sortIcon = 'p-datatable-sort-icon',\n    /**\n     * Class name of the sort badge element\n     */\n    pcSortBadge = 'p-datatable-sort-badge',\n    /**\n     * Class name of the filter element\n     */\n    filter = 'p-datatable-filter',\n    /**\n     * Class name of the filter element container element\n     */\n    filterElementContainer = 'p-datatable-filter-element-container',\n    /**\n     * Class name of the column filter button element\n     */\n    pcColumnFilterButton = 'p-datatable-column-filter-button',\n    /**\n     * Class name of the column filter clear button element\n     */\n    pcColumnFilterClearButton = 'p-datatable-column-filter-clear-button',\n    /**\n     * Class name of the filter overlay element\n     */\n    filterOverlay = 'p-datatable-filter-overlay',\n    /**\n     * Class name of the filter constraint list element\n     */\n    filterConstraintList = 'p-datatable-filter-constraint-list',\n    /**\n     * Class name of the filter constraint element\n     */\n    filterConstraint = 'p-datatable-filter-constraint',\n    /**\n     * Class name of the filter constraint separator element\n     */\n    filterConstraintSeparator = 'p-datatable-filter-constraint-separator',\n    /**\n     * Class name of the filter operator element\n     */\n    filterOperator = 'p-datatable-filter-operator',\n    /**\n     * Class name of the filter operator dropdown element\n     */\n    pcFilterOperatorDropdown = 'p-datatable-filter-operator-dropdown',\n    /**\n     * Class name of the filter rule list element\n     */\n    filterRuleList = 'p-datatable-filter-rule-list',\n    /**\n     * Class name of the filter rule element\n     */\n    filterRule = 'p-datatable-filter-rule',\n    /**\n     * Class name of the filter constraint dropdown element\n     */\n    pcFilterConstraintDropdown = 'p-datatable-filter-constraint-dropdown',\n    /**\n     * Class name of the filter remove rule button element\n     */\n    pcFilterRemoveRuleButton = 'p-datatable-filter-remove-rule-button',\n    /**\n     * Class name of the filter add rule button element\n     */\n    pcFilterAddRuleButton = 'p-datatable-filter-add-rule-button',\n    /**\n     * Class name of the filter buttonbar element\n     */\n    filterButtonbar = 'p-datatable-filter-buttonbar',\n    /**\n     * Class name of the filter clear button element\n     */\n    pcFilterClearButton = 'p-datatable-filter-clear-button',\n    /**\n     * Class name of the filter apply button element\n     */\n    pcFilterApplyButton = 'p-datatable-filter-apply-button',\n    /**\n     * Class name of the tbody element\n     */\n    tbody = 'p-datatable-tbody',\n    /**\n     * Class name of the row group header element\n     */\n    rowGroupHeader = 'p-datatable-row-group-header',\n    /**\n     * Class name of the row toggle button element\n     */\n    rowToggleButton = 'p-datatable-row-toggle-button',\n    /**\n     * Class name of the row toggle icon element\n     */\n    rowToggleIcon = 'p-datatable-row-toggle-icon',\n    /**\n     * Class name of the row expansion element\n     */\n    rowExpansion = 'p-datatable-row-expansion',\n    /**\n     * Class name of the row group footer element\n     */\n    rowGroupFooter = 'p-datatable-row-group-footer',\n    /**\n     * Class name of the empty message element\n     */\n    emptyMessage = 'p-datatable-empty-message',\n    /**\n     * Class name of the reorderable row handle element\n     */\n    reorderableRowHandle = 'p-datatable-reorderable-row-handle',\n    /**\n     * Class name of the row editor init element\n     */\n    pcRowEditorInit = 'p-datatable-row-editor-init',\n    /**\n     * Class name of the row editor save element\n     */\n    pcRowEditorSave = 'p-datatable-row-editor-save',\n    /**\n     * Class name of the row editor cancel element\n     */\n    pcRowEditorCancel = 'p-datatable-row-editor-cancel',\n    /**\n     * Class name of the tfoot element\n     */\n    tfoot = 'p-datatable-tfoot',\n    /**\n     * Class name of the virtual scroller spacer element\n     */\n    virtualScrollerSpacer = 'p-datatable-virtualscroller-spacer',\n    /**\n     * Class name of the footer element\n     */\n    footer = 'p-datatable-footer',\n    /**\n     * Class name of the column resize indicator element\n     */\n    columnResizeIndicator = 'p-datatable-column-resize-indicator',\n    /**\n     * Class name of the row reorder indicator up element\n     */\n    rowReorderIndicatorUp = 'p-datatable-row-reorder-indicator-up',\n    /**\n     * Class name of the row reorder indicator down element\n     */\n    rowReorderIndicatorDown = 'p-datatable-row-reorder-indicator-down'\n}\n","import { animate, AnimationEvent, style, transition, trigger } from '@angular/animations';\nimport { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n    AfterContentInit,\n    AfterViewInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChild,\n    ContentChildren,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    HostListener,\n    inject,\n    Inject,\n    Injectable,\n    Input,\n    NgModule,\n    NgZone,\n    numberAttribute,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    PLATFORM_ID,\n    QueryList,\n    Renderer2,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BlockableUI, FilterMatchMode, FilterMetadata, FilterOperator, FilterService, LazyLoadMeta, OverlayService, PrimeTemplate, ScrollerOptions, SelectItem, SharedModule, SortMeta, TableState, TranslationKeys } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { Button, ButtonModule } from 'primeng/button';\nimport { CheckboxModule } from 'primeng/checkbox';\nimport { DatePickerModule } from 'primeng/datepicker';\nimport { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';\nimport { ArrowDownIcon } from 'primeng/icons/arrowdown';\nimport { ArrowUpIcon } from 'primeng/icons/arrowup';\nimport { CheckIcon } from 'primeng/icons/check';\nimport { FilterIcon } from 'primeng/icons/filter';\nimport { FilterSlashIcon } from 'primeng/icons/filterslash';\nimport { PlusIcon } from 'primeng/icons/plus';\nimport { SortAltIcon } from 'primeng/icons/sortalt';\nimport { SortAmountDownIcon } from 'primeng/icons/sortamountdown';\nimport { SortAmountUpAltIcon } from 'primeng/icons/sortamountupalt';\nimport { SpinnerIcon } from 'primeng/icons/spinner';\nimport { TrashIcon } from 'primeng/icons/trash';\nimport { InputNumberModule } from 'primeng/inputnumber';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { PaginatorModule } from 'primeng/paginator';\nimport { RadioButton, RadioButtonClickEvent, RadioButtonModule } from 'primeng/radiobutton';\nimport { Scroller, ScrollerModule } from 'primeng/scroller';\nimport { SelectModule } from 'primeng/select';\nimport { SelectButtonModule } from 'primeng/selectbutton';\nimport { Nullable, VoidListener } from 'primeng/ts-helpers';\nimport { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';\nimport { Subject, Subscription } from 'rxjs';\nimport { TableStyle } from './style/tablestyle';\nimport {\n    ExportCSVOptions,\n    TableColResizeEvent,\n    TableColumnReorderEvent,\n    TableContextMenuSelectEvent,\n    TableEditCancelEvent,\n    TableEditCompleteEvent,\n    TableEditInitEvent,\n    TableFilterButtonPropsOptions,\n    TableFilterEvent,\n    TableHeaderCheckboxToggleEvent,\n    TableLazyLoadEvent,\n    TablePageEvent,\n    TableRowCollapseEvent,\n    TableRowExpandEvent,\n    TableRowReorderEvent,\n    TableRowSelectEvent,\n    TableRowUnSelectEvent,\n    TableSelectAllChangeEvent\n} from './table.interface';\n\n@Injectable()\nexport class TableService {\n    private sortSource = new Subject<SortMeta | SortMeta[] | null>();\n    private selectionSource = new Subject();\n    private contextMenuSource = new Subject<any>();\n    private valueSource = new Subject<any>();\n    private totalRecordsSource = new Subject<any>();\n    private columnsSource = new Subject();\n\n    sortSource$ = this.sortSource.asObservable();\n    selectionSource$ = this.selectionSource.asObservable();\n    contextMenuSource$ = this.contextMenuSource.asObservable();\n    valueSource$ = this.valueSource.asObservable();\n    totalRecordsSource$ = this.totalRecordsSource.asObservable();\n    columnsSource$ = this.columnsSource.asObservable();\n\n    onSort(sortMeta: SortMeta | SortMeta[] | null) {\n        this.sortSource.next(sortMeta);\n    }\n\n    onSelectionChange() {\n        this.selectionSource.next(null);\n    }\n\n    onContextMenu(data: any) {\n        this.contextMenuSource.next(data);\n    }\n\n    onValueChange(value: any) {\n        this.valueSource.next(value);\n    }\n\n    onTotalRecordsChange(value: number) {\n        this.totalRecordsSource.next(value);\n    }\n\n    onColumnsChange(columns: any[]) {\n        this.columnsSource.next(columns);\n    }\n}\n/**\n * Table displays data in tabular format.\n * @group Components\n */\n@Component({\n    selector: 'p-table',\n    standalone: false,\n    template: `\n        <div #container [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"cx('root')\" [attr.id]=\"id\">\n            <div [ngClass]=\"cx('mask')\" *ngIf=\"loading && showLoader\">\n                <i *ngIf=\"loadingIcon\" [class]=\"'p-datatable-loading-icon ' + loadingIcon\"></i>\n                <ng-container *ngIf=\"!loadingIcon\">\n                    <SpinnerIcon *ngIf=\"!loadingIconTemplate && !_loadingIconTemplate\" [spin]=\"true\" [styleClass]=\"cx('loadingIcon')\" />\n                    <span *ngIf=\"loadingIconTemplate || _loadingIconTemplate\" [ngClass]=\"cx('loadingIcon')\">\n                        <ng-template *ngTemplateOutlet=\"loadingIconTemplate || _loadingIconTemplate\"></ng-template>\n                    </span>\n                </ng-container>\n            </div>\n            <div *ngIf=\"captionTemplate || _captionTemplate\" [ngClass]=\"cx('header')\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate || _captionTemplate\"></ng-container>\n            </div>\n            <p-paginator\n                [rows]=\"rows\"\n                [first]=\"first\"\n                [totalRecords]=\"totalRecords\"\n                [pageLinkSize]=\"pageLinks\"\n                [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\"\n                [rowsPerPageOptions]=\"rowsPerPageOptions\"\n                *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')\"\n                [templateLeft]=\"paginatorLeftTemplate || _paginatorLeftTemplate\"\n                [templateRight]=\"paginatorRightTemplate || _paginatorRightTemplate\"\n                [dropdownAppendTo]=\"paginatorDropdownAppendTo\"\n                [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate\"\n                [showFirstLastIcon]=\"showFirstLastIcon\"\n                [dropdownItemTemplate]=\"paginatorDropdownItemTemplate || _paginatorDropdownItemTemplate\"\n                [showCurrentPageReport]=\"showCurrentPageReport\"\n                [showJumpToPageDropdown]=\"showJumpToPageDropdown\"\n                [showJumpToPageInput]=\"showJumpToPageInput\"\n                [showPageLinks]=\"showPageLinks\"\n                [styleClass]=\"cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass\"\n                [locale]=\"paginatorLocale\"\n            >\n                <ng-template pTemplate=\"dropdownicon\" *ngIf=\"paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate\"></ng-container>\n                </ng-template>\n\n                <ng-template pTemplate=\"firstpagelinkicon\" *ngIf=\"paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate\"></ng-container>\n                </ng-template>\n\n                <ng-template pTemplate=\"previouspagelinkicon\" *ngIf=\"paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate\"></ng-container>\n                </ng-template>\n\n                <ng-template pTemplate=\"lastpagelinkicon\" *ngIf=\"paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate\"></ng-container>\n                </ng-template>\n\n                <ng-template pTemplate=\"nextpagelinkicon\" *ngIf=\"paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate\"></ng-container>\n                </ng-template>\n            </p-paginator>\n\n            <div #wrapper [ngClass]=\"cx('tableContainer')\" [ngStyle]=\"sx('tableContainer')\">\n                <p-scroller\n                    #scroller\n                    *ngIf=\"virtualScroll\"\n                    [items]=\"processedData\"\n                    [columns]=\"columns\"\n                    [style]=\"{\n                        height: scrollHeight !== 'flex' ? scrollHeight : undefined\n                    }\"\n                    [scrollHeight]=\"scrollHeight !== 'flex' ? undefined : '100%'\"\n                    [itemSize]=\"virtualScrollItemSize || _virtualRowHeight\"\n                    [step]=\"rows\"\n                    [delay]=\"lazy ? virtualScrollDelay : 0\"\n                    [inline]=\"true\"\n                    [lazy]=\"lazy\"\n                    (onLazyLoad)=\"onLazyItemLoad($event)\"\n                    [loaderDisabled]=\"true\"\n                    [showSpacer]=\"false\"\n                    [showLoader]=\"loadingBodyTemplate || _loadingBodyTemplate\"\n                    [options]=\"virtualScrollOptions\"\n                    [autoSize]=\"true\"\n                >\n                    <ng-template #content let-items let-scrollerOptions=\"options\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                buildInTable;\n                                context: {\n                                    $implicit: items,\n                                    options: scrollerOptions\n                                }\n                            \"\n                        ></ng-container>\n                    </ng-template>\n                </p-scroller>\n                <ng-container *ngIf=\"!virtualScroll\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            buildInTable;\n                            context: {\n                                $implicit: processedData,\n                                options: { columns }\n                            }\n                        \"\n                    ></ng-container>\n                </ng-container>\n\n                <ng-template #buildInTable let-items let-scrollerOptions=\"options\">\n                    <table #table role=\"table\" [ngClass]=\"cx('table')\" [class]=\"tableStyleClass\" [style]=\"tableStyle\" [attr.id]=\"id + '-table'\">\n                        <ng-container *ngTemplateOutlet=\"colGroupTemplate || _colGroupTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\n                        <thead role=\"rowgroup\" #thead [ngClass]=\"cx('thead')\" [ngStyle]=\"sx('thead')\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    headerGroupedTemplate || headerTemplate || _headerTemplate;\n                                    context: {\n                                        $implicit: scrollerOptions.columns\n                                    }\n                                \"\n                            ></ng-container>\n                        </thead>\n                        <tbody\n                            role=\"rowgroup\"\n                            [ngClass]=\"cx('tbody')\"\n                            *ngIf=\"frozenValue || frozenBodyTemplate || _frozenBodyTemplate\"\n                            [value]=\"frozenValue\"\n                            [frozenRows]=\"true\"\n                            [pTableBody]=\"scrollerOptions.columns\"\n                            [pTableBodyTemplate]=\"frozenBodyTemplate || _frozenBodyTemplate\"\n                            [frozen]=\"true\"\n                        ></tbody>\n                        <tbody\n                            role=\"rowgroup\"\n                            [ngClass]=\"cx('tbody', scrollerOptions.contentStyleClass)\"\n                            [style]=\"scrollerOptions.contentStyle\"\n                            [value]=\"dataToRender(scrollerOptions.rows)\"\n                            [pTableBody]=\"scrollerOptions.columns\"\n                            [pTableBodyTemplate]=\"bodyTemplate || _bodyTemplate\"\n                            [scrollerOptions]=\"scrollerOptions\"\n                        ></tbody>\n                        <tbody\n                            role=\"rowgroup\"\n                            *ngIf=\"scrollerOptions.spacerStyle\"\n                            [style]=\"'height: calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px);'\"\n                            [ngClass]=\"cx('virtualScrollerSpacer')\"\n                        ></tbody>\n                        <tfoot role=\"rowgroup\" *ngIf=\"footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate\" #tfoot [ngClass]=\"cx('footer')\" [ngStyle]=\"sx('tfoot')\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    footerGroupedTemplate || footerTemplate || _footerTemplate || _footerGroupedTemplate;\n                                    context: {\n                                        $implicit: scrollerOptions.columns\n                                    }\n                                \"\n                            ></ng-container>\n                        </tfoot>\n                    </table>\n                </ng-template>\n            </div>\n\n            <p-paginator\n                [rows]=\"rows\"\n                [first]=\"first\"\n                [totalRecords]=\"totalRecords\"\n                [pageLinkSize]=\"pageLinks\"\n                [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\"\n                [rowsPerPageOptions]=\"rowsPerPageOptions\"\n                *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')\"\n                [templateLeft]=\"paginatorLeftTemplate || _paginatorLeftTemplate\"\n                [templateRight]=\"paginatorRightTemplate || _paginatorRightTemplate\"\n                [dropdownAppendTo]=\"paginatorDropdownAppendTo\"\n                [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate\"\n                [showFirstLastIcon]=\"showFirstLastIcon\"\n                [dropdownItemTemplate]=\"paginatorDropdownItemTemplate || _paginatorDropdownItemTemplate\"\n                [showCurrentPageReport]=\"showCurrentPageReport\"\n                [showJumpToPageDropdown]=\"showJumpToPageDropdown\"\n                [showJumpToPageInput]=\"showJumpToPageInput\"\n                [showPageLinks]=\"showPageLinks\"\n                [styleClass]=\"cx('pcPaginator') + ' ' + paginatorStyleClass && paginatorStyleClass\"\n                [locale]=\"paginatorLocale\"\n            >\n                <ng-template pTemplate=\"dropdownicon\" *ngIf=\"paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"paginatorDropdownIconTemplate || _paginatorDropdownIconTemplate\"></ng-container>\n                </ng-template>\n\n                <ng-template pTemplate=\"firstpagelinkicon\" *ngIf=\"paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate\"></ng-container>\n                </ng-template>\n\n                <ng-template pTemplate=\"previouspagelinkicon\" *ngIf=\"paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate\"></ng-container>\n                </ng-template>\n\n                <ng-template pTemplate=\"lastpagelinkicon\" *ngIf=\"paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate\"></ng-container>\n                </ng-template>\n\n                <ng-template pTemplate=\"nextpagelinkicon\" *ngIf=\"paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate\"></ng-container>\n                </ng-template>\n            </p-paginator>\n\n            <div *ngIf=\"summaryTemplate || _summaryTemplate\" [ngClass]=\"cx('footer')\">\n                <ng-container *ngTemplateOutlet=\"summaryTemplate || _summaryTemplate\"></ng-container>\n            </div>\n\n            <div #resizeHelper [ngClass]=\"cx('columnResizeIndicator')\" style=\"display:none\" *ngIf=\"resizableColumns\"></div>\n            <span #reorderIndicatorUp [ngClass]=\"cx('rowReorderIndicatorUp')\" style=\"display: none;\" *ngIf=\"reorderableColumns\">\n                <ArrowDownIcon *ngIf=\"!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate\" />\n                <ng-template *ngTemplateOutlet=\"reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate\"></ng-template>\n            </span>\n            <span #reorderIndicatorDown [ngClass]=\"cx('rowReorderIndicatorDown')\" style=\"display: none;\" *ngIf=\"reorderableColumns\">\n                <ArrowUpIcon *ngIf=\"!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate\" />\n                <ng-template *ngTemplateOutlet=\"reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate\"></ng-template>\n            </span>\n        </div>\n    `,\n    providers: [TableService, TableStyle],\n    changeDetection: ChangeDetectionStrategy.Default,\n    encapsulation: ViewEncapsulation.None\n})\nexport class Table<RowData = any> extends BaseComponent implements OnInit, AfterViewInit, AfterContentInit, BlockableUI, OnChanges {\n    /**\n     * An array of objects to represent dynamic columns that are frozen.\n     * @group Props\n     */\n    @Input() frozenColumns: any[] | undefined;\n    /**\n     * An array of objects to display as frozen.\n     * @group Props\n     */\n    @Input() frozenValue: any[] | undefined;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Inline style of the table.\n     * @group Props\n     */\n    @Input() tableStyle: { [klass: string]: any } | null | undefined;\n    /**\n     *