Документация древовидных таблиц

Древовидная таблица используется для отображения иерархических данных в табличном формате.

С чего начать

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

import { TreeTableModule } from 'primeng/treetable';
import { TreeNode } from 'primeng/api';

Свойства

Name	Type	Default	Description
value	array	null	An array of objects to display.
columns	array	null	An array of objects to represent dynamic columns.
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.
autoLayout	boolean	false	Whether the cell widths scale according to their content or not.
lazy	boolean	false	Defines if data is loaded and interacted with in lazy manner.
lazyLoadOnInit	boolean	true	Whether to call lazy loading on initialization.
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".
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).
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.
showPageLinks	boolean	true	Whether to show page links.
defaultSortOrder	number	1	Sort order to use when an unsorted column gets sorted by user interaction.
sortMode	string	single	Defines whether sorting works on single column or on multiple columns.
resetPageOnSort	boolean	true	When true, resets paginator to first page after sorting.
customSort	boolean	false	Whether to use the default sorting or a custom one using sortFunction.
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.
sortFunction	function	null	An event emitter to invoke on custom sorting, refer to sorting section for details.
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.
filterMode	string	lenient	Mode for filtering valid values are "lenient" and "strict". Default is lenient.
filterLocale	string	undefined	Locale to use in filtering. The default locale is the host environment's current locale.
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.
dataKey	string	null	A property to uniquely identify a record in data.
metaKeySelection	boolean	true	Defines whether metaKey is should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically.
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.
rowHover	boolean	false	Adds hover effect to rows without the need for selectionMode.
loading	boolean	false	Displays a loader to indicate data load is in progress.
loadingIcon	string	pi pi-spinner	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.
scrollable	boolean	false	When specifies, enables horizontal and/or vertical scrolling.
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.
virtualRowHeight	number	28	Height of a row to use in calculations of virtual scrolling.
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.
frozenWidth	string	null	Width of the frozen columns container.
frozenColumns	array	null	An array of objects to represent dynamic columns that are frozen.
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.
contextMenu	ContextMenu	null	Local ng-template varilable of a ContextMenu.
rowTrackBy	Function	null	Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.

События

Name	Parameters	Description
onNodeExpand	event.originalEvent: Browser event<br>node: Expanded node.	Callback to invoke when a node is expanded.
onNodeCollapse	event.originalEvent: Browser event<br>node: Collapsed node.	Callback to invoke when a node is collapsed.
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.
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.
onNodeSelect	event.originalEvent: Browser event<br>event.nıde: Selected node	Callback to invoke when a node is selected.
onNodeUnselect	event.originalEvent: Browser event<br>event.data: Unselected node	Callback to invoke when a node is unselected.
onContextMenuSelect	event.originalEvent: Browser event<br>event.node: Selected node	Callback to invoke when a node is selected with right click.
onHeaderCheckboxToggle	event.originalEvent: Browser event<br>event.checked: State of the header checkbox	Callback to invoke when state of header checkbox changes.
onEditInit	event.column: Column object of the cell<br>event.data: Node data	Callback to invoke when a cell switches to edit mode.
onEditComplete	event.column: Column object of the cell<br>event.data: Node data	Callback to invoke when cell edit is completed.
onEditCancel	event.column: Column object of the cell<br>event.data: Node data	Callback to invoke when cell edit is cancelled with escape key.

Методы

Name	Parameters	Description
reset	-	Clears the sort and paginator state.

Стилизация

Name	Element
p-treetable	Container element.
p-treetable-caption	Caption element.
p-treetable-summary	Section section.
p-sortable-column	Sortable column header.
p-treetable-scrollable-header	Container of header in a scrollable table.
p-treetable-scrollable-body	Container of body in a scrollable table.
p-treetable-scrollable-footer	Container of footer in a scrollable table.
p-treetable-loading	Loader mask.
p-treetable-loading-content	Loader content.
p-treetable-wrapper	Loader content.
p-treetable-scrollable-wrapper	Loader content.
p-treetable-resizer-helper	Vertical resize indicator bar.
p-treetable-reorder-indicator-top	Top indicator of column reordering.
p-treetable-reorder-indicator-top	Bottom indicator of column reordering.

Tree Basic