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

A paid shadcn/ui block sold by the [@reui](https://reui.io/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/data-grid-grouping-6).

- Page, with a preview: https://shadcn.exchange/r/reui/data-grid-grouping-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/data-grid-grouping-6-light-ab3925f789da0202.png
- Listed: 2026-10-13

## Buy and install

@reui sells this block, and its code is not on shadcn.exchange. Buy it from the registry, which installs it for those who have: https://shadcn.exchange/out/reui/data-grid-grouping-6

## Dependencies

- npm packages: `@tanstack/react-table`, `cn`, `sonner`
- Registry items: `@reui/badge`, `@reui/data-grid`, `@reui/frame`, `avatar`, `button`, `@reui/data-grid-column-header`, `@reui/data-grid-scroll-area`, `@reui/data-grid-table`, `dropdown-menu`, `field`, `input-group`, `popover`, `select`, `switch`, `toggle-group`

## Notes from the registry

## Purpose
An editorial production desk for magazine and newsroom teams who need to see every commissioned story at once, split into the stage of the pipeline it sits in, without losing the column names as they scan down the page.

## Best Fit
- editorial and content production pipelines
- any workflow list where each stage should read as its own table with its own header row
- kanban-style stage grouping for teams who want a table rather than a board
- lists whose grouping dimension changes per user, not per page

## Main Pieces
- a `Frame` shell with publication and snapshot line, three desk KPIs (Stories, Unchecked, Ready), and a `New story` action
- a `Group by` `ToggleGroup` (Stage, Desk, Issue) that rebuilds the sections rather than re-sorting one table
- one section card per group, each a tinted band (stage dot, label, count badge, add button) over its own `DataGrid`
- a separate `useTable` instance per section (TanStack Table v9, `features: dataGridFeatures`), so the column header row repeats for every group
- one column array built once per view and passed to every section, which is what keeps the columns aligned across separate tables
- rows carrying story title with a slug, a truncated angle, an `AvatarGroup` byline that rolls into an `AvatarGroupCount` at three, a filed date, a publish date, a placement badge, an assets count chip and a desk-notes count chip
- desk and placement filters whose placement options render the same badge the column shows
- every group in the current dimension renders, including empty ones, so a filter narrows the desk without collapsing its shape
- original 13-story fixture across four stages, four desks and two issues, pinned to a fixed production date

## shadcn Primitives Used
- Button
- DropdownMenu
- InputGroup
- ToggleGroup
- Avatar
- AvatarGroup

## ReUI Primitives Used
- Frame
- DataGrid
- DataGridContainer
- DataGridTable
- DataGridColumnHeader
- Badge

## Third-Party Libraries
- `@tanstack/react-table` v9 for one table instance per section and stable row ids
- `sonner` for preview-safe action feedback

## How To Use
1. Replace `STORIES` and `BYLINES` with your own records; the grouping dimensions read straight off `stage`, `desk` and `issue`.
2. Add a value to any of those unions to get a new section, with no other change.
3. Build the column array once in the view and pass the same instance to every section; never rebuild it per section.
4. Give every column an explicit `size` and leave `columnsResizable` off.
5. Wire the row actions, the per-section add button and `New story` to your CMS.

## What Not To Do
- Do not rebuild the column array per section, and do not let the column sizes exceed the narrowest section's content box; separate tables only line up while they share one array, one explicit size per column, and resizing stays off.
- Do not add `DataGridPagination` to a section. Nothing here needs it, and the primitive's last-row border rule keys off a `:has()` match on the element directly wrapping a grid and its pagination, so adding it changes that section's last-row border for no gain.
- Do not drop the per-section `DataGridContainer` or its `DataGridScrollArea`. The container is `w-full overflow-hidden`, so without the scroll area a narrow viewport clips the right-hand columns with no way to reach them.
- Do not turn the group bands into table rows; the repeated header row is the point of this layout, and a band row would force the header off.
- Do not copy real publications, staff names, or unpublished story titles into this block.

## Real Data Integration
Back each story with a stable id, a slug, a title, a one-line angle, a stage, a desk, an issue, a placement, byline ids, an ISO filed date and publish date each paired with a display label, and the asset and note counts. Keep the dates as ISO plus a pre-formatted label so nothing is built at render time. For server-backed data, fetch the flat story list and group it on the client; `buildSections` already returns every group in the dimension's own order, including empty ones.

## LLM Guidance
Use this block when the user asks for a grouped list whose sections must each be their own table with their own column header, or for a stage pipeline rendered as tables rather than a board. This is the sectioned grid in the grouping family; `data-grid-grouping-1` is one flat table with group rows and the header suppressed, `data-grid-grouping-2` a one-level region rollup, `data-grid-grouping-3` a cohort heatmap, `data-grid-grouping-4` a bill-of-materials tree, and `data-grid-grouping-5` an HR org tree. Preserve the one-DataGrid-per-section mounting, the shared module-scope column array, the absence of pagination, the per-section `DataGridContainer`, the switchable grouping dimension, the tinted stage band with its count and add button, and the semantic Badge usage unless the brief explicitly changes the grouping model.