Ordering
The reordering logic underneath reorderableColumns.
Last updated August 3, 2026
applyColumnOrder and moveColumnBefore are the functions DataGridComponent calls internally when reorderableColumns is enabled — the first puts a column list in the order an order state gives, the second moves one column id to sit before another. Reach for them directly if you're building a custom grid adapter.
Functions
| Function | Type | Description |
|---|---|---|
applyColumnOrder(columns, order) | readonly ColumnDefinition<Row>[] | Puts columns in the order order gives. Ids it omits keep their position among the definitions and follow those listed. |
moveColumnBefore(orderedIds, movedId, beforeId) | ColumnOrderState | Moves one column id to sit before another, or to the end when beforeId is null. Returns the same reference for a move that changes nothing. |
movesColumn(orderedIds, movedId, beforeId) | boolean | Whether moving movedId in front of beforeId would rearrange anything, for a drop indicator that promises only real moves. |
resolveDropBefore(orderedIds, targetId, side) | string | null | "After C" and "before D" name the same gap — this collapses either side of a drop to the one id it lands in front of. |
The same logic, in the React grid
reorderableColumns
Live example- Interact with the grid above to see its callbacks fire.
<DataGridComponent
columns={columns}
dataSource={rows}
reorderableColumns
/>;