columnToggle

Since: Buttons 1.0.0

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 b-buttons columnToggle button type is very similar to the b-buttons 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:

Examples

DataTables initialisation: Toggle the visibility of column index 1 only:

$('#myTable').DataTable( {
	buttons: [ {
		extend: 'columnToggle',
		columns: 1
	} ]
} );

DataTables initialisation: Two buttons, which toggle the visibility of all columns with the class primary and secondary:

$('#myTable').DataTable( {
	buttons: [
		{
			extend: 'columnToggle',
			columns: '.primary'
		},
		{
			extend: 'columnToggle',
			columns: '.secondary'
		}
	]
} );

Direct initialisation: A single button that will toggle the visibility of columns with an index greather than 4:

new $.fn.dataTable.Buttons( table, {
	buttons: [
		{
			extend: 'columnToggle',
			columns: ':gt(4)'
		}
	]
} );