columns.searchPanes.className

Since: SearchPanes SearchPanes 1.0.0

Add a custom class name to a pane.
Please note - this property requires the SearchPanes extension for DataTables.

Description

By setting a class name, specific panes can be targeted for custom styling.

Custom Panes can have custom classes applied in a similar way to how columns.searchPanes.dtOpts are applied to panes. You can declare the columns.searchPanes.className option within an object of the columnDefs array - this will apply the custom class to that pane.

Type

string

Description:: Adds a custom class to the specified pane based on this string.

Default

Value: undefined

The default value for the searchPanes.className option is undefined as the standard should be without any custom classes.

Examples

Setting a custom class on a pane:

$('#example').DataTable({
        dom: 'Plfrtip',
        columnDefs: [
            {
                searchPanes: {
                    className: 'myCustomClass'
                },
                targets: [3]
            }
        ]
    });

Setting a custom class on a custom pane:

table = $('#example').DataTable({
            dom: 'Plfrtip',
            searchPanes: {
                panes: [
                    {
                        header: 'Custom',
                        options: [
                            {
                                label: 'Accountants from Tokyo',
                                value: function(rowData, rowIdx) {
                                    return rowData[1] === 'Accountant' && rowData[2] === 'Tokyo';
                                }
                            }
                        ],
                        className: "PaneSpecific"
                    }
                ]
            }
        });