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.
Files · 5
Dependencies
npm packages
@tanstack/react-table
sonner
Registry items
@reui/badge
@reui/data-grid
@reui/frame
avatar
@reui/badge
button
@reui/data-grid
@reui/data-grid-column-header
@reui/data-grid-scroll-area
@reui/data-grid-table
dropdown-menu
field
@reui/frame
input-group
popover
select
switch
toggle-group
Registry Items
data-grid-grouping-6
Configuration
Name
data-grid-grouping-6
Type
Block
Description
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.