DataGrid - Row reorder

Row reorder via drag-and-drop

The <ReactDataGrid /> supports row reordering via row drag and drop - see the example below for a demo.

For the most basic setup, specify rowReorderColumn={true}.

You can also enable row reordering, by specifying onRowReorder.

When the grid is sorted, filtered, grouped or pivoted, the row reordering does not work, as it would be confusing.

When the dataSource is an array or a promise, if the grid is configured with row reordering, if no onRowReorder is specified, the rows will be reordered internally in the dataSource.

However, if the dataSource is a function, you have to specify onRowReorder({ data, dragRowIndex, insertRowIndex }) and implement the reordering logic yourself.

Handling reordering

As already mentioned, for custom reordering logic, or reordering with a remote data source, you need to implement onRowReorder({ data, dragRowIndex, insertRowIndex }) - see the example below to help you get started.

The example above uses renderRowReorderProxy to customize the drag proxy on reordering.

Row resize

Footer

e: contact@reactdatagrid.io