columnsVisibility
A set of Buttons to set the visibility of individual columns.
Please note - this property requires the Buttons extension for DataTables.
Description
This button type actually creates multiple buttons in a Button instance, one button for each column that has been selected (or all columns if no selector is given). Each button is automatically given the same title as the header text for that column, and gives the ability to control the visibility of each column through the button's visibility
option.
This button type is included for completeness in the base set of column visibility buttons, but the columnsToggle
and columnVisibility
are generally more likely to be useful.
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
):
Name | Type | Default |
---|---|---|
columns | undefined | |
Columns selector that defines the columns to include in the column visibility button set. By default this is | ||
visibility | undefined | |
Control if the columns should be shown or hidden when the button is activated. |
Example
DataTables initialisation: Individual button collections to show / hide columns:
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'collection',
text: 'Show columns',
buttons: ['columnsVisibility'],
visibility: true
},
{
extend: 'collection',
text: 'Hide columns',
buttons: ['columnsVisibility'],
visibility: false
}
]
}
}
});