columnControl
Configure ColumnControl for DataTables.
Please note - this property requires the ColumnControl extension for DataTables.
Description
ColumnControl is an extension for DataTables which adds interaction and status controls to columns (as with most of the DataTables software, the clue is in the name!). The content types that ColumnControl can add vary from buttons that effect the table (e.g. triggering ordering of data), to user inputs such as search controls. There is a wide range of built in controls and more can be added if required. What content types are displayed, in what order, and where are completely configurable with ColumnControl's options.
If you are just starting out with ColumnControl, you might wish to read through the set of initialisation examples to get a good overview of the options, content types and layouts available.
This option (columnControl) is the root of working with ColumnControl and DataTable - the options given here are applied to all columns (although it is possible to override on a per column basis use columns.columnControl). To keep your development process easy and code clean it can take multiple forms as described below.
The most simple form is an array of strings, where the strings represent the content types to display. An inner array can also be used to create a dropdown - e.g.:
new DataTable('#myTable', {
columnControl: ['order', ['orderAsc', 'orderDesc', 'search']]
});
This form is simply a shorthand for:
new DataTable('#myTable', {
columnControl: {
target: 0,
content: ['order', ['orderAsc', 'orderDesc', 'search']]
}
});
If the object has a target property it is taken to be a configuration object for ColumnControl (objects can also be used to configure options for individual content types).
Multiple configuration objects can also be given in array, which is used to insert ColumnControl content into multiple different rows in the table header or footer - e.g. the following will show an order button on the first row, and a search input on the second:
new DataTable('#example', {
columnControl: [
{
target: 0,
content: ['order']
},
{
target: 1,
content: ['search']
}
]
});
Types
object
A ColumnControl configuration object defines which rows in the table header or footer its controls will be added to. This is done with the columnControl.target option which is required to make it clear that this is a configuration object. You would typically also specify columnControl.content to tell it want controls to put into the targets, although this can optionally be left undefined and columnControl.className given.
array
As an array this property can take two forms:
- It can be an array of configuration objects (per the above), which is used to insert ColumnControl content on multiple rows in the table header / footer.
- Or it can be a shorthand for
columnControl.content. In this case it takes the default target and class name, applying the content given in the array to the target.
Default
- Value:
undefined
ColumnControl will not be initialised and used by default in a DataTable. Defaults can be set using DataTable.ColumnControl.defaults.
Examples
Create a DataTable with a ColumnControl ordering icon (disabling the DataTables default).:
new DataTable('#myTable', {
columnControl: ['order'],
ordering: {
indicators: false,
handler: false
}
});Add a search input to each column in the second row of the table's header.:
new DataTable('#example', {
columnControl: {
target: 1,
content: ['search']
}
});Show a ColumnControl ordering button on the first row of the table header, and a search input on the search row, per column.:
new DataTable('#example', {
columnControl: [
{
target: 0,
content: ['order']
},
{
target: 1,
content: ['search']
}
],
ordering: {
indicators: false,
handler: false
}
});Related
The following options are directly related and may also be useful in your application development.