colvisGroup

Since: Buttons 1.0.0

Show and hide multiple columns.
Please note - this property requires the Buttons extension for DataTables.

Description

When working with column visibility you may wish to present a control to the end user that provides the ability to set various columns to both show and hide at the same time - allowing grouping to occur. The colvisGroup button type provides this ability for Buttons. This button provides exactly this option.

The show and hide parameters of this button are both column-selector types defining the columns in the table that should be shown or hidden respectively. If a column is not defined in either, its visibility is not altered.

Please note that unlike most other buttons, the button text (buttons.buttons.text) option is not predefined as there is no sensible default that could be applied. You must set a text property for this button.

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
`action`
Set column visibility.
`className`		buttons-colvisGroup
The button's class name. See `buttons.buttons.className` for details.
`hide`		[]
Column to remove from the visible display
`show`		[]
Column to make visible

Examples

DataTables initialisation: Column grouping using class names:

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
				{
					extend: 'colvisGroup',
					text: 'Office info',
					show: '.office',
					hide: '.hr'
				},
				{
					extend: 'colvisGroup',
					text: 'HR info',
					show: '.hr',
					hide: '.office'
				}
			]
		}
	}
});

DataTables initialisation: Show all / show none buttons:

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
				{
					extend: 'colvisGroup',
					text: 'Show all',
					show: ':hidden'
				},
				{
					extend: 'colvisGroup',
					text: 'Show none',
					hide: ':visible'
				}
			]
		}
	}
});