React Tree Table

Copy Page

A plain data table flattens a hierarchy into a list; a tree view keeps the hierarchy but drops the columns. This keeps both — the right shape for anything that is a tree and has numbers on every row: a bundle breakdown, a budget, a file system, an org chart.

Installation

Props

One column carries the tree

Mark a column tree: true and it renders the indentation and the expand/collapse control; every other column is a plain aligned cell. That separation is what lets the same component show a bundle's module tree with right-aligned size and gzip columns, or a budget's line items with a percentage — the hierarchy lives in one column, the metrics in the rest, and they never fight for space.

Rows are flattened on each render from the set of expanded nodes, so state is a single Set of ids rather than a flag per node — cheap, and impossible to get out of sync. Generic over your row type T, with a render per column, so it stays a table of your data, not a fixed schema. Parent rows read slightly heavier than leaves, so the shape of the tree is legible even before you expand anything.