ExamplesColumns & Pinning
Column groups
Put a shared header over a run of columns, nested up to 8 levels deep.
Three groups sit above the columns: Contact, Work, and Standing. Work holds a nested History group, so the header has three rows. Name is pinned left, so the Contact header splits at the pin edge. Click a group header to select its columns. Drag a group header to move the block, or drag a column inside its group.
Click a group header to select its columns. Drag a group header to move the whole block, or drag a column within its group. Hide every column of a group and its header disappears.
pnpm dlx shadcn@latest add @gridcn/data-grid-column-groups-demo
What's in the demo
columnGroups: a list of{ id, header, children }groups.childrenholds column ids and nested groups- A group header press selects the group's columns
- A group header drag moves the block inside its parent group
- The columns menu lists the members of each group under the group label
Behavior reference
- Column groups: ordering, pinning, selection, and limits
- Accessibility: header row indices and spans
Related
- Pinning: pin columns left or right
- Column layout: persist the order of grouped columns