Документация таблиц

Таблица отображает данные в табличном формате.

С чего начать

Подключите модуль

import { TableModule } from 'primeng-lts/table';

Шаблоны

Name	Parameters	Description
caption	-	Caption content of the table.
header	$implicit: Columns	Content of the thead element.
headergrouped	$implicit: Columns	Content of the thead element.
body	$implicit: Data of the row<br>rowIndex: Index of the row<br>columns: Columns collection<br>expanded: Whether the row is expanded<br>rowgroup: Wheter the row is rowgroup<br>rowspan: Row span of the rowgroup	Content of the tbody element.
footer	$implicit: Columns	Content of the tfoot element.
footergrouped	$implicit: Columns	Content of the tfoot element.
summary	-	Summary section to display below the table.
rowexpansion	$implicit: Data of the row<br>rowIndex: Index of the row<br>columns: Columns collection<br>	Content of an extended row.
frozenrows	$implicit: Data of the row<br>rowIndex: Index of the row<br>columns: Columns collection<br>	Content of the tbody element to display frozen rows.
frozenbody	$implicit: Data of the row<br>rowIndex: Index of the row<br>columns: Columns collection<br>	Content of the tbody element in frozen side.
frozenrowexpansion	$implicit: Data of the row<br>rowIndex: Index of the row<br>columns: Columns collection<br>	Content of an extended row in frozen side.
groupheader	$implicit: Data of the row<br>rowIndex: Index of the row<br>columns: Columns collection<br>	Header of the grouped rows.
groupfooter	$implicit: Data of the row<br>rowIndex: Index of the row<br>columns: Columns collection<br>	Footer of the grouped rows.
emptymessage	$implicit: Columns<br>frozen: Whether the body belongs to the frozen part of the table.	Content to display when there is no value to display.
paginatorleft	state: $implicit state.page: Current page<br>state.pageCount: Total page count<br>state.rows: Rows per page<br>state.first: Index of the first records<br>state.totalRecords: Number of total records<br>	Custom content for the left section of the paginator.
paginatorright	state: $implicit state.page: Current page<br>state.pageCount: Total page count<br>state.rows: Rows per page<br>state.first: Index of the first records<br>state.totalRecords: Number of total records<br>	Custom content for the right section of the paginator.
loadingbody	columns: Columns collection<br>	Content of the tbody element to show when data is being loaded in virtual scroll mode.

Свойства ColumnFilter

