Table tree
A table tree is an expandable table for showing nested hierarchies of information.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { TableTree } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| rows * | readonly TreeRow[] | — | The top level rows. Each may carry children, which nest to any depth. |
| label * | string | — | Names the tree for assistive technology. Say what the hierarchy is. |
Accessibility
What the component does for you, and what it needs from you.
- The label names the tree, and each row reports whether it is expanded, so the state is announced rather than only drawn.
- Depth is carried in the markup, so a reader knows which level they are on without seeing the indentation.
- A row with no children should not offer a control that does nothing.