React Grid - Column Reordering

The Grid component allows reordering grid columns programmatically or using the drag-and-drop feature.

Related Plugins

The following plugins implement column reordering features:

• DragDropProvider - implements the drag-and-drop functionality and visualizes a column being dragged
• Table - visualizes table column reordering
• TableColumnReordering - controls the column order
• TableHeaderRow - visualizes header row column reordering

Note that the plugin order is important.

Basic Setup

Import the plugins listed above to set up a simple Grid with column reordering enabled.

Uncontrolled Mode

In uncontrolled mode, specify the initial column order in the TableColumnReordering plugin's defaultOrder property.

Controlled Mode

In controlled mode, pass the column order to the TableColumnReordering plugin's order property and handle the onOrderChange event to control the column order state.