column-reorder

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.

Description

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.

Type

function function( e, settings, details )

Parameters:

	Name	Type	Optional
1	`e`	`object`	No
	jQuery event object
2	`settings`	`DataTable.Settings`	No
	DataTables settings object for the table that has been modified
3	`details`	`object`	No
	An object that contains information about the reordered columns: `integer` `from` - Column index that the column has been moved from `integer` `to` - Column index that the column has been moved to `array` `mapping` - Array of integers that define how the old column positions map to the new positions `boolean` `drop` - Indicate if this event is the result of a mouse drop (i.e. the user has finished moving the columns). This is useful to distinguish between a live reorder and the final state. Requires ColReorder 1.2.1 or newer.

Example

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 );
} );