Documentation

Column Reordering

Column reordering allows users to drag and drop columns to reorganize the table layout according to their preferences.

Current column order: id, firstName, lastName, age, email, location
Try dragging column headers to reorder them.

Basic Implementation

Column reordering is enabled by adding the columnReordering prop to the SimpleTable component. Users can drag and drop column headers to rearrange them.

React TSX
1

Reordering Configuration

  • columnReordering: Enable column reordering functionality
  • onColumnOrderChange: Optional callback that fires when column order changes, receiving the new header configuration as a parameter
  • disableReorder: Set this property on individual headers to prevent specific columns from being reordered

Tip

The onColumnOrderChange callback is useful for saving user preferences. You can store the new column order in localStorage or in your backend to persist the user's preferred layout across sessions.

Usage with Other Features

Column reordering works seamlessly with other Simple Table features. You can combine it with column resizing, column visibility, and pinned columns to create a highly customizable table experience.

Best Practice

When using column reordering with pinned columns, pinned columns will remain in their respective pinned areas (left or right) but can be reordered within those areas.

Previous: Column ResizingNext: Column Visibility