reorder
Click and drag button to allow reordering of columns.
Please note - this property requires the ColumnControl extension for DataTables.
Description
DataTables has a ColReorder extension which allows reordering columns through click and drag of the column header. It isn't always desirable to have the whole header cell as the click zone, particularly when you have other content types (buttons, inputs, etc) for the end user to interact with. As a result, this content type is available to restrict the click zone to just the button in question.
Please note that to operate this content type the ColReorder extension for DataTables is required. Additionally, you do not need to initialise ColReorder through the colReorder option, ColumnControl will do that for you, although it is possible to do so if you wish to customise the behaviour of ColReorder.
Examples showing the use of this content type are available on the DataTables website.
Display
It is expected that this button should be used at the top level of the ColumnControl content, as clicking and dragging inside a dropdown makes little sense.
Options
This button can have the following options set in its configuration object to customise its actions and display, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):
icon
- Type:
string - Default:
move
Button icon. Can take the name of any icon available in DataTable.ColumnControl.icons (which is a writeable object containing SVG icons).
text
- Type:
string - Default:
Reorder columns
Trigger button text (shown when in a dropdown). Can also be set by the reorder key of language.columnControl, which will take priority if set.
Examples
Show an ordering icon and column click and drag icon in each header cell.:
new DataTable('#example', {
columnControl: ['order', 'reorder'],
ordering: {
indicators: false,
handler: false
}
});Click and drag on selected columns only:
new DataTable('#example', {
colReorder: {
columns: ':not(:first-child, :last-child)'
},
columnControl: ['order', 'reorder'],
columnDefs: [{
targets: [0, -1],
columnControl: ['order']
}],
ordering: {
indicators: false,
handler: false
}
});