This example shows the basic use case of the ColReorder plugin. 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. ColReorder is added to a DataTable through the R character added to the dom.

While the ColReorder insertion point indicator can be styled, another option to show the end user what the column will look like when the table has been reordered is to actually do the reordering while the mouse is still dragging the column header. This is shown in this example and is controlled by the realtime parameter.

A useful interaction pattern to use in DataTables is state saving, so when the end user reloads or revisits a page its previous state is retained. ColReorder works seamlessly with state saving in DataTables (stateSave), remembering and restoring the column positions, as well as everything else such as sorting and filtering.

ColReorder provides the ability to specify a column ordering which is not that of the HTML (which typically you will want) through the parameter colReorder.order. This is an array of integers with the column ordering you want. In this example columns are ordered on initalization this way: 1, 3, 2, 4, 0, 5, ordering functionality remains working even after predefined ordering.