Tree Table — Expandable Hierarchy Rows HTML CSS JS

Some data is naturally a hierarchy — a budget by department and sub-team, a file system, a category tree, an org chart of accounts — and a flat table can't show those parent/child relationships. A tree table solves it: rows nest under expandable parents, indented by depth, so you can drill from a top-level total down to its details and collapse what you don't need. This snippet builds that pattern in plain HTML, CSS, and vanilla JavaScript over a real <table>, with any depth of nesting.

Nested data, flattened for rendering

The source is a nested tree of objects, each with optional children. flatten() walks that tree depth-first into a flat list of rows, each tagged with its depth and parent id — because a <table> body is a flat list of <tr>s, not a nested structure. This flatten-with-metadata step is the core technique: it lets you keep your data as a natural hierarchy while rendering it as the linear rows a table requires, and it works for unlimited depth (the demo goes three levels deep).

Visibility derived from ancestor expansion

A child row is visible only when *every* ancestor above it is expanded — collapsing a top-level row should hide its grandchildren too, not just its direct children. isVisible() walks up the parent chain and returns false if any ancestor is collapsed, so the show/hide logic is always correct no matter how deep the nesting or which level you collapse. Expansion state lives in a simple expanded map of id → boolean, the single source of truth that the render reads.

Indentation and disclosure triangles

Each row indents by its depth (via a left-padding rule per depth level) and shows a rotating disclosure triangle that points right when collapsed and down when expanded — the universal tree-control affordance. Leaf rows (no children) get an invisible spacer where the triangle would be, so their text still aligns with siblings that do have triangles. Top-level rows are bold, deeper rows progressively lighter, reinforcing the hierarchy visually beyond just indentation.

Roll-up context per row

Because tree tables usually show aggregates (a parent's budget is the sum of its children's), each row here includes a little spend bar that fills proportionally and turns red past 90% — so you can scan utilization down the hierarchy. In a real app the parent values would be computed from the children (covered in the FAQs); the structure supports either pre-computed or rolled-up totals.

Expand-all / collapse-all

A header button toggles the entire tree open or closed at once — essential for a deep hierarchy where expanding level by level is tedious. It rebuilds the expanded map (all parent ids true, or empty) and re-renders, flipping its own label between "Expand all" and "Collapse all." The tree starts with the top level expanded so the structure is immediately visible without hiding everything.

A real table, kept accessible

It's a genuine semantic <table> with <thead>/<tbody>, so it reads as tabular data to assistive tech and works with table styling. The disclosure triangles are real <button>s. For full accessibility you'd add aria-expanded to each toggle and role="treegrid" semantics (covered in the FAQs), but the foundation — semantic table, flattened render, ancestor-aware visibility — is the right base for any hierarchical table.