TreeTable
Hierarchical rows with aligned value columns: a file tree with sizes, a cost breakdown by service, a dependency graph with versions.
Component behavior
TreeTable renders an indented, expandable first column and aligned data columns. Use it for hierarchical records with shared fields, such as directory sizes or service costs.
- Expandable totals grouped by environment or service.
- Hierarchical files or packages sharing the same data columns.
- Hierarchies small enough to render expanded rows without virtualization.
TreeView: one metadata value per node is sufficient.
Table: the rows are flat and custom cell markup is required.
DataGrid: the view requires sorting, selection, editing, or row virtualization.
JsonViewer: nested nodes do not share a schema.
DescriptionList: the data consists of flat key/value pairs.
Props
T extends TreeTableNode, which contains id, label, optional children, and a string index signature. Declare [key: string]: unknown so columns can access node[key]. IDs must be unique across the tree.
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | T[] | — | Root nodes. Children nest through children?, rendered recursively when their parent is open. |
columns | TreeTableColumn<T>[] | — | Value columns, in order, to the right of the tree column. |
treeHeader | ReactNode | 'Name' | Header for the tree column. The column has a minimum width of 140px. |
defaultExpandedIds | string[] | — | Initially expanded IDs. Read once at mount; later changes are ignored. |
onRowClick | (node: T) => void | — | Called on row selection. Caret clicks toggle expansion without calling this handler. |
| Prop | Type | Default | Description |
|---|---|---|---|
key | string | — | Property read off the node when there is no render. Also the React key for the cell, so keep it unique per column. |
header | ReactNode | — | Header cell content. Rendered uppercase and small. |
width | number | 90 | Column width, in pixels. Only the tree column expands to fill remaining space. |
align | "left" | "right" | — | Right-align numbers; applies to the header cell as well as the body cells. |
render | (node: T) => ReactNode | — | Cell renderer receiving the node. Defaults to String(node[key] ?? an empty string). Objects display as [object Object]. |
Examples
Plain value columns
Without a custom render, columns stringify node[key]. Missing values render as empty cells.
Formatted cells
render receives the node and can format values or return components. Keep numeric data on the node when it must also support application sorting or totals.
Rows that do something
onRowClick fires for row clicks except on the expansion caret, which stops propagation. Selection is application-controlled; the component does not store a selected row.
import { TreeTable } from "@solarius/onset";
import type { TreeTableColumn, TreeTableNode } from "@solarius/onset";
interface CostNode {
id: string;
label: string;
cost: number;
children?: CostNode[];
// Required by TreeTableNode's index signature.
[key: string]: unknown;
}