Tree Table overview

tng-tree-table renders hierarchical rows inside a native role="treegrid" table. It is separate from tng-table (flat rows) and tng-tree (navigation tree), sharing ideas from both without coupling either. The component is signal-first and fully controlled: you own expandedKeys and selectedKeys.

Key concepts

• Flat data, tree shape. You pass flat typed data to data and provide getChildren and getKey accessors — the component flattens the tree into visible rows on each change.
• Fully controlled expansion. Bind [expandedKeys] and react to (expandedKeysChange). The component never mutates the input array.
• Tree toggle column. Mark one column with treeToggle: true; it receives the indent spacer, expand/collapse button, and cell text. If none is marked, the first column is used.
• Keyboard navigation. ArrowRight expands, ArrowLeft collapses, Enter toggles, Space selects (when selectable), Home/End move focus.
• Treegrid accessibility. The table renders role="treegrid" with aria-level, aria-expanded, aria-selected, and aria-disabled on every row.

Accessibility baseline

• Always provide ariaLabel so screen readers can announce the treegrid purpose.
• Use meaningful column labels — they are announced when focus enters a header cell.
• Keep each getKey value stable across renders so focus is preserved after expand/collapse.