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 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 reorder on groups

The <ReactDataGrid /> allows row reorder within the same group or allows changing the group via drag and drop functionality.

For reordering within the same group it works the same as for row reordering, but drag and drop functionality will be restricted to that group.

For reordering rows in another group, the value of the item after witch the rows are grouped will change on drop. Internally the value or values - for multiple groups - is changed via setItemAt method.

For reordering rows in another group, allowRowReorderBetweenGroups must be true.

Row reorder on tree grid

The <ReactDataGrid /> supports row reorder on tree grid via enableTreeRowReorder prop.

For enabling row reorder on tree grid, rowReorderColumn and enableTreeRowReorder should both be true.

Be aware that row reorder on tree grid works only if generatedIdFromPath is true, because the way that the grid finds drag row and drop row is from path generated by initial nodes ids.

Also this new feature allows changing the leaf indentation via horizontal drag and drop functionality, by setting the enableTreeRowReorderNestingChange prop to true.

Another feature that the tree grid has is the control of whether you can change the parent via drag and drop or not, setting the enableTreeRowReorderParentChange prop to true.

When the row is dropped, onTreeRowReorderEnd callback is triggered which returns the new data source computed after reorder.

Row resize

Footer

e: contact@reactdatagrid.io

Top