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
- Records bucketed under collapsible group rows by stage, region or risk band, with a count or subtotal on each
- Parent and child hierarchies of any depth, such as a bill of materials or an org chart, rolled up per level
- Stage pipelines laid out as stacked sections, each its own table that repeats the column header row
When not to use
- Group rows built from the bare parts in your own page, with no toolbar or demo records: use the Data Grid component
- A flat record list paged at the foot, with no heading rows between records: use the Base blocks
- Each record opening in place onto its own sub-tasks or a rail of check cards: use the Expansion blocks
Agent notes
- Each page.tsx wraps the view in a
min-h-svhmain under an sr-onlyh1, and the view adds a paddedmax-w-7xlsection; drop both inside an app shell - Search and filters run in the browser over every demo row, and
manualPaginationleaves the rows unsliced with no pager; move both to your API at scale - Create, open and export buttons change no data and only raise a sonner
toast; point them at your own routes and API
Third-party API docs
- TanStack Table v9: API reference, docs, used by 7 of 7 blocks
- Sonner v2: API reference, docs, used by 7 of 7 blocks
Markdown
https://web.dev.reui.io/blocks/data-grid/grouping.mdMCP
search({ query: "grouping", type: "block", category: "grouping" })Shadcn Data Grid Blocks with Grouped Rows and Banded Sections
Grouping turns a long list into sections a reader can skim: tasks by stage, accounts by region, intake signals by hold risk. These blocks show group headers with a count or a rollup, groups that collapse in the row and tree blocks, and selection that takes a whole group at once in the org tree and the delivery board.
Sorting inside a group and across groups are both covered, because the two are different questions and products need both.
All Grouping Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Roadmap by Stage Roadmap Queue Data Grid Grouped by Stage with Collapsible Category Rows
- Revenue by Region Account revenue grouped by region with collapsible rows and ARR subtotals
- Patient Access Cohorts Patient access cohort DataGrid with switchable grouping and outcome heatmap
- Bill of Materials Bill Of Materials Tree Grid With Rolled-Up Cost And Supply Risk
- Reporting Hierarchy Reporting Hierarchy Tree Grid With Span Of Control And Cascading Selection
- Editorial Pipeline Editorial Production Desk With Per Section Tables And Repeated Headers
- Studio Delivery Board Delivery Board With Per Stage Column Headers And Segmented Completion Meters
What the Grouping blocks cover
Data Grid screens, each a full block with fixture data:
- Roadmap Queue Data Grid Grouped by Stage with Collapsible Category Rows
- Account revenue grouped by region with collapsible rows and ARR subtotals
- Patient access cohort DataGrid with switchable grouping and outcome heatmap
- Bill Of Materials Tree Grid With Rolled-Up Cost And Supply Risk
- Reporting Hierarchy Tree Grid With Span Of Control And Cascading Selection
- Editorial Production Desk With Per Section Tables And Repeated Headers
- Delivery Board With Per Stage Column Headers And Segmented Completion Meters
Built from
- shadcn/ui components Button, Field, Input Group, Select, Dropdown Menu, Popover, the same components your project already owns.
- Both twins, every style Each block ships on Base UI and on Radix, in 8 design styles, and names every part it composes on its page.
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 I group by more than one column?
Yes, by adding TanStack's column grouping to the ReUI Data Grid, which groups by a list of columns. As shipped, the group row and section blocks bucket rows by one field at a time, the patient access cohort and editorial blocks switch that field from a control, and the bill of materials and org chart blocks nest rows to any depth.
How do I install a Grouping block?
Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.
Is a license needed?
Grouping blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.