Pinning

The column surface in one grid: Name is pinned left and Score pinned right by default, Email opts out of resizing, and the long Bio column is a flex: 1 autosize target. Pinning, resize, reorder, and visibility are all on by default and adjustable per column (pinnable, resizable, reorderable) or grid-wide (enableColumnPinning, etc.). To pin rows too, see the rows pinning example.

pnpm dlx shadcn@latest add @gridcn/data-grid-pinning-demo

What's in the demo

• pin: "left" / pin: "right": pinned bands with the frozen-edge shadow
• resizable: false on Email. Drag another header's edge to resize
• flex: 1 on Bio: double-click a header edge to autosize to its content
• Header dropdown (hover a header for the ghost chevron, or right-click): pin/unpin, autosize
• Toolbar columns menu: hide a column, then restore it the same way

Behavior reference

• Pin left/right: pin semantics and the persistent indicator
• Resize: drag, double-click autosize, per-column opt-out
• Visibility: hide/restore and what happens to pinned state
• Flex fill: how flex distributes the leftover width

Related

• Drag & drop: moving columns (drag or programmatic)
• Column layout: persisting all of the above