Tree Grid
Tree Grid is a component for displaying hierarchical tabular data grouped into expandable and collapsible nodes.
Tree Grid is an extension of the Grid component. All of Grid’s features are available in Tree Grid. It isn’t meant, though, to be used as a navigation menu.
const dataProvider = useCallback(
async (
params: GridDataProviderParams<Person>,
callback: GridDataProviderCallback<Person>
) => {
const pagedPeople = usePagedPeople({
count: params.pageSize,
startIndex: params.page * params.pageSize,
managerId: params.parentItem ? params.parentItem.id : null,
});
return callback(pagedPeople.people, pagedPeople.hierarchyLevelSize);
},
[]
);
return (
<Grid itemHasChildrenPath="manager" dataProvider={dataProvider}>
<GridTreeColumn path="firstName" />
<GridColumn path="lastName" />
<GridColumn path="email" />
</Grid>
);
Tree Column
The tree column is a column that contains the toggles for expanding and collapsing nodes. Nodes are opened and closed by clicking a tree column’s cell. They can also be toggled programmatically.
Caution
|
scrollToIndex() isn’t reliable.scrollToIndex() method in Tree Grid isn’t deterministic due to lazy-loading hierarchical data. It isn’t recommended that you use this method.
|
Related Components
Component | Usage Recommendation |
---|---|
Component for showing tabular data. | |
Component for showing and editing tabular data. | |
Component for creating, displaying, updating and deleting tabular data. |
Important
| You can find more information in the corresponding article on vaadin.com. |