Column ordering

Basics

enableColumnOrdering lets a reader drag a header to a new position. The drag uses pointer events rather than HTML5 drag-and-drop, so it behaves the same with a mouse, a pen and a finger.

The same order is editable from the columns menu, where each column has a drag handle and up and down buttons, which is how the feature works without a pointer at all. Every move is announced in the live region: Moved Company name to position 3 of 8.

What stays put

Reordering respects the layout rules already in place:

• A pinned column moves only within its own side.
• lockPosition: 'first' or 'last' holds a column at its edge.
• enableOrdering: false takes a column out of the drag entirely, and static: true takes it out of everything.

Reading and setting the order

state.columnOrder is an array of column ids; anything missing keeps its declared position. That makes a "reset layout" button a one-liner, and a saved layout a stored array.

<button onClick={() => table.resetColumnOrder()}>Reset layout</button>

moveColumn(id, toIndex) performs the same move programmatically.

Customization

Pair ordering with column visibility and sizing, then persist all three; see Persistence. Those three slices together are what people mean by "my table layout".

Limitations

• Group columns move as a unit. A leaf cannot be dragged out of its header group.
• Order is by id. Renaming a column id invalidates a stored order, so treat ids as an API.
• There is no drop indicator between two pinned sides. Dragging across the boundary is refused rather than silently ignored.

API

• DataTableProps: enableColumnOrdering, onColumnOrderChange.
• ColumnDef: enableOrdering, lockPosition, static.
• TableInstance: setColumnOrder, resetColumnOrder, moveColumn.
• Column: getIndex, getCanOrder.