React tree grid

A React tree grid for hierarchical data

Show an org chart, a bill of materials or a folder structure as rows you can expand and collapse — with sorting, filtering and totals still working across the levels. Build the hierarchy from the data you already have: a parent key, a path, or rows that hold their children.

Tree data is part of the Enterprise edition (@kanunilabs/datagrid-react-enterprise, or @kanunilabs/datagrid-enterprise without React). You can try it in the live demo before buying.

Open the tree data demo Master-detail and tree data guide

Four ways in, one tree out

Name the field that points to the parent (parentField), compute the parent yourself (getParentKey), give each row its path (getDataPath), or hand over rows that already nest their children (childrenField). The grid builds the same tree from each, so you do not reshape your data for the component.

Large trees, one level at a time

A tree too big to send whole can load each level when it is opened: tell the grid which rows have children (hasChildren) and your server answers for the level asked. The rest of the grid — sorting, filtering, selection — keeps working on what is loaded.

The rest of the grid comes with it

Virtual scrolling, filtering and sorting in a Web Worker, keyboard navigation (Arrow Left and Right collapse and expand a row), screen-reader levels (aria-level, aria-expanded), and the same API in React and plain JavaScript.

A tree from a flat list

import { EnterpriseDataGrid } from '@kanunilabs/datagrid-react-enterprise';

<EnterpriseDataGrid
  licenseKey={key}
  dataSource={employees}      // flat array
  rowKey="id"
  columns={columns}
  tree={{ parentField: 'managerId', defaultExpanded: true }}
/>

Every option: Master-detail and tree data guide.

Questions

Is the tree grid free?
No. Tree data is an Enterprise feature. Grouping rows by a column (one level) is free in the Community edition, and multi-level grouping is Enterprise.
Does it work without React?
Yes. The plain-JavaScript grid (@kanunilabs/datagrid-enterprise) takes the same tree option through createEnterpriseGrid().
Can rows be filtered inside the tree?
Yes. Filtering keeps the ancestors of every matching row so the match stays in context.

Related