Usage

Initialisation and configuration of ColReorder is performed through the colReorder initialisation option for DataTables. This option can be given as a simple boolean value to enable ColReorder with its default values, or as an object to provide more granular control.

Simple initialisation

In its most simple case, you can enable ColReorder by simply setting colReorder: true as an option in the DataTables initialisation:

new DataTable('#myTable', {
    colReorder: true
});

If you do this, you may wish to use the columns-reordered event to know when the end user has completed an action with ColReorder, so any changes can be fed back to a database.

Options

For more complex cases, the colReorder option can be used as an object allowing you to specify specific columns, or other controls such as how the drag handle is shown to the end user. In the following example, ColReorder is enabled on all columns, but the last one.

new DataTable('#myTable', {
    colReorder: {
        columns: ':not(:last-child)'
    }
});

Reference

For a complete list of the options that ColReorder supports, please refer to the DataTables initialisation options reference. The ColReorder examples also demonstrate the options available.