TreeTable requires a collection of TreeNode instances as a value and Column components as children for the representation. The column with the element to toggle a node should have expander enabled.

In addition to a regular table, alternatives with alternative sizes are available.

Enabling showGridlines displays grid lines.

Single node selection is configured by setting selectionMode as single along with selectionKeys property to manage the selection value binding.

By default, metaKey press (e.g. ⌘) is necessary to unselect a node however this can be configured with disabling the metaKeySelection property. In touch enabled devices this option has no effect and behavior is same as setting it to false.

More than one node is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is not necessary to add to existing selections. When the optional metaKeySelection is present, behavior is changed in a way that selecting a new node requires meta key to be present. Note that in touch enabled devices, TreeTable always ignores metaKey.

In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.

Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.

In checkbox selection mode, value binding should be a key-value pair where key (or the dataKey) is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node.

TreeTable has full keyboard support. Arrow Up and Down move focus between rows, Arrow Right and Left expand and collapse a node, Space or Enter toggles the selection of the focused row and Shift with Arrow keys extends the range. Pair selectionMode multiple with metaKeySelection for a fully keyboard-driven flow.

TreeTable provides nodeSelect and nodeUnselect events to listen selection events.

Sorting on a column is enabled by adding the sortable property.

Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.

Apply an initial sort on mount using sortField and sortOrder. Headers stay interactive afterwards.

Apply an initial multi-column sort on mount by setting sortMode to multiple together with multiSortMeta. Each header keeps a badge with its sort order and stays interactive afterwards.

When removableSort is present, the third click removes the sorting from the column.

Pagination is enabled by adding paginator property and defining rows per page.

Paginator UI is customized using the paginatorTemplate property. Each element can also be customized further with your own UI to replace the default one, refer to the Paginator component for more information about the advanced customization options.

Pagination is enabled by adding paginator property and defining rows per page.

Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.

Horizontal scrollbar is displayed when table width exceeds the parent width.

Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.

A column can be fixed during horizontal scrolling by enabling the frozen property on a Column. The location is defined with the alignFrozen that can be left or right.

Columns can be resized with drag and drop when resizableColumns is enabled. Default resize mode is fit that does not change the overall table width.

Setting columnResizeMode as expand changes the table width as well.

Columns can be shown, hidden and reordered through a popover that holds a draggable, checkable list of the available columns.

Filtering is enabled by adding a filter template to a Column along with the filters property. The match strategy of a column is configured with filterMatchMode, and a global entry in filters searches across all columns at once. The filterMode defaults to lenient so when a node matches, its descendants are kept without further filtering.

Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering occurs. Sample below imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.

Enabling the lazy property and assigning the logical number of rows to totalRecords by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.

In addition, only the root elements should be loaded, children can be loaded on demand using nodeExpand callback.

The loading property displays a mask overlay with a spinner while data is being fetched. Use the loadingicon slot to customize the overlay content.

Skeleton component can be used as a placeholder during the loading process.

A custom empty state is displayed through the empty slot when the value is an empty array.

Columns can be created programmatically.

Custom content at header and footer slots are supported via templating.

Expansion state is controlled with expandedKeys property. The expandedKeys should be an object whose keys refer to the node key and values represent the expanded state e.g. {'0-0': true}.

TreeTable has exclusive integration with ContextMenu using the contextMenu event to open a menu on right click along with contextMenuSelection property and row-contextmenu event to control the selection via the menu.

Screen Reader

DataTable uses a treegrid element whose attributes can be extended with the tableProps option. This property allows passing aria roles and attributes like aria-label and aria-describedby to define the table for readers. Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer aria-sort attribute either set to "ascending" or "descending".

Row elements manage aria-expanded for state along with aria-posinset, aria-setsize and aria-level attribute to define the hierachy.

When selection is enabled, aria-selected is set to true on a row. In checkbox mode, TreeTable component uses a hidden native checkbox element.

Editable cells use custom templating so you need to manage aria roles and attributes manually if required.

Paginator is a standalone component used inside the DataTable, refer to the paginator for more information about the accessibility features.

Sortable Headers Keyboard Support

Keyboard Support