Master / detail
View sourceExpand a parent row to mount a detail panel underneath. The panel can render anything — a child grid, a form, a chart — and lives inside the master row's stacking context so pinned lanes stay aligned.
Try this
Click the chevron in the leftmost column to expand a row. Click again to collapse.
- Click the chevron — the row expands and the detail panel mounts.
- Press Right arrow on a row to expand it from the keyboard.
- Scroll the grid — pinned columns and the detail panel scroll together.
- Expand a second row — both stay open until collapsed.
How master / detail works
- renderDetailPanel. The grid auto-injects a chevron column when this prop is set. The function receives
{ row, rowId, rowIndex }— return any React node. - detailPanelHeight. Number for fixed height, or
(params) => numberfor per-row height. Auto-measurement is deferred — pick a number that fits your panel content. - Expansion state. Uncontrolled by default; pass
expansion+onExpansionChangeto control it from outside (e.g. URL state, saved view, parent component). - Composes with pinned columns. The detail panel spans the unpinned + right-pinned lanes; the left-pinned lane keeps its outline column with chevron. Range select still works inside the master rows.
Use cases
- Order header → line items (this demo).
- Customer → recent transactions / contacts / addresses.
- Document → version history.
- Inventory item → stock movements.