Quick start - tree grid

Strata renders parent/child hierarchies. Use the treeData prop and mark one column as the tree column with isTreeColumn.

Nested data (getChildren)

When rows already contain a children array, supply getChildren:

<DataGrid
  data={files}
  columns={columns}
  treeData={{
    getRowId: (row) => row.id,
    getChildren: (row) => row.children,
  }}
  defaultExpanded
/>;

Name

Kind

Size

7 rows

Flat parent-pointer data (getParentId)

For flat rows that reference a parent by id, supply getParentId instead:

<DataGrid
  data={rows}
  columns={columns}
  treeData={{
    getRowId: (row) => row.id,
    getParentId: (row) => row.parentId,
  }}
  defaultExpanded
/>;

Name

Kind

6 rows