columnToggle
A single button that will toggle the visibility of one or more columns.
Please note - this property requires the Buttons extension for DataTables.
Description
The columnToggle
button type is very similar to the columnsToggle
button, but instead of being expanded to show a single button for each column in the table, it is a single button that will toggle the visibility of one or more columns in the table (based on the columns
parameter).
For multiple columns, the button should be given a title using the buttons.buttons.text
option, which can also be used for a single column control button, although it will automatically be given the column's title text if not otherwise supplied.
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
):
action
- Type:
function
- Default: Unset
Set the columns visibility.
className
- Type:
string
- Default:
buttons-columnVisibility
The button's class name. See buttons.buttons.className
for details.
columns
- Type:
column-selector
- Default:
undefined
Columns selector that defines the column(s) to include in the column visibility button set. By default this is undefined
which results in all columns being selected, but any of the column-selector
options can be used to define a custom button set.
text
- Type:
string
- Default:
Defined by the column title
The button's display text. By default this will use the header text of the column that this button controls the visibility of (or the first column title if it controls multiple columns). The text can be configured using this option (see buttons.buttons.text
).
visibility
- Type:
boolean
- Default:
undefined
The visibility value to set for the selected column(s). true
will display the column, false
will hide it and undefined
will toggle its current state.
Examples
DataTables initialisation: Toggle the visibility of column index 1 only:
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'columnToggle',
columns: 1
}
]
}
}
});
DataTables initialisation: Two buttons, which toggle the visibility of all columns with the class primary
and secondary
:
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'columnToggle',
columns: '.primary'
},
{
extend: 'columnToggle',
columns: '.secondary'
}
]
}
}
});