columnControl.content

Define which content types to show.
Please note - this property requires the ColumnControl extension for DataTables.

Description

This option lets you define what buttons, inputs and any other content types the end user will see in ColumnControl. In keeping with the rest of ColumnControl (and DataTables in general) it is extremely configurable, but also designed to be easy to use.

Each item in the content array defines a single content type that will be displayed. A content type can be a button, input, or something more complex. Please see the content type reference page for a full list of the content types available. Note also that each content type might provide options that are specific to it for customisation.

The most simple form of content type identifier is a string - e.g.:

new DataTable('#myTable', {
    columnControl: ['orderAsc', 'orderDesc']
});

It is worth recalling here that columnControl when given as an array in this form is the same as columnControl: { content: ['orderAsc', 'orderDesc'] }. The shorthand of using an array is just a convenience for the most common use case.

In that same vein, using a string as a content type identifier is a shorthand itself. In this case the expanded form is an object with an extend property set to be the string value, e.g. 'orderAsc' and {extend: 'orderAsc'} are functionally identical in ColumnControl.

The object form allows configuration properties to be set for the content type. For example you might wish to customise button text, or Ajax options for searchList.

Finally, you can specify an inner array to the content array. This will create a dropdown with the content types in the inner array used in the dropdown. For example:

new DataTable('#myTable', {
    columnControl: ['order', ['orderAsc', 'orderDesc']]
});

This will show an order icon and a dropdown icon in the header cell of each column. The dropdown will contain orderAsc and orderDesc buttons. This form makes use of dropdown and the inner array is functionality identical to using dropdown directly with its content property set to the inner array values. i.e. the above could be rewritten as:

new DataTable('#myTable', {
    columnControl: [
        'order',
        {
            extend: 'dropdown',
            content: ['orderAsc', 'orderDesc']
        }
    ]
});

Type

array

Default

• Value:

Empty array - no content types shown by default. You must specify a content type if you want any to appear in the table's header / footer.

Examples

new DataTable('#myTable', {
	columnControl: ['order']
});

new DataTable('#myTable', {
	columnControl: ['order', 'searchDropdown']
});

new DataTable('#myTable', {
	columnControl: [
		{
			extend: 'searchList',
			ajaxOnly: true
		}
	]
});

new DataTable('#myTable', {
	columnControl: ['order', ['orderAsc', 'orderDesc']]
});

Related

The following options are directly related and may also be useful in your application development.