Rows that open into child rows. Use it for accounts, folders, or any table whose first column is a tree. A flat sortable grid stays ply-data-table.
Unlock it plus 92 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Put child rows on children. Set expanded when a branch should start open. Arrow right expands, arrow left collapses.
| Account | Owner | Spend |
|---|---|---|
| Engineering | Ada | $84k |
| Platform | Grace | $41k |
| Product | Lin | $22k |
| Design | Mina | $18k |
Selected: Click a row
<ply-tree-table [columns]="columns" [nodes]="nodes" (rowClick)="onRow($event)"></ply-tree-table>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add tree-table
// Paths are relative to aliases.components (default: src/app/components)
import { TreeTableComponent, TreeTableNode } from './tree-table/tree-table.component';
@Component({
selector: 'app-tree-table-example',
imports: [
TreeTableComponent
],
template: `...`
})
export class TreeTableExampleComponent {}Install
npx ply-ui-cli add tree-table
npx ply-ui-cli add tree-table
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add tree-table
// Paths are relative to aliases.components (default: src/app/components)
import { TreeTableComponent, TreeTableNode } from './tree-table/tree-table.component';
@Component({
selector: 'app-your-component',
imports: [
TreeTableComponent
],
template: `...`
})
export class YourComponent {} API for tree-table — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
TreeTableNode | data | T | — | Cell values, keyed by `TableColumn.key`. |
TreeTableNode | children | TreeTableNode<T>[] | — | Nested rows. Absent or empty means a leaf. |
TreeTableNode | expanded | boolean | — | Whether the child rows are visible. |
ply-tree-table | class | string | '' | Extra host classes merged via `cn()`. |
ply-tree-table | columns | TableColumn[] | [] | Column definitions. The first column is the tree column. |
ply-tree-table | nodes | TreeTableNode<T>[] | [] | Root rows. Nested rows live on `children` and show when `expanded` is true. |
ply-tree-table | emptyMessage | string | '' | Replaces the default empty message. |
ply-tree-table | (rowClick) | TreeTableNode<T> | — | Emitted when a row body is activated. The disclosure button does not emit this. |
Content