gridcn1.2.2
ExamplesColumns & Pinning

Column drag & drop

Drag a header within its pin zone, or move columns programmatically with setColumnOrder.

Two paths to the same columnOrder state: drag a header (the move is scoped to the header's pin zone), or call actions.setColumnOrder(id, targetId, position) programmatically. The demo shows both. Name opts out with reorderable: false, and Score is pinned right, so it only moves with the pinned zone.

Drag a header to reorder it — the move stays inside its pin zone. Name cannot be moved (reorderable: false) and Score is pinned right. The picker below the line moves the chosen column programmatically.

Move
Name
Role
Age
Joined
Score
Silent Tiger
Viewer
63
2023-07-05
4
Quick Lion
Viewer
67
2021-04-03
89
Swift Wolf
Manager
40
2020-10-27
80
Eager Lion
User
50
2022-10-08
51
Eager Tiger
Viewer
45
2024-10-07
83
Silent Wolf
User
24
2020-06-01
15
Swift Lion
Viewer
34
2022-10-18
62
Eager Lion
Manager
21
2021-10-07
42
Eager Eagle
Editor
25
2024-06-11
35
Bold Tiger
Editor
19
2024-03-20
52
pnpm dlx shadcn@latest add @gridcn/data-grid-column-drag-demo

What's in the demo

  • enableColumnReorder: header drag with a drop indicator, grid-wide default true
  • reorderable: false on Name: the per-column opt-out that beats the grid flag
  • pin: "right" on Score: a drag crossing pin zones is a no-op
  • Picker + Left/Right buttons: setColumnOrder(selectedId, neighborId, "before" | "after") from useDataGridActions(), disabled at the order's edges

Behavior reference

  • Reorder: the drag gesture, gating, and the layout-change payload
  • Row drag & drop: the same two-path shape for rows

Pinning

Pin columns left or right, resize edges, double-click autosize, hide and restore.

Filtering

Quick search, per-column filters, faceted isAnyOf and isNoneOf, the header filter, and isBetween ranges.

On this page

What's in the demoBehavior referenceRelated