primeng
Version:
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
1,558 lines (1,452 loc) • 357 kB
JavaScript
import { trigger, transition, style, animate } from '@angular/animations';
import * as i1 from '@angular/common';
import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, NgZone, numberAttribute, booleanAttribute, ContentChild, ContentChildren, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, HostListener, PLATFORM_ID, Inject, Optional, forwardRef, ElementRef, NgModule } from '@angular/core';
import * as i5 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i3 from 'primeng/api';
import { OverlayService, FilterService, FilterOperator, FilterMatchMode, PrimeTemplate, TranslationKeys, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i9 from 'primeng/button';
import { Button, ButtonModule } from 'primeng/button';
import * as i7 from 'primeng/checkbox';
import { CheckboxModule } from 'primeng/checkbox';
import * as i11 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 { FilterSlashIcon } from 'primeng/icons/filterslash';
import { PlusIcon } from 'primeng/icons/plus';
import { SortAltIcon } from 'primeng/icons/sortalt';
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 { InputNumberModule } from 'primeng/inputnumber';
import * as i10 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 { RadioButtonModule } from 'primeng/radiobutton';
import * as i4 from 'primeng/scroller';
import { ScrollerModule } from 'primeng/scroller';
import * as i8 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 { 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;
}
.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;
}
.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.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.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.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
background: ${dt('datatable.row.striped.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-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.p-datatable-sm .p-datatable-header {
padding: ${dt('datatable.header.sm.padding')};
}
.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
padding: ${dt('datatable.header.cell.sm.padding')};
}
.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
padding: ${dt('datatable.body.cell.sm.padding')};
}
.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
padding: ${dt('datatable.footer.cell.sm.padding')};
}
.p-datatable.p-datatable-sm .p-datatable-footer {
padding: ${dt('datatable.footer.sm.padding')};
}
.p-datatable.p-datatable-lg .p-datatable-header {
padding: ${dt('datatable.header.lg.padding')};
}
.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
padding: ${dt('datatable.header.cell.lg.padding')};
}
.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
padding: ${dt('datatable.body.cell.lg.padding')};
}
.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
padding: ${dt('datatable.footer.cell.lg.padding')};
}
.p-datatable.p-datatable-lg .p-datatable-footer {
padding: ${dt('datatable.footer.lg.padding')};
}
.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-row-toggle-button:enabled:hover {
color: ${dt('datatable.row.toggle.button.hover.color')};
background: ${dt('datatable.row.toggle.button.hover.background')};
}
.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
background: ${dt('datatable.row.toggle.button.selected.hover.background')};
${dt('datatable.row.toggle.button.selected.hover.color')};
}
.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')};
}
`;
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'
}),
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'
}),
thead: 'p-datatable-thead',
columnResizer: 'p-datatable-column-resizer',
columnHeaderContent: 'p-datatable-column-header-content',
columnTitle: 'p-datatable-column-title',
columnFooter: 'p-datatable-column-footer',
sortIcon: 'p-datatable-sort-icon',
pcSortBadge: 'p-datatable-sort-badge',
filter: ({ instance }) => ({
'p-datatable-filter': true,
'p-datatable-inline-filter': instance.display === 'row',
'p-datatable-popover-filter': instance.display === 'menu'
}),
filterElementContainer: 'p-datatable-filter-element-container',
pcColumnFilterButton: 'p-datatable-column-filter-button',
pcColumnFilterClearButton: 'p-datatable-column-filter-clear-button',
filterOverlay: ({ instance }) => ({
'p-datatable-filter-overlay p-component': true,
'p-datatable-filter-overlay-popover': instance.display === 'menu'
}),
filterConstraintList: 'p-datatable-filter-constraint-list',
filterConstraint: 'p-datatable-filter-constraint',
filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
filterOperator: 'p-datatable-filter-operator',
pcFilterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
filterRuleList: 'p-datatable-filter-rule-list',
filterRule: 'p-datatable-filter-rule',
pcFilterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
pcFilterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
pcFilterAddRuleButton: 'p-datatable-filter-add-rule-button',
filterButtonbar: 'p-datatable-filter-buttonbar',
pcFilterClearButton: 'p-datatable-filter-clear-button',
pcFilterApplyButton: 'p-datatable-filter-apply-button',
tbody: ({ instance }) => ({
'p-datatable-tbody': true,
'p-datatable-frozen-tbody': instance.frozenValue || instance.frozenBodyTemplate,
'p-virtualscroller-content': instance.virtualScroll
}),
rowGroupHeader: 'p-datatable-row-group-header',
rowToggleButton: 'p-datatable-row-toggle-button',
rowToggleIcon: 'p-datatable-row-toggle-icon',
rowExpansion: 'p-datatable-row-expansion',
rowGroupFooter: 'p-datatable-row-group-footer',
emptyMessage: 'p-datatable-empty-message',
bodyCell: ({ instance }) => ({
'p-datatable-frozen-column': instance.columnProp('frozen')
}),
reorderableRowHandle: 'p-datatable-reorderable-row-handle',
pcRowEditorInit: 'p-datatable-row-editor-init',
pcRowEditorSave: 'p-datatable-row-editor-save',
pcRowEditorCancel: 'p-datatable-row-editor-cancel',
tfoot: 'p-datatable-tfoot',
footerCell: ({ instance }) => ({
'p-datatable-frozen-column': instance.columnProp('frozen')
}),
virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
footer: 'p-datatable-tfoot',
columnResizeIndicator: 'p-datatable-column-resize-indicator',
rowReorderIndicatorUp: 'p-datatable-row-reorder-indicator-up',
rowReorderIndicatorDown: 'p-datatable-row-reorder-indicator-down'
};
const inlineStyles = {
tableContainer: ({ instance }) => ({
'max-height': instance.virtualScroll ? '' : instance.scrollHeight,
overflow: 'auto'
}),
thead: { position: 'sticky' },
tfoot: { position: 'sticky' }
};
class TableStyle extends BaseStyle {
name = 'datatable';
theme = theme;
classes = classes;
inlineStyles = inlineStyles;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableStyle, decorators: [{
type: Injectable
}] });
/**
*
* DataTable displays data in tabular format.
*
* [Live Demo](https://www.primeng.org/table/)
*
* @module tablestyle
*
*/
var TableClasses;
(function (TableClasses) {
/**
* Class name of the root element
*/
TableClasses["root"] = "p-datatable";
/**
* Class name of the mask element
*/
TableClasses["mask"] = "p-datatable-mask";
/**
* Class name of the loading icon element
*/
TableClasses["loadingIcon"] = "p-datatable-loading-icon";
/**
* Class name of the header element
*/
TableClasses["header"] = "p-datatable-header";
/**
* Class name of the paginator element
*/
TableClasses["pcPaginator"] = "p-datatable-paginator-[position]";
/**
* Class name of the table container element
*/
TableClasses["tableContainer"] = "p-datatable-table-container";
/**
* Class name of the table element
*/
TableClasses["table"] = "p-datatable-table";
/**
* Class name of the thead element
*/
TableClasses["thead"] = "p-datatable-thead";
/**
* Class name of the column resizer element
*/
TableClasses["columnResizer"] = "p-datatable-column-resizer";
/**
* Class name of the column header content element
*/
TableClasses["columnHeaderContent"] = "p-datatable-column-header-content";
/**
* Class name of the column title element
*/
TableClasses["columnTitle"] = "p-datatable-column-title";
/**
* Class name of the sort icon element
*/
TableClasses["sortIcon"] = "p-datatable-sort-icon";
/**
* Class name of the sort badge element
*/
TableClasses["pcSortBadge"] = "p-datatable-sort-badge";
/**
* Class name of the filter element
*/
TableClasses["filter"] = "p-datatable-filter";
/**
* Class name of the filter element container element
*/
TableClasses["filterElementContainer"] = "p-datatable-filter-element-container";
/**
* Class name of the column filter button element
*/
TableClasses["pcColumnFilterButton"] = "p-datatable-column-filter-button";
/**
* Class name of the column filter clear button element
*/
TableClasses["pcColumnFilterClearButton"] = "p-datatable-column-filter-clear-button";
/**
* Class name of the filter overlay element
*/
TableClasses["filterOverlay"] = "p-datatable-filter-overlay";
/**
* Class name of the filter constraint list element
*/
TableClasses["filterConstraintList"] = "p-datatable-filter-constraint-list";
/**
* Class name of the filter constraint element
*/
TableClasses["filterConstraint"] = "p-datatable-filter-constraint";
/**
* Class name of the filter constraint separator element
*/
TableClasses["filterConstraintSeparator"] = "p-datatable-filter-constraint-separator";
/**
* Class name of the filter operator element
*/
TableClasses["filterOperator"] = "p-datatable-filter-operator";
/**
* Class name of the filter operator dropdown element
*/
TableClasses["pcFilterOperatorDropdown"] = "p-datatable-filter-operator-dropdown";
/**
* Class name of the filter rule list element
*/
TableClasses["filterRuleList"] = "p-datatable-filter-rule-list";
/**
* Class name of the filter rule element
*/
TableClasses["filterRule"] = "p-datatable-filter-rule";
/**
* Class name of the filter constraint dropdown element
*/
TableClasses["pcFilterConstraintDropdown"] = "p-datatable-filter-constraint-dropdown";
/**
* Class name of the filter remove rule button element
*/
TableClasses["pcFilterRemoveRuleButton"] = "p-datatable-filter-remove-rule-button";
/**
* Class name of the filter add rule button element
*/
TableClasses["pcFilterAddRuleButton"] = "p-datatable-filter-add-rule-button";
/**
* Class name of the filter buttonbar element
*/
TableClasses["filterButtonbar"] = "p-datatable-filter-buttonbar";
/**
* Class name of the filter clear button element
*/
TableClasses["pcFilterClearButton"] = "p-datatable-filter-clear-button";
/**
* Class name of the filter apply button element
*/
TableClasses["pcFilterApplyButton"] = "p-datatable-filter-apply-button";
/**
* Class name of the tbody element
*/
TableClasses["tbody"] = "p-datatable-tbody";
/**
* Class name of the row group header element
*/
TableClasses["rowGroupHeader"] = "p-datatable-row-group-header";
/**
* Class name of the row toggle button element
*/
TableClasses["rowToggleButton"] = "p-datatable-row-toggle-button";
/**
* Class name of the row toggle icon element
*/
TableClasses["rowToggleIcon"] = "p-datatable-row-toggle-icon";
/**
* Class name of the row expansion element
*/
TableClasses["rowExpansion"] = "p-datatable-row-expansion";
/**
* Class name of the row group footer element
*/
TableClasses["rowGroupFooter"] = "p-datatable-row-group-footer";
/**
* Class name of the empty message element
*/
TableClasses["emptyMessage"] = "p-datatable-empty-message";
/**
* Class name of the reorderable row handle element
*/
TableClasses["reorderableRowHandle"] = "p-datatable-reorderable-row-handle";
/**
* Class name of the row editor init element
*/
TableClasses["pcRowEditorInit"] = "p-datatable-row-editor-init";
/**
* Class name of the row editor save element
*/
TableClasses["pcRowEditorSave"] = "p-datatable-row-editor-save";
/**
* Class name of the row editor cancel element
*/
TableClasses["pcRowEditorCancel"] = "p-datatable-row-editor-cancel";
/**
* Class name of the tfoot element
*/
TableClasses["tfoot"] = "p-datatable-tfoot";
/**
* Class name of the virtual scroller spacer element
*/
TableClasses["virtualScrollerSpacer"] = "p-datatable-virtualscroller-spacer";
/**
* Class name of the footer element
*/
TableClasses["footer"] = "p-datatable-footer";
/**
* Class name of the column resize indicator element
*/
TableClasses["columnResizeIndicator"] = "p-datatable-column-resize-indicator";
/**
* Class name of the row reorder indicator up element
*/
TableClasses["rowReorderIndicatorUp"] = "p-datatable-row-reorder-indicator-up";
/**
* Class name of the row reorder indicator down element
*/
TableClasses["rowReorderIndicatorDown"] = "p-datatable-row-reorder-indicator-down";
})(TableClasses || (TableClasses = {}));
class TableService {
sortSource = new Subject();
selectionSource = new Subject();
contextMenuSource = new Subject();
valueSource = new Subject();
totalRecordsSource = new Subject();
columnsSource = new Subject();
sortSource$ = this.sortSource.asObservable();
selectionSource$ = this.selectionSource.asObservable();
contextMenuSource$ = this.contextMenuSource.asObservable();
valueSource$ = this.valueSource.asObservable();
totalRecordsSource$ = this.totalRecordsSource.asObservable();
columnsSource$ = this.columnsSource.asObservable();
onSort(sortMeta) {
this.sortSource.next(sortMeta);
}
onSelectionChange() {
this.selectionSource.next(null);
}
onContextMenu(data) {
this.contextMenuSource.next(data);
}
onValueChange(value) {
this.valueSource.next(value);
}
onTotalRecordsChange(value) {
this.totalRecordsSource.next(value);
}
onColumnsChange(columns) {
this.columnsSource.next(columns);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableService, decorators: [{
type: Injectable
}] });
/**
* Table displays data in tabular format.
* @group Components
*/
class Table extends BaseComponent {
/**
* An array of objects to represent dynamic columns that are frozen.
* @group Props
*/
frozenColumns;
/**
* An array of objects to display as frozen.
* @group Props
*/
frozenValue;
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* Inline style of the table.
* @group Props
*/
tableStyle;
/**
* Style class of the table.
* @group Props
*/
tableStyleClass;
/**
* When specified as true, enables the pagination.
* @group Props
*/
paginator;
/**
* Number of page links to display in paginator.
* @group Props
*/
pageLinks = 5;
/**
* Array of integer/object values to display inside rows per page dropdown of paginator
* @group Props
*/
rowsPerPageOptions;
/**
* Whether to show it even there is only one page.
* @group Props
*/
alwaysShowPaginator = true;
/**
* Position of the paginator, options are "top", "bottom" or "both".
* @group Props
*/
paginatorPosition = 'bottom';
/**
* Custom style class for paginator
* @group Props
*/
paginatorStyleClass;
/**
* Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
* @group Props
*/
paginatorDropdownAppendTo;
/**
* Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
* @group Props
*/
paginatorDropdownScrollHeight = '200px';
/**
* Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
* @group Props
*/
currentPageReportTemplate = '{currentPage} of {totalPages}';
/**
* Whether to display current page report.
* @group Props
*/
showCurrentPageReport;
/**
* Whether to display a dropdown to navigate to any page.
* @group Props
*/
showJumpToPageDropdown;
/**
* Whether to display a input to navigate to any page.
* @group Props
*/
showJumpToPageInput;
/**
* When enabled, icons are displayed on paginator to go first and last page.
* @group Props
*/
showFirstLastIcon = true;
/**
* Whether to show page links.
* @group Props
*/
showPageLinks = true;
/**
* Sort order to use when an unsorted column gets sorted by user interaction.
* @group Props
*/
defaultSortOrder = 1;
/**
* Defines whether sorting works on single column or on multiple columns.
* @group Props
*/
sortMode = 'single';
/**
* When true, resets paginator to first page after sorting. Available only when sortMode is set to single.
* @group Props
*/
resetPageOnSort = true;
/**
* Specifies the selection mode, valid values are "single" and "multiple".
* @group Props
*/
selectionMode;
/**
* When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page.
* @group Props
*/
selectionPageOnly;
/**
* Selected row with a context menu.
* @group Props
*/
contextMenuSelection;
/**
* Callback to invoke on context menu selection change.
* @param {*} object - row data.
* @group Emits
*/
contextMenuSelectionChange = new EventEmitter();
/**
* Defines the behavior of context menu selection, in "separate" mode context menu updates contextMenuSelection property whereas in joint mode selection property is used instead so that when row selection is enabled, both row selection and context menu selection use the same property.
* @group Props
*/
contextMenuSelectionMode = 'separate';
/**
* A property to uniquely identify a record in data.
* @group Props
*/
dataKey;
/**
* Defines whether metaKey should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically.
* @group Props
*/
metaKeySelection = false;
/**
* Defines if the row is selectable.
* @group Props
*/
rowSelectable;
/**
* Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
* @group Props
*/
rowTrackBy = (index, item) => item;
/**
* Defines if data is loaded and interacted with in lazy manner.
* @group Props
*/
lazy = false;
/**
* Whether to call lazy loading on initialization.
* @group Props
*/
lazyLoadOnInit = true;
/**
* Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields.
* @group Props
*/
compareSelectionBy = 'deepEquals';
/**
* Character to use as the csv separator.
* @group Props
*/
csvSeparator = ',';
/**
* Name of the exported file.
* @group Props
*/
exportFilename = 'download';
/**
* An array of FilterMetadata objects to provide external filters.
* @group Props
*/
filters = {};
/**
* An array of fields as string to use in global filtering.
* @group Props
*/
globalFilterFields;
/**
* Delay in milliseconds before filtering the data.
* @group Props
*/
filterDelay = 300;
/**
* Locale to use in filtering. The default locale is the host environment's current locale.
* @group Props
*/
filterLocale;
/**
* Map instance to keep the expanded rows where key of the map is the data key of the row.
* @group Props
*/
expandedRowKeys = {};
/**
* Map instance to keep the rows being edited where key of the map is the data key of the row.
* @group Props
*/
editingRowKeys = {};
/**
* Whether multiple rows can be expanded at any time. Valid values are "multiple" and "single".
* @group Props
*/
rowExpandMode = 'multiple';
/**
* Enables scrollable tables.
* @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
*/
rowGroupMode;
/**
* Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
* @group Props
*/
scrollHeight;
/**
* Whether the data should be loaded on demand during scroll.
* @group Props
*/
virtualScroll;
/**
* Height of a row to use in calculations of virtual scrolling.
* @group Props
*/
virtualScrollItemSize;
/**
* Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
* @group Props
*/
virtualScrollOptions;
/**
* Threshold in milliseconds to delay lazy loading during scrolling.
* @group Props
*/
virtualScrollDelay = 250;
/**
* Width of the frozen columns container.
* @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
*/
contextMenu;
/**
* When enabled, columns can be resized using drag and drop.
* @group Props
*/
resizableColumns;
/**
* Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
* @group Props
*/
columnResizeMode = 'fit';
/**
* When enabled, columns can be reordered using drag and drop.
* @group Props
*/
reorderableColumns;
/**
* Displays a loader to indicate data load is in progress.
* @group Props
*/
loading;
/**
* The icon to show while indicating data load is in progress.
* @group Props
*/
loadingIcon;
/**
* Whether to show the loading mask when loading property is true.
* @group Props
*/
showLoader = true;
/**
* Adds hover effect to rows without the need for selectionMode. Note that tr elements that can be hovered need to have "p-selectable-row" class for rowHover to work.
* @group Props
*/
rowHover;
/**
* Whether to use the default sorting or a custom one using sortFunction.
* @group Props
*/
customSort;
/**
* Whether to use the initial sort badge or not.
* @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
*/
exportFunction;
/**
* Custom export header of the column to be exported as CSV.
* @group Props
*/
exportHeader;
/**
* Unique identifier of a stateful table to use in state storage.
* @group Props
*/
stateKey;
/**
* Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
* @group Props
*/
stateStorage = 'session';
/**
* Defines the editing mode, valid values are "cell" and "row".
* @group Props
*/
editMode = 'cell';
/**
* Field name to use in row grouping.
* @group Props
*/
groupRowsBy;
/**
* Defines the size of the table.
* @group Props
*/
size;
/**
* Whether to show grid lines between cells.
* @group Props
*/
showGridlines;
/**
* Whether to display rows with alternating colors.
* @group Props
*/
stripedRows;
/**
* Order to sort when default row grouping is enabled.
* @group Props
*/
groupRowsByOrder = 1;
/**
* Defines the responsive mode, valid options are "stack" and "scroll".
* @group Props
*/
responsiveLayout = 'scroll';
/**
* The breakpoint to define the maximum width boundary when using stack responsive layout.
* @group Props
*/
breakpoint = '960px';
/**
* Locale to be used in paginator formatting.
* @group Props
*/
paginatorLocale;
/**
* An array of objects to display.
* @group Props
*/
get value() {
return this._value;
}
set value(val) {
this._value = val;
}
/**
* An array of objects to represent dynamic columns.
* @group Props
*/
get columns() {
return this._columns;
}
set columns(cols) {
this._columns = cols;
}
/**
* Index of the first row to be displayed.
* @group Props
*/
get first() {
return this._first;
}
set first(val) {
this._first = val;
}
/**
* Number of rows to display per page.
* @group Props
*/
get rows() {
return this._rows;
}
set rows(val) {
this._rows = val;
}
/**
* Number of total records, defaults to length of value when not defined.
* @group Props
*/
get totalRecords() {
return this._totalRecords;
}
set totalRecords(val) {
this._totalRecords = val;
this.tableService.onTotalRecordsChange(this._totalRecords);
}
/**
* Name of the field to sort data by default.
* @group Props
*/
get sortField() {
return this._sortField;
}
set sortField(val) {
this._sortField = val;
}
/**
* Order to sort when default sorting is enabled.
* @group Props
*/
get sortOrder() {
return this._sortOrder;
}
set sortOrder(val) {
this._sortOrder = val;
}
/**
* An array of SortMeta objects to sort the data by default in multiple sort mode.
* @group Props
*/
get multiSortMeta() {
return this._multiSortMeta;
}
set multiSortMeta(val) {
this._multiSortMeta = val;
}
/**
* Selected row in single mode or an array of values in multiple mode.
* @group Props
*/
get selection() {
return this._selection;
}
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
*/
get selectAll() {
return this._selection;
}
set selectAll(val) {
this._selection = val;
}
/**
* Emits when the all of the items selected or unselected.
* @param {TableSelectAllChangeEvent} event - custom all selection change event.
* @group Emits
*/
selectAllChange = new EventEmitter();
/**
* Callback to invoke on selection changed.
* @param {any | null} value - selected data.
* @group Emits
*/
selectionChange = new EventEmitter();
/**
* Callback to invoke when a row is selected.
* @param {TableRowSelectEvent} event - custom select event.
* @group Emits
*/
onRowSelect = new EventEmitter();
/**
* Callback to invoke when a row is unselected.
* @param {TableRowUnSelectEvent} event - custom unselect event.
* @group Emits
*/
onRowUnselect = new EventEmitter();
/**
* Callback to invoke when pagination occurs.
* @param {TablePageEvent} event - custom pagination event.
* @group Emits
*/
onPage = new EventEmitter();
/**
* Callback to invoke when a column gets sorted.
* @param {Object} object - sort meta.
* @group Emits
*/
onSort = new EventEmitter();
/**
* Callback to invoke when data is filtered.
* @param {TableFilt