bc-grid
GitHub

Tree row model

View source

Render hierarchical parent-child data with stable identities. Click the chevron on the outline column to expand or collapse a subtree; arrow keys navigate the tree the same way they navigate flat rows.

Name
Kind
Size
Modified
Accounts receivable
folder
2026-04-29
Customers
folder
2026-04-29
Invoices
folder
2026-04-30
Inventory
folder
2026-04-26
Stock counts
folder
2026-04-26
Shipments
folder
2026-04-25

Try this

The Name column is the outline column — chevrons + indent live there.

  • Click the chevron on a folder row to drill in.
  • Press Right on a folder to expand, Left to collapse.
  • Sort by Modified — sort runs per subtree; folders stay with their children.
  • Add a filter for Kind=file — folders that have no descendant matches drop out (keepAncestors stays opt-in).

Tree vs grouping

  • Use groupingwhen rows are flat and you want to bucket them by a shared key (region, status, sales rep). Group rows are synthetic; the data doesn't describe a tree.
  • Use tree when each row has a stable identity and a real parent (folders, org charts, categories with subcategories, project tasks with subtasks).

API

  • treeData.getRowParentId. Return the parent rowId or null for roots. Cycles are detected and broken automatically with a console error.
  • outline column. Set outline: true on the column that should host the chevron + indent. The first outline column wins.
  • Expansion state. Same expansion / defaultExpansion / onExpansionChange controlled-state shape as master-detail.
  • Server tree. For lazy-load-children scenarios with millions of rows, use <BcServerGrid rowModel="tree"> instead — see the "Server-side tree" page.