Column layout

The layout-persistence pair: defaultColumnLayout seeds widths/order/pins/hidden once at mount (it is NOT controlled. Later prop changes are ignored), and onColumnLayoutChange fires from the store actions layer on every resize commit, reorder, pin, and hide. The demo round-trips that snapshot to localStorage, so a manual page reload restores the user's layout. Resize a header, drag a column, hide one from the columns menu, then reload.

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

What's in the demo

• defaultColumnLayout={layout}: seeded from localStorage at mount
• onColumnLayoutChange={persist}: writes the ColumnLayout snapshot back after each gesture
• DataGridColumnsMenu: hide/restore columns (the hidden part of the snapshot)
• Reset button: clears the snapshot and re-seeds the grid with the column defaults
• Live "current order" readout: the order part of the snapshot as it changes

The snapshot shape

type ColumnLayout = {
  widths: Record<string, number>; // only columns the user actually resized
  order: string[]; // always the full current column-id order
  pins: Record<string, "left" | "right">;
  hidden: string[];
};

Behavior reference

• Reading column state: live access to the same state
• Persisting a user's layout: the canonical pattern

Related

• Pinning: the per-column gestures this snapshot records
• URL state: alternative persistence as shareable URLs