Documentation

Column Reordering

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

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.

Column Reordering Configuration

Property	Required	Description

`columnReordering` boolean	Optional	Enables drag-and-drop column reordering functionality. When true, users can drag column headers to rearrange them.
`onColumnOrderChange` (newHeaders: HeaderObject[]) => void	Optional	Callback function that fires when column order changes. Receives the new header configuration as parameter.
`HeaderObject.disableReorder` boolean	Optional	Prevents specific columns from being reordered. Set this on individual header objects to lock them in place.

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.