Skip to main content
Urbicon UI

Column Reorder

Drag-and-drop column reordering with keyboard support.

Set enableColumnReorder and users can drag column headers into a new order. From the keyboard, focus a header and press Shift+Arrow Left/Right to move that column one step.

Reorderable Columns

Drag a header, or focus one and press Shift + Arrow Left/Right. This demo has no storage key, so a reload puts the columns back in source order.
Name
Role
Department
Location
Emma Wilson
Staff Engineer
Platform
Berlin
Liam Chen
Product Designer
Design
Hamburg
Sofia Martinez
Engineering Manager
Platform
Munich
James Park
Frontend Developer
Product
Remote
Aisha Patel
Data Scientist
Data
Berlin
<Table
  {items}
  {columns}
  enableColumnReorder
/>

The order lives in the table, keyed by each column's id (its accessor, when the column has no explicit one). Passing a fresh columns array therefore leaves it alone, and a column you add later lands at the end. To keep the order across reloads, give the table a preferences storage key; prefs.defaults.columnOrder sets the order to start from, such as one you loaded with the user's profile.