Editorial Production Desk With Per Section Tables And Repeated Headers

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.