primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
1,207 lines (1,204 loc) • 94.4 kB
TypeScript
import { TablePassThrough, TablePaginatorPosition, TableSortMode, TableSelectionMode, TableRowExpandMode, TableRowGroupMode, TableColumnResizeMode, TableStateStorage, TableEditMode, TableSize, TableSelectAllChangeEvent, TableRowSelectEvent, TableRowUnSelectEvent, TablePageEvent, TableFilterEvent, TableLazyLoadEvent, TableRowExpandEvent, TableRowCollapseEvent, TableContextMenuSelectEvent, TableColResizeEvent, TableColumnReorderEvent, TableRowReorderEvent, TableEditInitEvent, TableEditCompleteEvent, TableEditCancelEvent, TableHeaderCheckboxToggleEvent, ExportCSVOptions, TableFilterButtonPropsOptions, ColumnFilterPassThrough } from 'primeng/types/table';
export * from 'primeng/types/table';
import { BaseStyle } from 'primeng/base';
import * as _angular_core from '@angular/core';
import { InjectionToken, ElementRef, TemplateRef } from '@angular/core';
import * as rxjs from 'rxjs';
import { Subscription } from 'rxjs';
import * as i26 from 'primeng/api';
import { SortMeta, BlockableUI, FilterMetadata, ScrollerOptions, TableState, OverlayService, FilterService, LazyLoadMeta, SelectItem } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { CheckboxChangeEvent } from 'primeng/checkbox';
import * as i27 from 'primeng/scroller';
import { Scroller } from 'primeng/scroller';
import { CSSProperties } from 'primeng/types/shared';
import { Nullable, VoidListener } from 'primeng/ts-helpers';
import { RadioButton, RadioButtonClickEvent } from 'primeng/radiobutton';
import { MotionOptions, MotionEvent } from '@primeuix/motion';
import { ConnectedOverlayScrollHandler } from 'primeng/dom';
declare class TableStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-datatable-hoverable': any;
'p-datatable-resizable': any;
'p-datatable-resizable-fit': any;
'p-datatable-scrollable': any;
'p-datatable-flex-scrollable': any;
'p-datatable-striped': any;
'p-datatable-gridlines': any;
'p-datatable-sm': boolean;
'p-datatable-lg': boolean;
})[];
mask: string;
loadingIcon: string;
header: string;
pcPaginator: ({ instance }: {
instance: any;
}) => string;
tableContainer: string;
table: ({ instance }: {
instance: any;
}) => (string | {
'p-datatable-scrollable-table': any;
'p-datatable-resizable-table': any;
'p-datatable-resizable-table-fit': any;
})[];
thead: string;
columnResizer: string;
columnHeaderContent: string;
columnTitle: string;
columnFooter: string;
sortIcon: string;
pcSortBadge: string;
filter: ({ instance }: {
instance: any;
}) => {
'p-datatable-filter': boolean;
'p-datatable-inline-filter': boolean;
'p-datatable-popover-filter': boolean;
};
filterElementContainer: string;
pcColumnFilterButton: string;
pcColumnFilterClearButton: string;
filterOverlay: ({ instance }: {
instance: any;
}) => {
'p-datatable-filter-overlay p-component': boolean;
'p-datatable-filter-overlay-popover': boolean;
};
filterConstraintList: string;
filterConstraint: ({ selected }: {
selected: any;
}) => {
'p-datatable-filter-constraint': boolean;
'p-datatable-filter-constraint-selected': any;
};
filterConstraintSeparator: string;
filterOperator: string;
pcFilterOperatorDropdown: string;
filterRuleList: string;
filterRule: string;
pcFilterConstraintDropdown: string;
pcFilterRemoveRuleButton: string;
pcFilterAddRuleButton: string;
filterButtonbar: string;
pcFilterClearButton: string;
pcFilterApplyButton: string;
tbody: ({ instance }: {
instance: any;
}) => {
'p-datatable-tbody': boolean;
'p-datatable-frozen-tbody': any;
'p-virtualscroller-content': any;
};
rowGroupHeader: string;
rowToggleButton: string;
rowToggleIcon: string;
rowExpansion: string;
rowGroupFooter: string;
emptyMessage: string;
bodyCell: ({ instance }: {
instance: any;
}) => {
'p-datatable-frozen-column': any;
};
reorderableRowHandle: string;
pcRowEditorInit: string;
pcRowEditorSave: string;
pcRowEditorCancel: string;
tfoot: string;
footerCell: ({ instance }: {
instance: any;
}) => {
'p-datatable-frozen-column': any;
};
virtualScrollerSpacer: string;
footer: string;
columnResizeIndicator: string;
rowReorderIndicatorUp: string;
rowReorderIndicatorDown: string;
sortableColumn: ({ instance }: {
instance: any;
}) => {
'p-datatable-sortable-column': any;
' p-datatable-column-sorted': any;
};
sortableColumnIcon: string;
sortableColumnBadge: string;
selectableRow: ({ instance }: {
instance: any;
}) => {
'p-datatable-selectable-row': any;
'p-datatable-row-selected': any;
};
resizableColumn: string;
reorderableColumn: string;
rowEditorCancel: string;
frozenColumn: ({ instance }: {
instance: any;
}) => {
'p-datatable-frozen-column': any;
'p-datatable-frozen-column-left': boolean;
};
contextMenuRowSelected: ({ instance }: {
instance: any;
}) => {
'p-datatable-contextmenu-row-selected': any;
};
};
inlineStyles: {
tableContainer: ({ instance }: {
instance: any;
}) => {
'max-height': any;
overflow: string;
};
thead: {
position: string;
};
tfoot: {
position: string;
};
rowGroupHeader: ({ instance }: {
instance: any;
}) => {
top: any;
};
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<TableStyle>;
}
/**
*
* DataTable displays data in tabular format.
*
* [Live Demo](https://www.primeng.org/table/)
*
* @module tablestyle
*
*/
declare enum TableClasses {
/**
* Class name of the root element
*/
root = "p-datatable",
/**
* Class name of the mask element
*/
mask = "p-datatable-mask",
/**
* Class name of the loading icon element
*/
loadingIcon = "p-datatable-loading-icon",
/**
* Class name of the header element
*/
header = "p-datatable-header",
/**
* Class name of the paginator element
*/
pcPaginator = "p-datatable-paginator-[position]",
/**
* Class name of the table container element
*/
tableContainer = "p-datatable-table-container",
/**
* Class name of the table element
*/
table = "p-datatable-table",
/**
* Class name of the thead element
*/
thead = "p-datatable-thead",
/**
* Class name of the column resizer element
*/
columnResizer = "p-datatable-column-resizer",
/**
* Class name of the column header content element
*/
columnHeaderContent = "p-datatable-column-header-content",
/**
* Class name of the column title element
*/
columnTitle = "p-datatable-column-title",
/**
* Class name of the sort icon element
*/
sortIcon = "p-datatable-sort-icon",
/**
* Class name of the sort badge element
*/
pcSortBadge = "p-datatable-sort-badge",
/**
* Class name of the filter element
*/
filter = "p-datatable-filter",
/**
* Class name of the filter element container element
*/
filterElementContainer = "p-datatable-filter-element-container",
/**
* Class name of the column filter button element
*/
pcColumnFilterButton = "p-datatable-column-filter-button",
/**
* Class name of the column filter clear button element
*/
pcColumnFilterClearButton = "p-datatable-column-filter-clear-button",
/**
* Class name of the filter overlay element
*/
filterOverlay = "p-datatable-filter-overlay",
/**
* Class name of the filter constraint list element
*/
filterConstraintList = "p-datatable-filter-constraint-list",
/**
* Class name of the filter constraint element
*/
filterConstraint = "p-datatable-filter-constraint",
/**
* Class name of the filter constraint separator element
*/
filterConstraintSeparator = "p-datatable-filter-constraint-separator",
/**
* Class name of the filter operator element
*/
filterOperator = "p-datatable-filter-operator",
/**
* Class name of the filter operator dropdown element
*/
pcFilterOperatorDropdown = "p-datatable-filter-operator-dropdown",
/**
* Class name of the filter rule list element
*/
filterRuleList = "p-datatable-filter-rule-list",
/**
* Class name of the filter rule element
*/
filterRule = "p-datatable-filter-rule",
/**
* Class name of the filter constraint dropdown element
*/
pcFilterConstraintDropdown = "p-datatable-filter-constraint-dropdown",
/**
* Class name of the filter remove rule button element
*/
pcFilterRemoveRuleButton = "p-datatable-filter-remove-rule-button",
/**
* Class name of the filter add rule button element
*/
pcFilterAddRuleButton = "p-datatable-filter-add-rule-button",
/**
* Class name of the filter buttonbar element
*/
filterButtonbar = "p-datatable-filter-buttonbar",
/**
* Class name of the filter clear button element
*/
pcFilterClearButton = "p-datatable-filter-clear-button",
/**
* Class name of the filter apply button element
*/
pcFilterApplyButton = "p-datatable-filter-apply-button",
/**
* Class name of the tbody element
*/
tbody = "p-datatable-tbody",
/**
* Class name of the row group header element
*/
rowGroupHeader = "p-datatable-row-group-header",
/**
* Class name of the row toggle button element
*/
rowToggleButton = "p-datatable-row-toggle-button",
/**
* Class name of the row toggle icon element
*/
rowToggleIcon = "p-datatable-row-toggle-icon",
/**
* Class name of the row expansion element
*/
rowExpansion = "p-datatable-row-expansion",
/**
* Class name of the row group footer element
*/
rowGroupFooter = "p-datatable-row-group-footer",
/**
* Class name of the empty message element
*/
emptyMessage = "p-datatable-empty-message",
/**
* Class name of the reorderable row handle element
*/
reorderableRowHandle = "p-datatable-reorderable-row-handle",
/**
* Class name of the row editor init element
*/
pcRowEditorInit = "p-datatable-row-editor-init",
/**
* Class name of the row editor save element
*/
pcRowEditorSave = "p-datatable-row-editor-save",
/**
* Class name of the row editor cancel element
*/
pcRowEditorCancel = "p-datatable-row-editor-cancel",
/**
* Class name of the tfoot element
*/
tfoot = "p-datatable-tfoot",
/**
* Class name of the virtual scroller spacer element
*/
virtualScrollerSpacer = "p-datatable-virtualscroller-spacer",
/**
* Class name of the footer element
*/
footer = "p-datatable-footer",
/**
* Class name of the column resize indicator element
*/
columnResizeIndicator = "p-datatable-column-resize-indicator",
/**
* Class name of the row reorder indicator up element
*/
rowReorderIndicatorUp = "p-datatable-row-reorder-indicator-up",
/**
* Class name of the row reorder indicator down element
*/
rowReorderIndicatorDown = "p-datatable-row-reorder-indicator-down",
/**
* Class name of the sortable column element
*/
sortableColumn = "p-datatable-sortable-column",
/**
* Class name of the sortable column icon element
*/
sortableColumnIcon = "p-sortable-column-icon",
/**
* Class name of the sortable column badge element
*/
sortableColumnBadge = "p-sortable-column-badge",
/**
* Class name of the selectable row element
*/
selectableRow = "p-datatable-selectable-row",
/**
* Class name of the resizable column element
*/
resizableColumn = "p-datatable-resizable-column",
/**
* Class name of the row editor cancel element
*/
rowEditorCancel = "p-datatable-row-editor-cancel",
/**
* Class name of the frozen column element
*/
frozenColumn = "p-datatable-frozen-column",
/**
* Class name of the contextmenu row selected element
*/
contextMenuRowSelected = "p-datatable-contextmenu-row-selected"
}
declare const TABLE_INSTANCE: InjectionToken<any>;
declare const COLUMN_FILTER_INSTANCE: InjectionToken<any>;
declare class TableService {
private sortSource;
private selectionSource;
private contextMenuSource;
private valueSource;
private columnsSource;
sortSource$: rxjs.Observable<SortMeta | SortMeta[] | null>;
selectionSource$: rxjs.Observable<unknown>;
contextMenuSource$: rxjs.Observable<any>;
valueSource$: rxjs.Observable<any>;
columnsSource$: rxjs.Observable<unknown>;
onSort(sortMeta: SortMeta | SortMeta[] | null): void;
onSelectionChange(): void;
onContextMenu(data: any): void;
onValueChange(value: any): void;
onColumnsChange(columns: any[]): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableService, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<TableService>;
}
/**
* Table displays data in tabular format.
* @group Components
*/
declare class Table<RowData = any> extends BaseComponent<TablePassThrough> implements BlockableUI {
componentName: string;
/**
* An array of objects to represent dynamic columns that are frozen.
* @group Props
*/
frozenColumns: _angular_core.InputSignal<any[] | undefined>;
/**
* An array of objects to display as frozen.
* @group Props
*/
frozenValue: _angular_core.InputSignal<any[] | undefined>;
/**
* Inline style of the table.
* @group Props
*/
tableStyle: _angular_core.InputSignal<CSSProperties>;
/**
* Style class of the table.
* @group Props
*/
tableStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* When specified as true, enables the pagination.
* @group Props
*/
paginator: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Number of page links to display in paginator.
* @group Props
*/
pageLinks: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Array of integer/object values to display inside rows per page dropdown of paginator
* @group Props
*/
rowsPerPageOptions: _angular_core.InputSignal<any[] | undefined>;
/**
* Whether to show it even there is only one page.
* @group Props
*/
alwaysShowPaginator: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Position of the paginator, options are "top", "bottom" or "both".
* @group Props
*/
paginatorPosition: _angular_core.InputSignal<TablePaginatorPosition>;
/**
* Custom style class for paginator
* @group Props
*/
paginatorStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* 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: _angular_core.InputSignal<any>;
/**
* Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
* @group Props
*/
paginatorDropdownScrollHeight: _angular_core.InputSignal<string>;
/**
* Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
* @group Props
*/
currentPageReportTemplate: _angular_core.InputSignal<string>;
/**
* Whether to display current page report.
* @group Props
*/
showCurrentPageReport: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Whether to display a dropdown to navigate to any page.
* @group Props
*/
showJumpToPageDropdown: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Whether to display a input to navigate to any page.
* @group Props
*/
showJumpToPageInput: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* When enabled, icons are displayed on paginator to go first and last page.
* @group Props
*/
showFirstLastIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether to show page links.
* @group Props
*/
showPageLinks: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Sort order to use when an unsorted column gets sorted by user interaction.
* @group Props
*/
defaultSortOrder: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Defines whether sorting works on single column or on multiple columns.
* @group Props
*/
sortMode: _angular_core.InputSignal<TableSortMode>;
/**
* When true, resets paginator to first page after sorting. Available only when sortMode is set to single.
* @group Props
*/
resetPageOnSort: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Specifies the selection mode, valid values are "single" and "multiple".
* @group Props
*/
selectionMode: _angular_core.InputSignal<TableSelectionMode | null | undefined>;
/**
* 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: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Selected row with a context menu.
* @group Props
*/
contextMenuSelectionInput: _angular_core.InputSignal<any>;
contextMenuSelection: any;
/**
* Callback to invoke on context menu selection change.
* @param {*} object - row data.
* @group Emits
*/
contextMenuSelectionChange: _angular_core.OutputEmitterRef<any>;
/**
* A property to uniquely identify a record in data.
* @group Props
*/
dataKey: _angular_core.InputSignal<string | undefined>;
/**
* Defines whether metaKey should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically.
* @group Props
*/
metaKeySelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Defines if the row is selectable.
* @group Props
*/
rowSelectable: _angular_core.InputSignal<((row: {
data: any;
index: number;
}) => boolean) | undefined>;
/**
* Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
* @group Props
*/
rowTrackBy: _angular_core.InputSignal<Function>;
/**
* Defines if data is loaded and interacted with in lazy manner.
* @group Props
*/
lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether to call lazy loading on initialization.
* @group Props
*/
lazyLoadOnInit: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* 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: _angular_core.InputSignal<"equals" | "deepEquals">;
/**
* Character to use as the csv separator.
* @group Props
*/
csvSeparator: _angular_core.InputSignal<string>;
/**
* Name of the exported file.
* @group Props
*/
exportFilename: _angular_core.InputSignal<string>;
/**
* An array of FilterMetadata objects to provide external filters.
* @group Props
*/
filtersInput: _angular_core.InputSignal<{
[s: string]: FilterMetadata | FilterMetadata[];
}>;
filters: {
[s: string]: FilterMetadata | FilterMetadata[];
};
/**
* An array of fields as string to use in global filtering.
* @group Props
*/
globalFilterFields: _angular_core.InputSignal<string[] | undefined>;
/**
* Delay in milliseconds before filtering the data.
* @group Props
*/
filterDelay: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Locale to use in filtering. The default locale is the host environment's current locale.
* @group Props
*/
filterLocale: _angular_core.InputSignal<string | undefined>;
/**
* Map instance to keep the expanded rows where key of the map is the data key of the row.
* @group Props
*/
expandedRowKeysInput: _angular_core.InputSignal<{
[s: string]: boolean;
}>;
expandedRowKeys: {
[s: string]: boolean;
};
/**
* Map instance to keep the rows being edited where key of the map is the data key of the row.
* @group Props
*/
editingRowKeysInput: _angular_core.InputSignal<{
[s: string]: boolean;
}>;
private _editingRowKeys;
get editingRowKeys(): {
[s: string]: boolean;
};
set editingRowKeys(value: {
[s: string]: boolean;
});
/**
* Whether multiple rows can be expanded at any time. Valid values are "multiple" and "single".
* @group Props
*/
rowExpandMode: _angular_core.InputSignal<TableRowExpandMode>;
/**
* Enables scrollable tables.
* @group Props
*/
scrollable: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Type of the row grouping, valid values are "subheader" and "rowspan".
* @group Props
*/
rowGroupMode: _angular_core.InputSignal<TableRowGroupMode | undefined>;
/**
* Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
* @group Props
*/
scrollHeight: _angular_core.InputSignal<string | undefined>;
/**
* Whether the data should be loaded on demand during scroll.
* @group Props
*/
virtualScroll: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Height of a row to use in calculations of virtual scrolling.
* @group Props
*/
virtualScrollItemSize: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
/**
* Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
* @group Props
*/
virtualScrollOptions: _angular_core.InputSignal<ScrollerOptions | undefined>;
/**
* Threshold in milliseconds to delay lazy loading during scrolling.
* @group Props
*/
virtualScrollDelay: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Width of the frozen columns container.
* @group Props
*/
frozenWidth: _angular_core.InputSignal<string | undefined>;
/**
* Local ng-template varilable of a ContextMenu.
* @group Props
*/
contextMenu: _angular_core.InputSignal<any>;
/**
* When enabled, columns can be resized using drag and drop.
* @group Props
*/
resizableColumns: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
* @group Props
*/
columnResizeMode: _angular_core.InputSignal<TableColumnResizeMode>;
/**
* When enabled, columns can be reordered using drag and drop.
* @group Props
*/
reorderableColumns: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Displays a loader to indicate data load is in progress.
* @group Props
*/
loading: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* The icon to show while indicating data load is in progress.
* @group Props
*/
loadingIcon: _angular_core.InputSignal<string | undefined>;
/**
* Whether to show the loading mask when loading property is true.
* @group Props
*/
showLoader: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* 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: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Whether to use the default sorting or a custom one using sortFunction.
* @group Props
*/
customSort: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Whether to use the initial sort badge or not.
* @group Props
*/
showInitialSortBadge: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Export function.
* @group Props
*/
exportFunction: _angular_core.InputSignal<Function | undefined>;
/**
* Custom export header of the column to be exported as CSV.
* @group Props
*/
exportHeader: _angular_core.InputSignal<string | undefined>;
/**
* Unique identifier of a stateful table to use in state storage.
* @group Props
*/
stateKey: _angular_core.InputSignal<string | undefined>;
/**
* Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
* @group Props
*/
stateStorage: _angular_core.InputSignal<TableStateStorage>;
/**
* Defines the editing mode, valid values are "cell" and "row".
* @group Props
*/
editMode: _angular_core.InputSignal<TableEditMode>;
/**
* Field name to use in row grouping.
* @group Props
*/
groupRowsBy: _angular_core.InputSignal<any>;
/**
* Defines the size of the table.
* @group Props
*/
size: _angular_core.InputSignal<TableSize | undefined>;
/**
* Whether to show grid lines between cells.
* @group Props
*/
showGridlines: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Whether to display rows with alternating colors.
* @group Props
*/
stripedRows: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Order to sort when default row grouping is enabled.
* @group Props
*/
groupRowsByOrder: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Locale to be used in paginator formatting.
* @group Props
*/
paginatorLocale: _angular_core.InputSignal<string | undefined>;
/**
* An array of objects to display.
* @group Props
*/
valueInput: _angular_core.InputSignal<RowData[] | undefined>;
/**
* An array of objects to represent dynamic columns.
* @group Props
*/
columnsInput: _angular_core.InputSignal<any[] | undefined>;
/**
* Index of the first row to be displayed.
* @group Props
*/
first: _angular_core.ModelSignal<number | null | undefined>;
/**
* Number of rows to display per page.
* @group Props
*/
rows: _angular_core.ModelSignal<number | undefined>;
/**
* Number of total records, defaults to length of value when not defined.
* @group Props
*/
totalRecords: _angular_core.ModelSignal<number>;
/**
* Name of the field to sort data by default.
* @group Props
*/
sortFieldInput: _angular_core.InputSignal<string | null | undefined>;
/**
* Order to sort when default sorting is enabled.
* @group Props
*/
sortOrderInput: _angular_core.InputSignal<number>;
/**
* An array of SortMeta objects to sort the data by default in multiple sort mode.
* @group Props
*/
multiSortMetaInput: _angular_core.InputSignal<SortMeta[] | null | undefined>;
/**
* Selected row in single mode or an array of values in multiple mode.
* @group Props
*/
selection: _angular_core.ModelSignal<any>;
/**
* Whether all data is selected.
* @group Props
*/
selectAllInput: _angular_core.InputSignal<boolean | null>;
/**
* Emits when the all of the items selected or unselected.
* @param {TableSelectAllChangeEvent} event - custom all selection change event.
* @group Emits
*/
selectAllChange: _angular_core.OutputEmitterRef<TableSelectAllChangeEvent>;
/**
* Callback to invoke when a row is selected.
* @param {TableRowSelectEvent} event - custom select event.
* @group Emits
*/
onRowSelect: _angular_core.OutputEmitterRef<TableRowSelectEvent<RowData>>;
/**
* Callback to invoke when a row is unselected.
* @param {TableRowUnSelectEvent} event - custom unselect event.
* @group Emits
*/
onRowUnselect: _angular_core.OutputEmitterRef<TableRowUnSelectEvent<RowData>>;
/**
* Callback to invoke when pagination occurs.
* @param {TablePageEvent} event - custom pagination event.
* @group Emits
*/
onPage: _angular_core.OutputEmitterRef<TablePageEvent>;
/**
* Callback to invoke when a column gets sorted.
* @param {Object} object - sort meta.
* @group Emits
*/
onSort: _angular_core.OutputEmitterRef<any>;
/**
* Callback to invoke when data is filtered.
* @param {TableFilterEvent} event - custom filtering event.
* @group Emits
*/
onFilter: _angular_core.OutputEmitterRef<TableFilterEvent>;
/**
* Callback to invoke when paging, sorting or filtering happens in lazy mode.
* @param {TableLazyLoadEvent} event - custom lazy loading event.
* @group Emits
*/
onLazyLoad: _angular_core.OutputEmitterRef<TableLazyLoadEvent>;
/**
* Callback to invoke when a row is expanded.
* @param {TableRowExpandEvent} event - custom row expand event.
* @group Emits
*/
onRowExpand: _angular_core.OutputEmitterRef<TableRowExpandEvent<RowData>>;
/**
* Callback to invoke when a row is collapsed.
* @param {TableRowCollapseEvent} event - custom row collapse event.
* @group Emits
*/
onRowCollapse: _angular_core.OutputEmitterRef<TableRowCollapseEvent>;
/**
* Callback to invoke when a row is selected with right click.
* @param {TableContextMenuSelectEvent} event - custom context menu select event.
* @group Emits
*/
onContextMenuSelect: _angular_core.OutputEmitterRef<TableContextMenuSelectEvent<RowData>>;
/**
* Callback to invoke when a column is resized.
* @param {TableColResizeEvent} event - custom column resize event.
* @group Emits
*/
onColResize: _angular_core.OutputEmitterRef<TableColResizeEvent>;
/**
* Callback to invoke when a column is reordered.
* @param {TableColumnReorderEvent} event - custom column reorder event.
* @group Emits
*/
onColReorder: _angular_core.OutputEmitterRef<TableColumnReorderEvent>;
/**
* Callback to invoke when a row is reordered.
* @param {TableRowReorderEvent} event - custom row reorder event.
* @group Emits
*/
onRowReorder: _angular_core.OutputEmitterRef<TableRowReorderEvent>;
/**
* Callback to invoke when a cell switches to edit mode.
* @param {TableEditInitEvent} event - custom edit init event.
* @group Emits
*/
onEditInit: _angular_core.OutputEmitterRef<TableEditInitEvent>;
/**
* Callback to invoke when cell edit is completed.
* @param {TableEditCompleteEvent} event - custom edit complete event.
* @group Emits
*/
onEditComplete: _angular_core.OutputEmitterRef<TableEditCompleteEvent>;
/**
* Callback to invoke when cell edit is cancelled with escape key.
* @param {TableEditCancelEvent} event - custom edit cancel event.
* @group Emits
*/
onEditCancel: _angular_core.OutputEmitterRef<TableEditCancelEvent>;
/**
* Callback to invoke when state of header checkbox changes.
* @param {TableHeaderCheckboxToggleEvent} event - custom header checkbox event.
* @group Emits
*/
onHeaderCheckboxToggle: _angular_core.OutputEmitterRef<TableHeaderCheckboxToggleEvent>;
/**
* A function to implement custom sorting, refer to sorting section for details.
* @param {any} any - sort meta.
* @group Emits
*/
sortFunction: _angular_core.OutputEmitterRef<any>;
/**
* Callback to invoke table state is saved.
* @param {TableState} object - table state.
* @group Emits
*/
onStateSave: _angular_core.OutputEmitterRef<TableState>;
/**
* Callback to invoke table state is restored.
* @param {TableState} object - table state.
* @group Emits
*/
onStateRestore: _angular_core.OutputEmitterRef<TableState>;
resizeHelperViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
reorderIndicatorUpViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
reorderIndicatorDownViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
wrapperViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
tableViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
tableHeaderViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
tableFooterViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
scroller: _angular_core.Signal<Scroller | undefined>;
value: RowData[];
columns: any[] | undefined;
filteredValue: any[] | undefined | null;
headerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
headerGroupedTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
bodyTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
loadingBodyTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
captionTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
footerGroupedTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
summaryTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
colGroupTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
expandedRowTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
groupHeaderTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
groupFooterTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
frozenExpandedRowTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
frozenHeaderTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
frozenBodyTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
frozenFooterTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
frozenColGroupTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
emptyMessageTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
paginatorLeftTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
paginatorRightTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
paginatorDropdownItemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
loadingIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
reorderIndicatorUpIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
reorderIndicatorDownIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
sortIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
checkboxIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
headerCheckboxIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
paginatorDropdownIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
paginatorFirstPageLinkIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
paginatorLastPageLinkIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
paginatorPreviousPageLinkIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
paginatorNextPageLinkIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
showLoadingMask: _angular_core.Signal<boolean | undefined>;
showTopPaginator: _angular_core.Signal<boolean | undefined>;
showBottomPaginator: _angular_core.Signal<boolean | undefined>;
showFrozenBody: _angular_core.Signal<boolean>;
showFooter: _angular_core.Signal<boolean>;
scrollerStyle: _angular_core.Signal<{
height: string | undefined;
}>;
scrollerScrollHeight: _angular_core.Signal<"100%" | undefined>;
scrollerDelay: _angular_core.Signal<number>;
selectionKeys: any;
disabledSelectionKeys: Set<any>;
lastResizerHelperX: number | undefined;
reorderIconWidth: number | undefined;
reorderIconHeight: number | undefined;
draggedColumn: any;
draggedRowIndex: number | undefined | null;
droppedRowIndex: number | undefined | null;
rowDragging: boolean | undefined | null;
dropPosition: number | undefined | null;
private _editingCell;
get editingCell(): Element | undefined | null;
set editingCell(value: Element | undefined | null);
editingCellData: any;
editingCellField: any;
editingCellRowIndex: number | undefined | null;
selfClick: boolean | undefined | null;
documentEditListener: any;
multiSortMeta: SortMeta[] | undefined | null;
sortField: string | undefined | null;
sortOrder: number;
preventSelectionSetterPropagation: boolean | undefined;
_selectAll: boolean | null;
anchorRowIndex: number | undefined | null;
rangeRowIndex: number | undefined;
filterTimeout: any;
initialized: boolean | undefined | null;
rowTouched: boolean | undefined;
restoringSort: boolean | undefined;
restoringFilter: boolean | undefined;
stateRestored: boolean | undefined;
columnOrderStateRestored: boolean | undefined;
columnWidthsState: string | undefined;
tableWidthState: string | undefined;
overlaySubscription: Subscription | undefined;
resizeColumnElement: HTMLElement;
columnResizing: boolean;
rowGroupHeaderStyleObject: any;
id: string;
styleElement: any;
overlayService: OverlayService;
filterService: FilterService;
tableService: TableService;
_componentStyle: TableStyle;
bindDirectiveInstance: Bind;
constructor();
onAfterViewChecked(): void;
onInit(): void;
onAfterViewInit(): void;
get processedData(): any[];
private _initialColWidths;
private _defaultRows;
dataToRender(data: any): any;
updateSelectionKeys(): void;
onPageChange(event: TablePageEvent): void;
sort(event: any): void;
sortSingle(): void;
sortMultiple(): void;
multisortField(data1: any, data2: any, multiSortMeta: SortMeta[], index: number): any;
compareValuesOnSort(value1: any, value2: any, order: any): number;
getSortMeta(field: string): SortMeta | null;
isSorted(field: string): boolean | "" | null | undefined;
handleRowClick(event: any): void;
handleRowTouchEnd(event: Event): void;
handleRowRightClick(event: any): void;
selectRange(event: MouseEvent | KeyboardEvent, rowIndex: number, isMetaKeySelection?: boolean | undefined): void;
clearSelectionRange(event: MouseEvent | KeyboardEvent): void;
isSelected(rowData: any): boolean;
findIndexInSelection(rowData: any): number;
isRowSelectable(data: any, index: number): boolean;
toggleRowWithRadio(event: any, rowData: any): void;
toggleRowWithCheckbox(event: {
originalEvent: Event;
rowIndex: number;
}, rowData: any): void;
toggleRowsWithCheckbox({ originalEvent }: CheckboxChangeEvent, check: boolean): void;
equals(data1: any, data2: any): boolean;
getSelectionKey(data: any): any;
setRowCheckboxDisabled(rowData: any, disabled: boolean): void;
isRowCheckboxDisabled(rowData: any): boolean;
filter(value: any, field: string, matchMode: string): void;
filterGlobal(value: any, matchMode: string): void;
isFilterBlank(filter: any): boolean;
_filter(): void;
executeLocalFilter(field: string, rowData: any, filterMeta: FilterMetadata): boolean;
hasFilter(): boolean;
createLazyLoadMetadata(): any;
clear(): void;
clearFilterValues(): void;
reset(): void;
getExportHeader(column: any): any;
/**
* Data export method.
* @param {ExportCSVOptions} object - Export options.
* @group Method
*/
exportCSV(options?: ExportCSVOptions): void;
onLazyItemLoad(event: LazyLoadMeta): void;
/**
* Resets scroll to top.
* @group Method
*/
resetScrollTop(): void;
/**
* Scrolls to given index when using virtual scroll.
* @param {number} index - index of the element.
* @group Method
*/
scrollToVirtualIndex(index: number): void;
/**
* Scrolls to given index.
* @param {ScrollToOptions} options - scroll options.
* @group Method
*/
scrollTo(options: any): void;
updateEditingCell(cell: any, data: any, field: string, index: number): void;
isEditingCellValid(): boolean | null | undefined;
bindDocumentEditListener(): void;
unbindDocumentEditListener(): void;
initRowEdit(rowData: any): void;
saveRowEdit(rowData: any, rowElement: HTMLTableRowElement): void;
cancelRowEdit(rowData: any): void;
toggleRow(rowData: any, event?: Event): void;
isRowExpanded(rowData: any): boolean;
isRowEditing(rowData: any): boolean;
isSingleSelectionMode(): boolean;
isMultipleSelectionMode(): boolean;
onColumnResizeBegin(event: any): void;
onColumnResize(event: any): void;
onColumnResizeEnd(): void;
private _totalTableWidth;
onColumnDragStart(event: any, columnElement: any): void;
onColumnDragEnter(event: any, dropHeader: any): void;
onColumnDragOver(event: any, dropHeader: any): void;
onColumnDragLeave(event: Event): void;
onColumnDragEnd(event: Event): void;
onColumnDrop(event: Event, dropColumn: any): void;
resizeTableCells(newColumnWidth: number, nextColumnWidth: number | null): void;
updateStyleElement(width: number[], colIndex: number, newColumnWidth: number, nextColumnWidth: number | null): void;
onRowDragStart(event: any, index: number): void;
onRowDragOver(event: MouseEvent, index: number, rowElement: any): void;
onRowDragLeave(event: Event, rowElement: any): void;
onRowDragEnd(event: Event): void;
onRowDrop(event: Event, rowElement: any): void;
isEmpty(): boolean;
getVirtualScrollerSpacerStyle(scrollerOptions: any): string;
getBlockableElement(): HTMLElement;
getStorage(): Storage;
isStateful(): boolean;
saveState(): void;
clearState(): void;
restoreState(): void;
saveColumnWidths(state: any): void;
setResizeTableWidth(width: string): void;
restoreColumnWidths(): void;
saveColumnOrder(state: any): void;
restoreColumnOrder(): void;
findColumnByKey(key: any): any;
createStyleElement(): void;
getGroupRowsMeta(): {
field: any;
order: number;
};
destroyStyleElement(): void;
ngAfterViewChecked(): void;
onDestroy(): void;
get dataP(): string;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Table<any>, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Table<any>, "p-table", never, { "frozenColumns": { "alias": "frozenColumns"; "required": false; "isSignal": true; }; "frozenValue": { "alias": "frozenValue"; "required": false; "isSignal": true; }; "tableStyle": { "alias": "tableStyle"; "required": false; "isSignal": true; }; "tableStyleClass": { "alias": "tableStyleClass"; "required": false; "isSignal": true; }; "paginator": { "alias": "paginator"; "required": false; "isSignal": true; }; "pageLinks": { "alias": "pageLinks"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "alwaysShowPaginator": { "alias": "alwaysShowPaginator"; "required": false; "isSignal": true; }; "paginatorPosition": { "alias": "paginatorPosition"; "required": false; "isSignal": true; }; "paginatorStyleClass": { "alias": "paginatorStyleClass"; "required": false; "isSignal": true; }; "paginatorDropdownAppendTo": { "alias": "paginatorDropdownAppendTo"; "required": false; "isSignal": true; }; "paginatorDropdownScrollHeight": { "alias": "paginatorDropdownScrollHeight"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "showJumpToPageDropdown": { "alias": "showJumpToPageDropdown"; "required": false; "isSignal": true; }; "showJumpToPageInput": { "alias": "showJumpToPageInput"; "required": false; "isSignal": true; }; "showFirstLastIcon": { "alias": "showFirstLastIcon"; "required": false; "isSignal": true; }; "showPageLinks": { "alias": "showPageLinks"; "required": false; "isSignal": true; }; "defaultSortOrder": { "alias": "defaultSortOrder"; "required": false; "isSignal": true; }; "sortMode": { "alias": "sortMode"; "required": false; "isSignal": true; }; "resetPageOnSort": { "alias": "resetPageOnSort"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selectionPageOnly": { "alias": "selectionPageOnly"; "required": false; "isSignal": true; }; "contextMenuSelectionInput": { "alias": "contextMenuSelection"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "metaKeySelection": { "alias": "metaKeySelection"; "required": false; "isSignal": true; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; "isSignal": true; }; "rowTrackBy": { "alias": "rowTrackBy"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "lazyLoadOnInit": { "alias": "lazyLoadOnInit"; "required": false; "isSignal": true; }; "compareSelectionBy": { "alias": "compareSelectionBy"; "required": false; "isSignal": true; }; "csvSeparator": { "alias": "csvSeparator"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "filtersInput": { "alias": "filters"; "required": false; "isSignal": true; }; "globalFilterFields": { "alias": "globalFilterFields"; "required": false; "isSignal": true; }; "filterDelay": { "alias": "filterDelay"; "required": false; "isSignal": true; }; "filterLocale": { "alias": "filterLocale"; "required": false; "isSignal": true; }; "expandedRowKeysInput": { "alias": "expandedRowKeys"; "required": false; "isSignal": true; }; "editingRowKeysInput": { "alias": "editingRowKeys"; "required": false; "isSignal": true; }; "rowExpandMode": { "alias": "rowExpandMode"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "rowGroupMode": { "alias": "rowGroupMode"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; "isSignal": true; }; "virtualScrollOptions": { "alias": "virtualScrollOptions"; "required": false; "isSignal": true; }; "virtualScrollDelay": { "alias": "virtualScrollDelay"; "required": false; "isSignal": true; }; "frozenWidth": { "alias": "frozenWidth"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "columnResizeMode": { "alias": "columnResizeMode"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingIcon": { "alias": "loadingIcon"; "required": false; "isSignal": true; }; "showLoader": { "alias": "showLoader"; "required": false; "isSignal": true; }; "rowHover": { "alias": "rowHover"; "required": false; "isSignal": true; }; "customSort": { "alias": "customSort"; "required": false; "isSignal": true; }; "showInitialSortBadge": { "alias": "showInitialSortBadge"; "required": false; "isSignal": true; }; "exportFunction": { "alias": "exportFunction"; "required": false; "isSignal": true; }; "exportHeader": {