Since: ColReorder 1.2.0

Columns have been reordered by the end user or API.
Please note - this property requires the ColReorder extension for DataTables.


When using ColReorder you may wish to know when a table has been reordered by an end user or through the API. This event provides that information.

This event is triggered when a column is reordered - if colReorder.realtime is enabled this can be during the column reordering drag.

Please note that, as with all DataTables emitted events, this event is triggered with the dt namespace. As such, to listen for this event, you must also use the dt namespace by simply appending .dt to your event name, or use the on() method to listen for the event which will automatically append this namespace.


function function( e, settings, details )



Add a class to the reordered column:

var table = $('#example').DataTable( {
	colReorder: true
} );

table.on( 'column-reorder', function ( e, settings, details ) {
	var headerCell = $( table.column( details.to ).header() );

	headerCell.addClass( 'reordered' );

	setTimeout( function () {
		headerCell.removeClass( 'reordered' );
	}, 2000 );
} );