# Editorial Pipeline block

> Editorial Production Desk With Per Section Tables And Repeated Headers

Sectioned DataGrid layout for an editorial story pipeline: one independent DataGrid per group so every stage repeats its own column header row, a switchable Stage, Desk or Issue grouping dimension, tinted stage bands with counts and an add button, AvatarGroup bylines, flag placement badges and asset and note count chips.

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

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

## Agent notes

- Replace `STORIES` and `BYLINES`; `buildSections` splits the stories by each `GroupBy` of stage, desk or issue
- `handleStoryAction`, `handleAdd` and `handleCreate` only raise a toast; connect them to your CMS
- `StorySectionCard` takes one shared `columns` array and `columnVisibility`; sections only line up while they share both

## When not to use

- Collapsible stage rows inside one table under a single header row: use [Roadmap by Stage](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-1.md) (`get_block("data-grid-grouping-1")`)
- Stage tables that share one sort and one selection state: use [Studio Delivery Board](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-7.md) (`get_block("data-grid-grouping-7")`)

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

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