Docs

Docs

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.
The behavior of the scrollToIndex() method in Tree Grid isn’t deterministic due to lazy-loading hierarchical data. It isn’t recommended that you use this method.
Component Usage Recommendation

Grid

Component for showing tabular data.

Grid Pro

Component for showing and editing tabular data.

CRUD

Component for creating, displaying, updating and deleting tabular data.
Important
 You can find more information in the corresponding article on vaadin.com.