colVisDropdown

Since: ColumnControl 1.0.0

A dropdown wrapper for the colVis content type.
Please note - this property requires the ColumnControl extension for DataTables.

Description

This content type matches colVis, but places it inside a dropdown. It is provided for convenience, and it is relatively common to have the column visibility toggle buttons in their own dropdown. It is simply an alias of:

{
    extend: 'dropdown',
    text: 'Column visibility',
    icon: 'columns',
    content: [{
        extend: 'colVis'
        // ... options from `colVis`
    }]
}

Note that this content type provides the same options as colVis - it simply passes them through, so you can still control which columns are selected, etc. For a full list of the options available, please refer to colVis. Only the dropdown-specific options are shown on this page.

Display

This content type can be used at any level in ColumnControl. At the top level it will create a dropdown icon. Inside a dropdown, it will create a nested dropdown.

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

`icon`

Type: string
Default: columns

Button icon. Can take the name of any icon available in DataTable.ColumnControl.icons (which is a writeable object containing SVG icons).

`text`

Type: string
Default: Column visibility

Text of the dropdown button - shown when it is in a dropdown itself. Can also be set by the colVisDropdown key of language.columnControl, which will take priority if set.

Examples

List columns in a dropdown, allowing their visibility to be toggled:

new DataTable('#example', {
    columnControl: ['colVisDropdown']
});

Column visibility dropdown and ordering icon:

new DataTable('#example', {
    columnControl: [
        'order',
        'colVisDropdown'
    ],
    ordering: {
        indicators: false,
        handler: false
    }
});

Nested dropdown:

new DataTable('#example', {
    columnControl: [
        'order',
        [
           'orderAsc',
		   'orderDesc',
		   'colVisDropdown'
        ]
    ]
    ordering: {
        indicators: false,
        handler: false
    }
});