Tree Table
Hierarchical cost center table with expand chevrons, indented child rows, and rolled-up budget totals per parent.
Hierarchical cost center table with expand chevrons, indented child rows, and rolled-up budget totals per parent.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Tree Table is the FY 2026 cost center view, four top-level rows each with a rolled-up Budget, Spent, and Remaining, and one parent statically expanded to reveal its three children indented beneath it. Engineering is the open node, showing Platform owned by Jordan Lee, Product Engineering by Marcus Kim, and Infrastructure by Priya Nair, each with its own budget slice.
Cost centers are one typed array with an optional children field. The expand chevron rotates 90 degrees on the open row and carries aria-expanded, so the blueprint communicates the interaction without any client state.
Reach for this block wherever data has a natural parent-child shape: org hierarchies, nested account categories, folder structures, or any rolled-up totals that users need to drill into. Wire the chevron click to a toggled expanded set in your state layer.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the departmental budget breakdown. Other tree tables:
Tip: parent totals must visually outrank child rows; font-medium on the parent and muted children is the minimum signal that keeps the hierarchy legible.