Expanding Row Model

Demonstrates getExpandedRowModel with tree data. Uses getSubRows to define hierarchy and expanded state to control which rows are visible.

Visible rows: 5
DepartmentHeadcountBudget
Engineering45$5,200,000
Product12$1,500,000
Design8$900,000
HR6$500,000
Finance5$450,000
Expanded State:
{}
Row Model Info:
Total visible rows: 5
Expandable rows: 3
Leaf rows: 2
Max depth: 0

Code

const [expanded, setExpanded] = useState<ExpandedState>({});

const table = useGridTable({
  data: treeData,
  columns,
  getSubRows: (row) => row.children,
  getExpandedRowModel: getExpandedRowModel(),
  state: { ..., expanded },
  onExpandedChange: setExpanded,
});

const model = table.getExpandedRowModel();
// model.rows → flat array of visible rows (with depth, subRows, etc.)

// Per-row API:
// row.depth        → nesting level (0 = root)
// row.subRows      → child Row objects
// row.getCanExpand() → has children?
// row.getIsExpanded() → currently expanded?
// row.toggleExpanded() → toggle expand/collapse
// row.getLeafRows()   → all leaf descendants

Table API Code

const [expanded, setExpanded] = useState<ExpandedState>({});

const table = useReactTable({
  data: treeData,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getSubRows: (row) => row.children,
  state: { expanded },
  onExpandedChange: setExpanded,
});

const model = table.getExpandedRowModel();
// model.rows -> visible rows with depth info

// Expand/collapse controls:
table.toggleAllRowsExpanded(); // expand or collapse all
row.toggleExpanded(); // toggle a single row
table.resetExpanded(); // reset to initial state