Column reordering

Dragging a column into a new position with reorderableColumns.

Last updated August 24, 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

This example runs as a real project on StackBlitz.

Open in StackBlitz

<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