columns.searchPanes.className

Since: 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:

new DataTable('#myTable', {
	layout: {
		top1: 'searchPanes'
	},
	columnDefs: [
		{
			searchPanes: {
				className: 'myCustomClass'
			},
			targets: [3]
		}
	]
});

Setting a custom class on a custom pane:

table = new DataTable('#myTable', {
	layout: {
		top1: 'searchPanes'
	},
	searchPanes: {
		panes: [
			{
				header: 'Custom',
				options: [
					{
						label: 'Accountants from Tokyo',
						value: function (rowData, rowIdx) {
							return rowData[1] === 'Accountant' && rowData[2] === 'Tokyo';
						}
					}
				],
				className: 'PaneSpecific'
			}
		]
	}
});