columnsToggle

Since: Buttons 1.0.0

A set of Buttons to toggle 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 toggle the visibility of each column.

The columnsToggle button type differs from the colvis type in that it does not extend the collection type (although it could be assigned to a collection's buttons attribute if you wished). The buttons for each column are automatically expanded where this button is included.

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 `undefined` which results in all columns being selected, but any of the `column-selector` options can be used to define a custom button set.
`visibility`		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: Show a button for every column:

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: ['columnsToggle']
		}
	}
});

DataTables initialisation: Show buttons for columns with the class name 'toggle' only:

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
				{
					extend: 'columnsToggle',
					columns: '.toggle'
				}
			]
		}
	}
});