This example shows the basic use case of the ColReorder plug-in. With ColReorder enabled for a table, the user has the ability to click and drag any table header cell, and drop it where they wish the column to be inserted. The insert point is shown visually, and the column reordering is done as soon as the mouse button is released.

This is a simple example to show ColReorder working with DataTables scrolling (scrollY and scrollX).

This is a simple example to show ColReorder working with DataTables scrolling (scrollY and scrollX).

This example of how to use ColReorder shows how it can with with DataTables' ability to do individual column filtering. The basic example is exactly the same as the DataTables column filtering example, but with ColReorder also added to the table (colReorder).

One useful control option to present the end user when using ColReorder is the ability to reset the column ordering to that which was found in the HTML. This can be done by calling the colReorder.reset() method.

ColReorder interfaces with the Button's column visibility module for DataTables by updating the order of the list of columns whenever a reorder is done. This is shown in the example below.

While ColReorder works with the built-in scrolling options in DataTables (scrollY and scrollX) and also the FixedColumns extension.

This example shows ColReorder being used with the Responsive extension for DataTables. The "Position" column is the first to be hidden through the use of the columns.responsivePriority option, and you'll be able to notice that the hidden column is automatically taken account of by ColReorder as the columns are reordered.