Name	Type	Default	Description
field	string	null	Name of the property of the data to filter.
type	string	text	Data type to display a suitable filter and matchers.
display	string	row	Display mode, valid values are "row" for a separate row and "menu" for filter menu.
showMenu	boolean	true	Whether to show the overlay menu.
matchMode	string	null	Default match mode.
operator	string	and	Default operator, valid values are "and" and "or".
showOperator	boolean	true	Specifies if the operator selection is displayed.
showClearButton	boolean	true	Whether to display the clear button.
showApplyButton	boolean	true	Whether to display the apply button.
showMatchModes	boolean	true	Whether to display the match modes dropdown.
showAddButton	boolean	true	Whether to display the add a rule button.
hideOnClear	boolean	false	Whether to hide the overlay on clear.
placeholder	string	null	Advisory information to display on input.
matchModeOptions	SelectItem[]	null	Match mode options to override the global setting.
maxConstraints	number	2	Number of maximum constraints.
minFractionDigits	number	null	The minimum number of fraction digits to use for "numeric" type. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO (opens in a new tab) 4217 currency code list</a> (2 if the list doesn't provide that information).
maxFractionDigits	number	null	The maximum number of fraction digits to use for "numeric" type. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO (opens in a new tab) 4217 currency code list</a> (2 if the list doesn't provide that information).
prefix	string	null	Text to display before the value for "numeric" type.
suffix	string	decimal	Text to display after the value for "numeric" type.
locale	string	null	Locale to be used in formatting for "numeric" type.
localeMatcher	string	best fit	The locale matching algorithm for "numeric" type. Possible values are "lookup" and "best fit"; the default is "best fit". See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation">Locale (opens in a new tab) Negotation</a> for details.
currency	string	null	The currency to use in currency formatting for "numeric" type. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO (opens in a new tab) 4217 currency codes</a>, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
currencyDisplay	string	symbol	How to display the currency in currency formatting for "numeric" type. Possible values are "symbol" to use a localized currency symbol such as €, ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol".
useGrouping	boolean	true	Whether to use grouping separators for "numeric" type, such as thousands separators or thousand/lakh/crore separators.

Шаблоны ColumnFilter

Name	Parameters
header	-
filter	$implicit: filter value<br>filterCallback: Callback function of the filter
footer	-

Свойства TableCheckbox

Name	Type	Default	Description
value	any	null	Row data value of the component.
index	number	null	Index of the row.
disabled	boolean	false	Whether the component is disabled.
inputId	string	null	Identifier of the checkbox.
name	string	null	Name of the checkbox.
required	boolean	false	When present, it specifies that checkbox must be checked before submitting the form.
ariaLabel	string	null	Defines a string that labels the checkbox for accessibility.

Свойства TableHeaderCheckbox

Name	Type	Default	Description
disabled	boolean	false	Whether the component is disabled.
inputId	string	null	Identifier of the checkbox.
name	string	null	Name of the checkbox.
ariaLabel	string	null	Defines a string that labels the checkbox for accessibility.

Свойства TableRadioButton

Name	Type	Default	Description
value	any	null	Row data value of the component.
index	number	null	Index of the row.
disabled	boolean	false	Whether the component is disabled.
inputId	string	null	Identifier of the radiobutton.
name	string	null	Name of the radiobutton.
ariaLabel	string	null	Defines a string that labels the element for accessibility.

Свойства

Name	Type	Default	Description
value	array	null	An array of objects to display.
columns	array	null	An array of objects to represent dynamic columns.
frozenColumns	array	null	An array of objects to represent dynamic columns that are frozen.
frozenValue	array	null	An array of objects to display as frozen.
responsiveLayout	string	stack	Defines the responsive mode, valid options are "stack" and "scroll".
breakpoint	string	960px	The breakpoint to define the maximum width boundary when using stack responsive layout.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
tableStyle	any	null	Inline style of the table.
tableStyleClass	string	null	Style class of the table.
paginator	boolean	false	When specified as true, enables the pagination.
rows	number	null	Number of rows to display per page.
first	number	0	Index of the first row to be displayed.
totalRecords	number	null	Number of total records, defaults to length of value when not defined.
pageLinks	number	null	Number of page links to display in paginator.
rowsPerPageOptions	array	null	Array of integer/object values to display inside rows per page dropdown of paginator
alwaysShowPaginator	boolean	true	Whether to show it even there is only one page.
showFirstLastIcon	boolean	true	When enabled, icons are displayed on paginator to go first and last page.
paginatorPosition	string	bottom	Position of the paginator, options are "top", "bottom" or "both".
currentPageReportTemplate	string	(currentPage of totalPages)	Template of the current page report element. Available placeholders are currentPage,totalPages,rows,first,last and totalRecords
showCurrentPageReport	boolean	false	Whether to display current page report.
showJumpToPageDropdown	boolean	false	Whether to display a dropdown to navigate to any page.
showJumpToPageInput	boolean	false	Whether to display a input to navigate to any page.
showPageLinks	boolean	true	Whether to show page links.
sortMode	string	single	Defines whether sorting works on single column or on multiple columns.
sortField	string	null	Name of the field to sort data by default.
sortOrder	number	1	Order to sort when default sorting is enabled.
multiSortMeta	array	null	An array of SortMeta objects to sort the data by default in multiple sort mode.
rowGroupMode	string	null	Type of the row grouping, valid values are "subheader" and "rowspan".
groupRowsBy	string\|array	null	One or more field names to use in row grouping.
groupRowsByOrder	number	1	Order to sort when default row grouping is enabled.
defaultSortOrder	number	1	Sort order to use when an unsorted column gets sorted by user interaction.
customSort	boolean	false	Whether to use the default sorting or a custom one using sortFunction.
showInitialSortBadge	boolean	true	Whether to use the initial sort badge or not.
sortFunction	function	null	A function to implement custom sorting, refer to sorting section for details.
selectionMode	string	null	Specifies the selection mode, valid values are "single" and "multiple".
selection	any	null	Selected row in single mode or an array of values in multiple mode.
contextMenuSelection	any	null	Selected row with a context menu.
contextMenuSelectionMode	string	separate	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.
dataKey	string	null	A property to uniquely identify a record in data.
metaKeySelection	boolean	true	Defines whether metaKey should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically.
rowTrackBy	Function	null	Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.
lazy	boolean	false	Defines if data is loaded and interacted with in lazy manner.
lazyLoadOnInit	boolean	true	Whether to call lazy loading on initialization.
compareSelectionBy	string	deepEquals	Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields.
csvSeparator	string	,	Character to use as the csv separator.
exportFilename	string	download	Name of the exported file.
filters	array	null	An array of FilterMetadata objects to provide external filters.
filterDelay	number	300	Delay in milliseconds before filtering the data.
globalFilterFields	array	null	An array of fields as string to use in global filtering.
filterLocale	string	undefined	Locale to use in filtering. The default locale is the host environment's current locale.
expandedRowKeys	[s: string]: boolean;	null	Map instance to keep the expanded rows where key of the map is the data key of the row.
rowExpandMode	string	multiple	Whether multiple rows can be expanded at any time. Valid values are "multiple" and "single".
scrollable	boolean	false	When specifies, enables horizontal and/or vertical scrolling.
scrollDirection	string	vertical	Orientation of the scrolling, options are "vertical", "horizontal" and "both".
scrollHeight	string	null	Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
virtualScroll	boolean	false	Whether the data should be loaded on demand during scroll.
virtualScrollDelay	number	250	Threshold in milliseconds to delay lazy loading during scrolling.
virtualRowHeight	number	28	Height of a row to use in calculations of virtual scrolling.
contextMenu	ContextMenu	null	Local ng-template varilable of a ContextMenu.
resizableColumns	boolean	false	When enabled, columns can be resized using drag and drop.
columnResizeMode	string	fit	Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
reorderableColumns	boolean	false	When enabled, columns can be reordered using drag and drop.
loading	boolean	false	Displays a loader to indicate data load is in progress.
loadingIcon	string	pi-circle-o-notch	The icon to show while indicating data load is in progress.
showLoader	boolean	true	Whether to show the loading mask when loading property is true.
rowHover	boolean	false	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.
paginatorDropdownAppendTo	any	null	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).
paginatorDropdownScrollHeight	string	200px	Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
autoLayout	boolean	false	Whether the cell widths scale according to their content or not.
resetPageOnSort	boolean	true	When true, resets paginator to first page after sorting. Available only when sortMode is set to single.
exportFunction	function	null	A function to implement custom export. Need to return string value.<br>event.data: Field data.<br>event.field: Column field.
stateKey	string	null	Unique identifier of a stateful table to use in state storage.
stateStorage	string	session	Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
editMode	string	cell	Defines the editing mode, valid values are "cell" and "row".
editingRowKeys	[s: string]: boolean;	null	Map instance to keep the rows being edited where key of the map is the data key of the row.
minBufferPx	number	null	Minimum amount of content buffer (in pixels) that the viewport must render.
maxBufferPx	number	null	Configures how much buffer space to render back up to when it detects that more buffer is required.

События

Name	Parameters	Description
onRowSelect	event.originalEvent: Browser event<br>event.data: Selected row data or an array if a range is selected with shift key<br>event.type: Type of selection, valid values are "row", "radiobutton" and "checkbox"<br>event.index: Index of the row	Callback to invoke when a row is selected.
onRowUnselect	event.originalEvent: Browser event<br>event.data: Unselected data<br>event.type: Type of unselection, valid values are "row" and "checkbox"<br>event.index: Index of the row	Callback to invoke when a row is unselected.
onPage	event.first: Index of first record in page<br>event.rows: Number of rows on the page	Callback to invoke when pagination occurs.
onSort	event.field: Field name of the sorted column<br>event.order: Sort order as 1 or -1<br>event.multisortmeta: Sort metadata in multi sort mode. See multiple sorting section for the structure of this object.	Callback to invoke when a column gets sorted.
onFilter	event.filters: Filters object having a field as the property key and an object with value, matchMode as the property value.<br>event.filteredValue: Filtered data after running the filtering.	Callback to invoke when data is filtered.
onLazyLoad	event.first = First row offset<br>event.rows = Number of rows per page<br>event.sortField = Field name to sort with<br>event.sortOrder = Sort order as number, 1 for asc and -1 for dec<br>event.multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties.<br>event.filters: FilterMetadata object having field as key and filter value, filter matchMode as value<br>event.globalFilter: Value of the global filter if available	Callback to invoke when paging, sorting or filtering happens in lazy mode.
onRowExpand	event.originalEvent: Browser event<br>data: Row data to expand.	Callback to invoke when a row is expanded.
onRowCollapse	event.originalEvent: Browser event<br>data: Row data to collapse.	Callback to invoke when a row is collapsed.
onContextMenuSelect	event.originalEvent: Browser event<br>event.data: Selected data	Callback to invoke when a row is selected with right click.
onColResize	event.element: Resized column header<br>event.delta: Change of width in number of pixels	Callback to invoke when a column is resized.
onColReorder	event.dragIndex: Index of the dragged column<br>event.dropIndex: Index of the dropped column<br>event.columns: Columns array after reorder	Callback to invoke when a column is reordered.
onRowReorder	event.dragIndex: Index of the dragged row<br>event.dropIndex: Index of the drop location	Callback to invoke when a row is reordered.
onEditInit	event.field: Column object of the cell<br>event.data: Row data	Callback to invoke when a cell switches to edit mode.
onEditComplete	event.field: Column object of the cell<br>event.data: Row data<br>event.originalEvent: Browser event	Callback to invoke when cell edit is completed.
onEditCancel	event.field: Column object of the cell<br>event.data: Row data<br>event.originalEvent: Browser event	Callback to invoke when cell edit is cancelled with escape key.
onHeaderCheckboxToggle	event.originalEvent: Browser event<br>event.checked: State of the header checkbox	Callback to invoke when state of header checkbox changes.
onStateSave	state: Table state	Callback to invoke table state is saved.
onStateRestore	state: Table state	Callback to invoke table state is restored.

Методы

Name	Parameters	Description
reset	-	Resets sort, filter and paginator state.
clearState	-	Clears table state.
exportCSV	config?.selectionOnly: Exports only the selection.	Exports the data in csv format.
resetScrollTop	-	Resets the scrollable table scroll position to the beginning.
scrollToVirtualIndex	index	Scrolls to the row with the given index when virtual scrolling is enabled.
scrollTo	options.left: Specifies the number of pixels along the X axis<br>options.top: Specifies the number of pixels along the Y axis<br>options.behavior: Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto).	Scrolls to a position of a scrollable table viewport.

Стилизация

Name	Element
p-datatable	Container element.
p-datatable-header	Header section.
p-datatable-footer	Footer section.
p-sortable-column	Sortable column header.
p-editable-column	Editable column cell.
p-datatable-thead	Thead element of header columns.
p-datatable-tbody	Tbody element of body rows.
p-datatable-tfoot	Tfoot element of footer columns.
p-datatable-scrollable	Container element when scrolling is enabled.
p-datatable-scrollable-frozen	Container element of a frozen view.
p-datatable-scrollable-header	Container of header in a scrollable table.
p-datatable-scrollable-body	Container of body in a scrollable table.
p-datatable-scrollable-footer	Container of footer in a scrollable table.
p-datatable-resizable	Container element when column resizing is enabled.
p-datatable-resizable-fit	Container element when column resizing is enabled and set to fit mode.
p-column-resizer-helper	Vertical resizer indicator bar.
p-datatable-reorderablerow-handle	Handle element of a reorderable row.
p-datatable-reorder-indicator-up	Up indicator to display during column reordering.
p-datatable-reorder-indicator-up	Down indicator to display during column reordering.
p-datatable-loading-overlay	Overlay to display when table is loading.
p-datatable-loading-icon	Icon to display when table is loading.

Splitter Basic