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.


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.


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):


DataTables initialisation: Show a button for every column:

$('#myTable').DataTable( {
	buttons: [ 'columnsToggle' ]
} );

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

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

Direct initialisation: Show a button for every column in a collection (this is the same as the colvis button type):

new $.fn.dataTable.Buttons( table, {
	buttons: [
			extend: 'collection',
			buttons: [ 'columnsToggle' ]
} );