# Shadcn Grouping blocks

> Rows grouped into banded sections with stage and category headers.

- Type: Pro blocks (Data Grid)
- Page: https://web.dev.reui.io/blocks/data-grid/grouping
- 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: 7
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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 [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- A flat record list paged at the foot, with no heading rows between records: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- Each record opening in place onto its own sub-tasks or a rail of check cards: use the [Expansion blocks](https://web.dev.reui.io/blocks/data-grid/expansion.md)

## Agent notes

- Each page.tsx wraps the view in a `min-h-svh` main under an sr-only `h1`, and the view adds a padded `max-w-7xl` section; drop both inside an app shell
- Search and filters run in the browser over every demo row, and `manualPagination` leaves 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 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 7 of 7 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 7 of 7 blocks

## Blocks

- [Roadmap by Stage](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-1.md): Roadmap Queue Data Grid Grouped by Stage with Collapsible Category Rows. Best for a headerless task list split into Backlog, To Do, In Progress and Done rows, with completion rings and a stage mix footer.
- [Revenue by Region](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-2.md): Account revenue grouped by region with collapsible rows and ARR subtotals. Best for accounts under region rows that carry an ARR subtotal, weighted NRR and next renewal, with an All Regions total in the footer.
- [Patient Access Cohorts](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-3.md): Patient access cohort DataGrid with switchable grouping and outcome heatmap. Best for intake signals regrouped by area, booking strength or hold risk, with heat cells whose hover card compares each rate to the cohort.
- [Bill of Materials](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-4.md): Bill Of Materials Tree Grid With Rolled-Up Cost And Supply Risk. Best for a bill of materials tree of any depth that rolls quantity down and cost and lead time up, with share of build donuts and a depth switch.
- [Reporting Hierarchy](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-5.md): Reporting Hierarchy Tree Grid With Span Of Control And Cascading Selection. Best for an org tree where checking a manager selects their whole line, with a bulk action bar and direct reports, line size and open roles rolled up.
- [Editorial Pipeline](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-6.md): Editorial Production Desk With Per Section Tables And Repeated Headers. Best for story sections rebuilt by stage, desk or issue, each a table sorted on its own under a tinted band with an add button.
- [Studio Delivery Board](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-7.md): Delivery Board With Per Stage Column Headers And Segmented Completion Meters. Best for stage tables that share one sort and one selection, with a select all per stage, an average completion and 8 segment meters.

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.