Column reordering

Dragging a column into a new position with reorderableColumns.

Last updated August 3, 2026

reorderableColumns turns on dragging a header to a new position, unless a column sets its own reorderable to override the grid. A column that can't move can still be moved past — dragging one past a fixed column is fine, only the fixed one can't itself be picked up.

Drag a header to reorder it

reorderableColumns

Live example

Id	Service	Environment Name	Environment Region	Status	Cost
1	checkout-api	production	us-east-1	healthy	1240.5
2	billing-worker	production	eu-west-1	degraded	860.2
3	search-index	staging	us-east-1	healthy	92.75
4	notifications	production	us-west-2	down	305.4
5	analytics-pipeline	staging	eu-west-1	healthy	145

Interact with the grid above to see its callbacks fire.

<DataGridComponent
  columns={columns}
  dataSource={rows}
  reorderableColumns
  onColumnOrderChange={({ columnId, order }) => persist(order)}
/>;

Props

Prop	Type	Default	Description
`reorderableColumns`	`boolean`	`false`	Whether columns can be dragged into a new position.
`defaultColumnOrder`	`readonly string[]`		Column ids in the order to start in. Uncontrolled, and partial — ids it omits keep their position among columns.
`onColumnOrderChange`	`(event: ColumnOrderEvent) => void`		Called once when the user drops a column somewhere new. A drop that leaves the order unchanged does not call it.
`column.reorderable`	`boolean`		Per-column override of reorderableColumns. A column that cannot move can still be moved past.

Keyboard & pointer interactions

Drag a header to reorder columns.
With a header focused, Ctrl+ArrowLeft / Ctrl+ArrowRight reorders it via keyboard; Escape cancels an in-progress drag.

Edit this page on GitHub