For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- A finished page of flat records where every row stands alone, with nothing nested: use the Base blocks
- A table you assemble from the bare parts, where no row opens to reveal more: use the Data Grid component
Agent notes
- Each page.tsx centers the view in a
min-h-svhmain capped atmax-w-7xlbeside an sr-onlyh1; keep only the view inside your app shell pageSizecounts 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 API docs
- TanStack Table v9: API reference, docs, used by 3 of 3 blocks
- Sonner v2: API reference, docs, used by 2 of 3 blocks
- date-fns v4: docs, used by 1 of 3 blocks
- React DayPicker v9: API reference, docs, used by 1 of 3 blocks
https://web.dev.reui.io/blocks/data-grid/expansion.mdsearch({ query: "expansion", type: "block", category: "expansion" })Shadcn Data Grid Blocks with Expandable Rows and Master Detail Panels
Expansion is the answer to the grid that wants to be two screens: the row stays where it is and the detail opens beneath it. These blocks cover both shapes, sub-rows for hierarchical data and a rich detail panel for a single record, with the chevron, indentation and focus handling done.
The tree variant carries depth on each row, so styling by level and keyboard navigation across levels work the same on Base UI and on Radix.
All Expansion Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Sub-Task Tracker Task queue data grid with expandable parent rows that reveal nested sub-tasks inline
- Cash Flow Waterfall Treasury Waterfall Data Grid with Expandable Lines and Actuals, Plan, Variance Tabs
- Release Approvals Release Review Data Grid with Expandable Rows Revealing a Checklist Card Rail
What the Expansion blocks cover
Data Grid screens, each a full block with fixture data:
- Task queue data grid with expandable parent rows that reveal nested sub-tasks inline
- Treasury Waterfall Data Grid with Expandable Lines and Actuals, Plan, Variance Tabs
- Release Review Data Grid with Expandable Rows Revealing a Checklist Card Rail
Built from
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Can expanded rows load lazily?
How do I install an Expansion block?
Is a license needed?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.