Tree Table API
Import TngTreeTableComponent from @tailng-ui/components. Pass column definitions, a flat-but-hierarchical data array, and key/children accessors.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
columns * | readonly TngTreeTableColumn<TRow>[] | — | Required. Column definitions. Mark one with treeToggle: true to place the indent/toggle in that column; first column is the fallback. |
data | readonly TRow[] | [] | Root-level rows. Children come from getChildren. |
getKey | (row: TRow, indexPath: number[]) => TngTreeTableKey | index path join | Stable identity function. Prefer a property accessor (row => row.id) for reliable expansion and focus tracking. |
getChildren | (row: TRow) => readonly TRow[] | null | undefined | returns undefined | Returns child rows or null/undefined for leaf nodes. |
expandedKeys | readonly TngTreeTableKey[] | [] | Controlled expansion state. Pair with (expandedKeysChange). |
selectedKeys | readonly TngTreeTableKey[] | [] | Controlled selection state. Only meaningful when selectable is true. |
loading | boolean | false | Shows a full-width loading row. Takes priority over the empty state. |
disabled | boolean | false | Disables all interaction on every row. |
selectable | boolean | false | Enables row selection via Space key or programmatically. |
expandOnRowClick | boolean | false | Clicking anywhere on an expandable row also toggles it. |
emptyText | string | 'No records found' | Message shown in the empty-state row. |
loadingText | string | 'Loading...' | Message shown in the loading-state row. |
treeColumnKey | string | null | null | If no column has treeToggle: true, this key selects the tree column by id. The first column is the final fallback. |
indentSize | number | 20 | Pixels of indent per nesting level in the tree column. |
ariaLabel | string | null | 'Tree table' | Accessible label for the table element. |
density | 'comfortable' | 'compact' | 'comfortable' | Controls cell vertical padding. |
dir | 'ltr' | 'rtl' | null | null | Text direction forwarded to the table element. |
Outputs
| Name | Payload | Description |
|---|---|---|
expandedKeysChange | readonly TngTreeTableKey[] | Emitted after expand or collapse. Always a new array — never mutates the input. |
selectedKeysChange | readonly TngTreeTableKey[] | Emitted after a selection toggle. Always a new array. |
rowClick | TngTreeTableRowEvent<TRow> | Emitted when a row is clicked (always, not just on expansion). |
rowExpand | TngTreeTableRowEvent<TRow> | Emitted when a row is expanded. |
rowCollapse | TngTreeTableRowEvent<TRow> | Emitted when a row is collapsed. |
Column definition — TngTreeTableColumn<TRow>
| Property | Type | Description |
|---|---|---|
key | string | Unique column id. Used as a fallback property accessor on the row. |
label | string | Header cell text. |
accessor | keyof TRow | ((row: TRow, index: number) => unknown) | Data accessor. Falls back to row[column.key] when omitted. |
treeToggle | boolean | When true, this column renders the indent spacer, expand/collapse button, and cell text inline. |
align | 'start' | 'center' | 'end' | Cell text alignment. Defaults to 'start'. |
width, minWidth, maxWidth | string | number | null | CSS column width. Numbers are treated as px. |
sticky | 'start' | 'end' | null | Sticky column side (not rendered by default CSS — wire via custom CSS). |
headerClass | TngTreeTableClassInput | Extra classes for the header cell. |
cellClass | TngTreeTableClassInput | ((row: TRow) => TngTreeTableClassInput) | Extra classes for body cells. Use a function for row-driven styling. |
Row event — TngTreeTableRowEvent<TRow>
| Property | Type | Description |
|---|---|---|
row | TRow | The original data row (same reference, not a copy). |
key | TngTreeTableKey | The stable key returned by getKey. |
level | number | Zero-based nesting depth of the row. |
originalEvent | Event | The originating DOM event (click, keydown, etc.). |