columnControl.className

Add a class name to a ColumnControl target row.
Please note - this property requires the ColumnControl extension for DataTables.

Description

When working with ColumnControl over multiple rows, you may find that you wish to style cells in the table's header / footer, a little differently from the default, based on the content that you want to put into the rows. A typical example is the input for a column search should typically be reasonably close to the title text, and you might not wish to have a border separating them.

This configuration option makes that sort of styling possible by adding class names to the tr for the ColumnControl target row (columnControl.target).

ColumnControl's CSS has two built in styles for this use case:

• dtcc-row_no-bottom-border - No border at the bottom of the row's cells
• dtcc-row_no-top-padding - no padding at the top of the row's cells.

The class name string that is assigned is freeform - you can add your own class names and styles in CSS as required for your table's look and feel.

Types

string

array

Default

• Value:

Empty string - no extra class added.

Example

new DataTable('#example', {
    columnControl: [
        {
            target: 0,
            className: 'dtcc-row_no-bottom-border'
        },
        {
            target: 1,
            className: 'dtcc-row_no-top-padding',
            content: ['search']
        }
    ]
});

Related

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