# Roadmap by Stage block

> Roadmap Queue Data Grid Grouped by Stage with Collapsible Category Rows

Tasks grouped under expandable stage rows with owner avatars, due dates, completion rings, and signal badges. Search, signal filter, density and column toggles. ReUI DataGrid, Badge, shadcn Avatar, Popover. Roadmap, issue tracker, project board.

- Type: Pro block
- Category: [Grouping](https://web.dev.reui.io/blocks/data-grid/grouping.md)
- Page: https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-1
- 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
- MCP: `get_block("data-grid-grouping-1")`
- Built with: Avatar, Badge, Button, Data Grid, Dropdown Menu, Field, Input Group, Item, Popover, Select, Switch
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A headerless task list split into Backlog, To Do, In Progress and Done rows, with completion rings and a stage mix footer

## Agent notes

- Replace `ROADMAP_TASKS`; each task files under one of the four stages defined in `ROADMAP_CATEGORIES`
- `handleTaskAction` open and move, and `handleNewTask`, only raise a toast; connect them to your own flows
- `DataGridTable` is given `renderHeader` false, so column titles are hidden; flip it to show a header row

## When not to use

- Tasks that open in place onto nested sub-tasks beneath each parent row: use [Sub-Task Tracker](https://web.dev.reui.io/blocks/data-grid/expansion/data-grid-expansion-1.md) (`get_block("data-grid-expansion-1")`)
- A work queue that flips between a table and stage progress cards: use [Work Queue](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-3.md) (`get_block("data-grid-columns-3")`)

## 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)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/data-grid-grouping-1
```

## About Grouping blocks

### 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

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.