This trivial example shows the use of the rowReorder property being used to enable RowReorder on a DataTable. The first column in the table is a sequence number that provides the basis for the ordering. To change a row's order, simply click and drag the row.

This example shows the same information as the simple example, but in this case restricts the column ordering that can be applied to the table to just the sequence number column. Generally this will be the configuration that RowReorder will be used in, as ordering by other columns can make the reordering potentially quite confusing for the end user.

This example shows RowReorder being used with the Responsive extension for DataTables and also that it provides support for touch inputs to perform a row reorder. Responsive is particularly useful with mobile devices, but can also be useful on desktops where complex data sets are shown in the DataTable.

The rowReorder.selector option provides the ability to define which element in a table row will provide the row reordering handle to the end user. This could be a button in an Actions column (which might also provide options for editing and deleting a row), or any other element.

Providing the UI to allow end users to reorder a table is only half of the story - likely you will wish to have the changes caused by the end user to effect a database or some other data store. This can be done by listening for the row-reorder event.

This example is used to show RowReorder's support for DataTables scrollY feature. As the dragged row approaches the boundary of the table, the table will start to scroll.

By default, when a row is dragged around a page with RowReorder, it will follow the mouse for both horizontal and vertical movements. However, you may wish to restrict the movement of the following row to just the vertical axis. This can be done with the rowReorder.snapX option.