Org charts, file systems, BOMs, ledger structures—real-world data is rarely flat. Tree-data tables let users expand and collapse rows in place to drill down without losing context.
This tutorial covers tree-data patterns in Angular: parent/child rendering, lazy loading children, and expand-all / collapse-all controls. We compare PrimeNG TreeTable, AG Grid (Enterprise) and Simple Table for Angular.
Note: AG Grid Tree Data is an Enterprise-tier feature ($999+/dev/year). Simple Table for Angular ships tree data free for pre-revenue teams (source-available).
Why it matters
Drill-down without losing context
Users see parent and children in the same surface; no modal or detail-page round-trips.
Compact wide hierarchies
Collapse low-level children; expand specific branches users care about.
Reusable for many domains
Folders, regions, org charts, and chart-of-accounts all share the pattern.
Combinable with sort/filter
Filter the leaves; the right ancestors stay visible to preserve context.
Angular library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Angular | Built-in (Community License) | Hierarchical rows with built-in expand/collapse and chevron renderer. |
| AG Grid Angular | Enterprise only | treeData: true; requires AG Grid Enterprise license. |
| PrimeNG TreeTable | Built-in | <p-treeTable> separate component from <p-table>; different API. |
| ngx-datatable | Manual | No native tree—pre-flatten and render with row templates yourself. |
| Angular Material mat-tree | Native (separate component) | Different component; doesn't integrate with mat-table features. |
Implementation: Simple Table for Angular
Provide hierarchical rows with depth and children information per the docs. Simple Table renders chevrons and handles expand/collapse state for you.
Common pitfalls
Performance on deep trees
Problem: Expanding a node with 10k descendants stalls the UI.
Solution: Lazy-load children on expand, and rely on built-in virtualization.
Filtering hides ancestors
Problem: Searching matches a leaf, but the tree breaks because parents are filtered out.
Solution: Filter while preserving ancestor rows. Simple Table supports this with includeAncestors filter mode.
Expanded state lost on refresh
Problem: Polling refresh closes every expanded branch.
Solution: Hold expanded state keyed by a stable id in a signal and reapply after refetch.
Indent ambiguity
Problem: Multiple columns indent independently; users can't tell where children belong.
Solution: Indent only the tree column (usually the first). Simple Table does this automatically when a column is marked expandable: true.
Frequently asked questions
- Does Simple Table for Angular have a separate TreeTable?
- No—the same SimpleTable component handles flat and hierarchical data. Provide depth and children information per the nested tables docs to render a tree.
- Can I use tree data with column pinning and grouping?
- Yes. Tree data, pinning, virtualization, sorting, and filtering all combine in the same component.
- How do I implement a 'select all descendants' checkbox?
- Use selectableCells="row" and listen for selection events. When the user toggles a parent, propagate to all descendants in your handler.
Wrap-up
Tree data in Angular is straightforward with Simple Table—provide hierarchy on each row and Simple Table handles the rest. AG Grid requires Enterprise; PrimeNG splits it into a separate TreeTable component; mat-table requires mat-tree (a different component).
If you need hierarchical data alongside virtualization and pinning, Simple Table for Angular is the focused source-available pick.