Overview

Drag column headers to rearrange the order of columns. Supports localStorage persistence and programmatic control. A drag threshold prevents accidental reorder when clicking to sort.

CO01 Interactive Demo

Drag any column header left or right to reorder columns.

Reorder Log: Drag column headers to reorder...
Column Reordering 
 
 
CO02 LocalStorage Persistence
 
Save column order to localStorage so it persists across page reloads.
 
Persistence Setup 
 
 
 
Programmatic API
 
Programmatic Control 
 
 
 
API Reference
 
Grid Properties
 
PropertyTypeDefaultDescription
isColumnReorderAllowedbooleanfalseEnable column drag-to-reorder
gridNamestring-Unique name for localStorage persistence
shouldPersistColumnOrderbooleanfalseSave column order to localStorage
oncolumnreorderfunction-Callback after reorder completes
 
Methods
 
MethodDescription
setColumnOrder(order)Set column order (array of { field, order })
moveColumn(field, toIndex)Move a specific column to a target index
getColumnOrderState()Get current column order (array of { field, order })
 
ColumnReorderDetail Interface
 
TypeScript Types 
 
 
 
Notes
 
  • Frozen columns cannot be reordered
    •  
  • Drag threshold (5px) prevents accidental reorder when clicking to sort
    •  
  • Grab cursor only shown when isColumnReorderAllowed is enabled
    •  
  • Works together with column resizing - both can be enabled simultaneously
 
Column Drag Selection
 
Column headers support drag-to-select for selecting entire columns:
 
  • When isColumnReorderAllowed = false: Dragging column headers selects columns instead of reordering them.
    •  
  • When isColumnReorderAllowed = true: Hold Shift and drag column headers to select columns instead of reordering.
 
Column Drag Selection 
 
 
 
Per-Column Opt-Out
 
Use the isMovable column property to prevent specific columns from being reordered:
 
Column isMovable Property