RowReorder

DataTables is often used to show sequential data, and naturally from that comes the desire to be able to reorder that data - for this the RowReorder extension is available. It provides the end user with the ability to click and drag (or touch and drag on mobile devices) a row in the table and change its position. Full integration with Editor's multi-row editing abilities is also available to have updates automatically written to a database.

RowReorder operates on a data swap method so it can operate even on non-sequential data. Consider for example a row which is dragged to the top of the table, it would take the data of the row currently in the top position, the current top row would be moved to the second, where it would take its new value from that row in the second position, etc. The data point in the row that is modified is defined by the rowReorder.dataSrc. Normally you will want this to be a sequential number! The data reorder can potentially confuse end users otherwise!

Download

The easiest way to get and use RowReorder is to use the DataTables download builder where you can select the software that you wish to use on your page and have a single Javascript and CSS file created and hosted for you.

Alternatively, the individual files can be included on your page, a release package downloaded or the source control repository cloned on GitHub.

Initialisation

RowReorder can be initialised on a DataTable by using the rowReorder option in the DataTables options object - this is simply a boolean true to indicate the the rows should be reorderable, although it is also possible to use an object for fine grained control (see the reference documentation for full details):

$('#myTable').DataTable( {
    rowReorder: true
} );

Features

RowReorders presents the following features:

• Row reordering for DataTables with click and touch support
• Full integration with Editor
• Customisable drag start handle
• Drag snapping
• Full integration with Bootstrap, Foundation and the other styling libraries supported by DataTables