colvis
A button collection that provides column visibility control.
Please note - this property requires the Buttons extension for DataTables.
Description
This button will create a collection button that when activated will show a list of the columns in the table and provide the end user with the ability to toggle column visibility to suit their own requirements.
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
Show the collection to control column visibility.
className
- Type:
string - Default:
buttons-collection buttons-colvis
The button's class name. See buttons.buttons.className for details.
columnText
- Type:
function - Default:
undefined - Since: 1.3.0
Callback function that provides the ability to modify or replace the text used for each button in the list. This function is executed once for each button.
It accepts three parameters:
DataTable.Api: DataTable API instanceinteger: Column data index for the button being createdstring: The title for the button created by Buttons (derived from the column title)
The return value is a string that will be used for the button's text.
columns
- Type:
column-selector - Default:
undefined
Columns selector that defines the columns 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.
sort
- Type:
string - Default:
undefined - Since: 3.1.3
Indicate if the column buttons displayed should be shown in column order (default) or alphabetically. To display alphabetically set this option to be alphabetic.
text
- Type:
string - Default:
Column visibility
The button's display text. The text can be configured using this option (see buttons.buttons.text) or the buttons.colvis option of the DataTables language object.
Examples
DataTables initialisation: Show the colvis button with default options:
new DataTable('#myTable', {
layout: {
topStart: {
buttons: ['colvis']
}
}
});Show the colvis button, but do not include the first column in the list of columns:
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'colvis',
columns: 'th:nth-child(n+2)'
}
]
}
}
});Customisation of the button text for the individual columns:
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'colvis',
columnText: function (dt, idx, title) {
return idx + 1 + ': ' + title;
}
}
]
}
}
});