Data

TreeTable

Hierarchical table (treegrid): rows nest via children, the first column indents by depth and carries an expand/collapse toggle.

Import

import { TreeTable } from "@zephora/react";

Examples

Basic

Name	Kind	Size
src	Folder	44 KB
components	Folder	31 KB
index.ts	File	1 KB
LICENSE	File	2 KB

const columns: TreeTableColumn[] = [
  { key: "name", header: "Name" },
  { key: "kind", header: "Kind", width: 120 },
  { key: "size", header: "Size", align: "end", width: 100 },
];

const data: TreeTableRow[] = [
  {
    key: "src",
    cells: { name: "src", kind: "Folder", size: "44 KB" },
    children: [
      {
        key: "components",
        cells: { name: "components", kind: "Folder", size: "31 KB" },
        children: [
          { key: "button", cells: { name: "Button.tsx", kind: "File", size: "12 KB" } },
        ],
      },
    ],
  },
];

<TreeTable columns={columns} data={data} defaultExpandedKeys={["src"]} />

Controlled expansion

Drive `expandedKeys` yourself to build expand-all / collapse-all actions.

Name	Kind	Size
src	Folder	44 KB
LICENSE	File	2 KB

const [expanded, setExpanded] = React.useState<string[]>([]);

<Button size="sm" onClick={() => setExpanded(["src", "components"])}>Expand all</Button>
<Button size="sm" variant="outline" onClick={() => setExpanded([])}>Collapse all</Button>
<TreeTable
  columns={columns}
  data={data}
  expandedKeys={expanded}
  onExpandedChange={setExpanded}
/>

API

TreeTable props

Prop	Type	Default	Description
`columns` *	`TreeTableColumn[]`	—	Column definitions.
`data` *	`TreeTableRow[]`	—	Root rows; nesting comes from each row's `children`.
`expandedKeys`	`string[]`	—	Controlled expanded row keys.
`defaultExpandedKeys`	`string[]`	`[]`	Uncontrolled initial expanded row keys.
`onExpandedChange`	`(keys: string[]) => void`	—	Fires with the full set of expanded keys.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

TreeTableColumn props

Prop	Type	Default	Description
`key` *	`string`	—	Unique column id, matched against `row.cells`.
`header` *	`ReactNode`	—	Header cell content.
`width`	`number \| string`	—	Fixed column inline-size.
`align`	`"start" \| "center" \| "end"`	—	Cell text alignment.

TreeTableRow props

Prop	Type	Default	Description
`key` *	`string`	—	Unique row key.
`cells` *	`Record<string, ReactNode>`	—	Cell content per column key.
`children`	`TreeTableRow[]`	—	Nested rows; presence adds the expand/collapse toggle.