Tree table
A hierarchical treegrid with expandable rows, indent guides, parent aggregates, spent-of-budget progress bars with over-budget flags, expand and collapse all, per-level sorting and a selected row.
Preview
10 of 16 rows shown
Engineering2 | $90,000 | $81,150 | 5 |
Platform3 | $66,000 | $58,750 | 3 |
Cloud hosting | $48,000 | $41,200 | 1 |
Observability, selected | $12,000 | +14% over budget$13,650 | 1 |
Build minutes | $6,000 | $3,900 | 1 |
Product teams2 | $24,000 | $22,400 | 2 |
Design2 | $21,200 | $16,000 | 2 |
Operations2 | $51,000 | $22,100 | 3 |
People2 | $40,000 | $9,600 | 2 |
Legal review | $11,000 | +14% over budget$12,500 | 1 |
| Total | $162,200 | $119,250 | 10 |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { id: string; name: string; values?: Record<string, number>; children?: TreeRow[] }[] | — | Rows; leaves carry values, parents aggregate them. |
| columns | { key: string; label: string; aggregate?: "sum" | "count" | "max"; format?; bar?: boolean; barOf?: string }[] | — | Value columns. barOf draws progress against another column of the same row (e.g. spent ÷ budget, over 100% tinted danger with a +N% chip); bar draws share of the largest sibling. |
| nameLabel | string | "Name" | Header of the tree column. |
| defaultExpanded | string[] | "all" | [] | Rows open on first render. |
| selected | string | null | — | Controlled selected row id. |
| defaultSelected | string | null | null | Uncontrolled selected row. |
| onSelectedChange | (id: string) => void | — | Called on click, Enter or Space. |
| defaultSort | { key: string; dir: "asc" | "desc" } | null | null | Initial sort; "name" sorts the tree column. |
| label | string | "Tree table" | Accessible name of the treegrid. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.