DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Data Grid - Column Reordering

DataGrid columns have the same order as fields in data objects. You can use the columns array to specify a different order. To reorder a column at runtime, change column.visibleIndex property.

Users can drag and drop column headers to reorder columns. To enable this feature, set the allowColumnReordering property to true. If you do not want users to drag a specific column, disable its column.allowReordering property.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

This demo shows how fixed columns behave during user-initiated reordering. Users can drag and drop columns within the following areas (but not between them):

  • Columns fixed to the left
  • Non-fixed columns
  • Columns fixed to the right

Sticky columns (fixed with the 'sticky' position) behave like non-fixed columns during reordering (even if they are in a state where they are attached to a border/fixed column). To see sticky columns in this demo, right-click a column to open a context menu. Choose "Set Fixed Position -> Sticky" to stick a column.