{hero}

columnControl.content

Since: ColumnControl 1.0

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

An array of content type identifiers. These are either:

  • string - where the value matches the name of the content type
  • object - with an extend property, the value of which is the name of the content type.
  • array - a dropdown wrapper, which can contain any other content type.

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

Specify a single content type in the header cell for each column - in this case an ordering button.:

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

Define multiple buttons using string identifiers.:

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

Use the searchList content type, with a configuration property set.:

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

Create a dropdown using an inner array:

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

Related

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