# Shadcn Expansion blocks

> Expandable parent rows with nested sub-rows and master-detail panels.

- Type: Pro blocks (Data Grid)
- Page: https://web.dev.reui.io/blocks/data-grid/expansion
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/data-grid.md
- Blocks: 3
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- Parent records that open in place to show the child rows or detail cards they hold
- Rolled up totals, such as a cash or budget line, that drill down to the items behind them
- Task and approval queues where each item carries its own sub-tasks or checklist

## When not to use

- Rows bucketed by a shared field value, or a tree nested more than one level deep: use the [Grouping blocks](https://web.dev.reui.io/blocks/data-grid/grouping.md)
- A finished page of flat records where every row stands alone, with nothing nested: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- A table you assemble from the bare parts, where no row opens to reveal more: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)

## Agent notes

- Each page.tsx centers the view in a `min-h-svh` main capped at `max-w-7xl` beside an sr-only `h1`; keep only the view inside your app shell
- `pageSize` counts parent rows only, so open children always stay on their parent's page; page your API by parent and return children with it

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start), used by 3 of 3 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 2 of 3 blocks
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 1 of 3 blocks
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 1 of 3 blocks

## Blocks

- [Sub-Task Tracker](https://web.dev.reui.io/blocks/data-grid/expansion/data-grid-expansion-1.md): Task queue data grid with expandable parent rows that reveal nested sub-tasks inline. Best for checkable sub-task rows in the parent's own columns, with a rule builder filter and All tasks, Active and Backlog tab counts.
- [Cash Flow Waterfall](https://web.dev.reui.io/blocks/data-grid/expansion/data-grid-expansion-2.md): Treasury Waterfall Data Grid with Expandable Lines and Actuals, Plan, Variance Tabs. Best for month columns over a picked range where each parent line sums its children, with plan match rings and an Expand All toggle.
- [Release Approvals](https://web.dev.reui.io/blocks/data-grid/expansion/data-grid-expansion-3.md): Release Review Data Grid with Expandable Rows Revealing a Checklist Card Rail. Best for rows that open onto a rail of up to 3 check cards with ratings and coverage rings, plus approve and escalate status changes.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.