Column Reordering in Apex Grid

The Apex grid supports pointer-driven drag-and-drop column reordering. Drag is animated and constrained to the column's own pinning group — pinned columns can be reordered among other pinned columns of the same position, but cannot cross start/centre/end boundaries.

Enabling reordering

Reordering is enabled via the column-reordering attribute on the grid:

<apex-grid column-reordering></apex-grid>

Or programmatically:

grid.columnReordering = true;

Per-column opt-out

Some columns should not move (a leading checkbox column, a trailing actions column). Mark them with reorderable: false:

{
  key: 'actions',
  reorderable: false,
}

Programmatic API

await grid.moveColumn('email', 'name', 'after');
await grid.moveColumn('email', 'name', 'before');

moveColumn does not respect pinning-group boundaries — it is the programmatic equivalent of an arbitrary reorder, useful for restoring a user's saved layout. Drag-and-drop UI honors the pinning constraint; the API does not.

Events

• columnMoving — cancellable; fires before the column moves. Call event.preventDefault() to reject the move (for example, to enforce a custom layout policy).
• columnMoved — fires after the move.

Saving and restoring column order

The visible render order lives in grid.displayColumns (read-only). To persist:

const order = grid.displayColumns.map((col) => col.key);
localStorage.setItem('grid-column-order', JSON.stringify(order));

To restore:

const saved = JSON.parse(localStorage.getItem('grid-column-order') ?? '[]') as string[];
for (let i = 1; i < saved.length; i++) {
  await grid.moveColumn(saved[i], saved[i - 1], 'after');
}