ColReorder

ColReorder adds the ability for the end user to be able to reorder columns in a DataTable through a click and drag operation. This can be useful when presenting data in a table, letting the user move columns that they wish to compare next to each other for easier comparison.

It is worth noting that the underlying column data structure of the DataTable is modified as part of this process - this is important if you are interacting with the table using the API.

Download

The easiest way to get and use ColReorder 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

ColReorder can be initialised and used in two different ways:

As part of the DataTables constructor with the colReorder configuration option
A new constructor

In DataTables

ColReorder can be initialised on a DataTable by using the colReorder option in the DataTables options object - this is simply a boolean value, although it is also possible to use an object for fine grained control (see the reference documentation):

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

Constructor

Alternatively, ColReorder can be added to a table after it has been constructed using the Javascript new keyword with the $.fn.dataTable.ColReorder function. This function takes two parameters:

The DataTable instance to apply the buttons to
The ColReorder options (this is the same as the options available for the colReorder option.

var table = $('#myTable').DataTable();

new $.fn.dataTable.ColReorder( table, {
    // options
} );

Features

ColReorder sports the following features:

Very easy integration with DataTables
Tight integration with all other DataTables plug-ins
The ability to exclude the first (or more) column from being movable
Predefine a column order
Save saving integration with DataTables