# Studio Delivery Board block

> Delivery Board With Per Stage Column Headers And Segmented Completion Meters

Studio delivery board grouped by stage: one DataGrid per stage so every stage repeats its full column header row, sharing one sort and selection state. Client brand tiles, a segmented completion meter, crew AvatarGroup, milestone dates. Search, stage filter, density and column toggles, per-stage select all.

- 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-7
- 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-7")`
- Built with: Avatar, Badge, Button, Checkbox, Data Grid, Dropdown Menu, Empty, Field, Frame, Input Group, Popover, Select, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Stage tables that share one sort and one selection, with a select all per stage, an average completion and 8 segment meters

## Agent notes

- Replace `DELIVERY_GROUPS`; each group's `rows` become one stage table, with brands in `CLIENTS` and avatars in `CREW`
- `handleNameEngagement` and `handleOpenBrief` only raise a toast; connect them to your intake form and brief page
- `createDeliveryColumns` is shared by every stage table; give each new column an explicit `size` or the stages stop aligning

## When not to use

- Stage tables that each sort on their own under a tinted band: use [Editorial Pipeline](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-6.md) (`get_block("data-grid-grouping-6")`)
- Stage progress cards next to a table view toggle: 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-7
```

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