This trivial example shows the use of the rowReorderproperty being used to enable RowReorderon 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 the first column and drag the row. Note that ordering is enabled on all columns in this example.

The rowReorder.selectoroption provides the ability to define which element in a table row will provide the row reordering handle to the end user. By default only the first cell in the row will trigger the reordering action. This example shows the entire rowbeing able to start the reorder. Simply click and drag anywhere on the row. Additionally, the column that defines the row order is hidden by default, making the table a simple orderable list.

This example shows RowReorder being used with the Responsiveextension 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. Note that the row reordering in this example is triggered by dragging the cells in the second column.

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 examples shows how the row-reorderevent can be listened for and an action taken when it is triggered. In this case we simply output data about the change to the page, but a more sophisticated use case might involve using Ajax to inform a server-side about the change.

// Event result