orderStatus
Order status display icon.
Please note - this property requires the ColumnControl extension for DataTables.
Description
One of the most common customisations of order is to disable its click listener (statusOnly option), resulting in the button showing the status of the column's ordering only. Typically, the DataTable event handler for the header cells is then allowed to apply the ordering instead, which results in the whole of the header acting as a trigger button.
This content type is provided as a shorthand for that configuration. See the examples below to see the functionality equivalent code using this content type, and order with its statusOnly option set.
Display
Generally, this content type will be used at the top level of ColumnControl, thus showing a simple icon button to the end user as it is such a common interaction with the table, but it will also work in a dropdown without issue.
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):
iconAsc
- Type:
string - Default:
orderAsc
Icon to show when ascending order is applied to the host column. Can take the name of any icon available in DataTable.ColumnControl.icons (which is a writeable object containing SVG icons).
iconDesc
- Type:
string - Default:
orderDesc
Icon to show when descending ordering is applied to the host column. Can take the name of any icon available in DataTable.ColumnControl.icons.
iconNone
- Type:
string - Default:
orderNone
Icon to show when there is no order applied to the host column. Can take the name of any icon available in DataTable.ColumnControl.icons.
text
- Type:
string - Default:
Order status
Trigger button text (shown when in a dropdown). Can also be set by the order key of language.columnControl, which will take priority if set. Note that the text does not change depending on status, only the icon does.
Examples
Show a button which doesn't react to clicks, but rather shows the current ordering status for the column. The click to order is handled by DataTables instead.:
new DataTable('#example', {
columnControl: ['orderStatus'],
ordering: {
indicators: false
}
});Identical in functionality to the above.:
new DataTable('#example', {
columnControl: [{
extend: 'order',
statusOnly: true
}],
ordering: {
indicators: false
}
});