Examples
Copy-pasteable tree table examples. Each demo is interactive — click the toggle buttons or press ArrowRight/Left on any row.
Basic tree table
Click the expand button or press ArrowRight on a parent row to reveal children.
Basic tree table
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Liabilities | Group | 4,000 |
| Equity | Group | 9,000 |
Basic tree table (Tailwind)
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Liabilities | Group | 4,000 |
| Equity | Group | 9,000 |
Controlled expanded keys
Drive expansion from outside using a signal. The component never mutates the input array.
Controlled expansion
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Liabilities | Group | 4,000 |
| Equity | Group | 9,000 |
Controlled expansion (Tailwind)
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Liabilities | Group | 4,000 |
| Equity | Group | 9,000 |
Selectable rows
Enable selectable to allow Space-key and programmatic row selection. Selected keys are controlled.
Selectable rows
Selected: none
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Liabilities | Group | 4,000 |
| Equity | Group | 9,000 |
Selectable rows (Tailwind)
Selected: none
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Liabilities | Group | 4,000 |
| Equity | Group | 9,000 |
Loading state
Set loading to show a full-width row. Loading takes priority over the empty state.
Loading state
| Account | Type | Balance |
|---|---|---|
| Fetching accounts… | ||
Loading state (Tailwind)
| Account | Type | Balance |
|---|---|---|
| Fetching accounts… | ||
Empty state
When data is an empty array (and loading is false), the empty row is displayed.
Empty state
| Account | Type | Balance |
|---|---|---|
| No accounts match your filter | ||
Empty state (Tailwind)
| Account | Type | Balance |
|---|---|---|
| No accounts match your filter | ||
Custom tree column
Use treeColumnKey to pick the tree column by id when no column has treeToggle: true. Adjust indentSize for tighter or wider hierarchies.
Custom tree column
| Name | Size | Modified |
|---|---|---|
| src/ | — | Today |
| package.json | 1.8 KB | Last week |
Custom tree column (Tailwind)
| Name | Size | Modified |
|---|---|---|
| src/ | — | Today |
| package.json | 1.8 KB | Last week |
Row class and style
rowStyle paints the row background via a CSS custom property; rowClass adds utility classes driven by the row data or nesting level.
Row class and style
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Cash | Ledger | 3,000 |
| Investments | Ledger | 10,000 |
| Liabilities | Group | -4,000 |
| Bank Loan | Ledger | -4,000 |
| Equity | Group | 9,000 |
Row class and style (Tailwind)
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Cash | Ledger | 3,000 |
| Investments | Ledger | 10,000 |
| Liabilities | Group | -4,000 |
| Bank Loan | Ledger | -4,000 |
| Equity | Group | 9,000 |
Cell class and style
cellClass adds classes to individual body cells; cellStyle applies inline styles. Both are column-level hooks and can be a static value or a per-row function.
Cell class and style
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Cash | Ledger | 3,000 |
| Investments | Ledger | 10,000 |
| Liabilities | Group | -4,000 |
| Bank Loan | Ledger | -4,000 |
| Equity | Group | 9,000 |
Cell class and style (Tailwind)
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Cash | Ledger | 3,000 |
| Investments | Ledger | 10,000 |
| Liabilities | Group | -4,000 |
| Bank Loan | Ledger | -4,000 |
| Equity | Group | 9,000 |
Header class and style
headerClass and headerStyle are column-level hooks for the header th. Use them to visually differentiate columns — emphasis, de-emphasis, or accent colours.
Header class and style
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Liabilities | Group | 4,000 |
| Equity | Group | 9,000 |
Header class and style (Tailwind)
| Account | Type | Balance |
|---|---|---|
| Assets | Group | 13,000 |
| Liabilities | Group | 4,000 |
| Equity | Group | 9,000 |
Group header columns
A group column produces only a spanning header cell; leaf children produce body cells. Hidden leaves are removed, and labels can fall back to their key.
Group header columns
| Account | Financial | |
|---|---|---|
| Type | balance | |
| Assets | Group | 13,000 |
| Liabilities | Group | 4,000 |
| Equity | Group | 9,000 |
Group header columns (Tailwind)
| Account | Financial | |
|---|---|---|
| Type | balance | |
| Assets | Group | 13,000 |
| Liabilities | Group | 4,000 |
| Equity | Group | 9,000 |
Cell templates
Use ng-template[tngTreeTableCellTemplate] to render any Angular content in a column — badges, icon buttons, links, or any component. The template receives the full row, flatRow (level, expanded, expandable), and the column's accessor value.
Cell templates
| Account | Status | Balance | Actions |
|---|---|---|---|
| Assets | active | 13,000 | |
| Cash | active | 3,000 | |
| Investments | review | 10,000 | |
| Liabilities | review | -4,000 | |
| Bank Loan | active | -4,000 | |
| Equity | active | 9,000 |
Cell templates (Tailwind)
| Account | Status | Balance | Actions |
|---|---|---|---|
| Assets | active | 13,000 | |
| Cash | active | 3,000 | |
| Investments | review | 10,000 | |
| Liabilities | review | -4,000 | |
| Bank Loan | active | -4,000 | |
| Equity | active | 9,000 |