Since: SearchPanes 1.0.0

Define the value for an option of a custom pane.
Please note - this property requires the SearchPanes extension for DataTables.


As standard, the value of the value is undefined.

searchPanes.panes.options.value can be either a string or a function. If it is a string then a straight === comparison will be performed between it and the data in the table. It is worth noting that this cannot be the case for completely custom panes with no column attached to them as SearchPanes does not know what to compare it to. In this case SearchPanes must use a function.

Setting searchPanes.panes.options.value to be a function allows searchPanes to use that function to search for results from the DataTable. The data from the row and the row index are passed into this function. The context is the parent DataTable. The internals of the function are down to the behaviour that you wish to create. Returning true from the function will include that row in the results, conversely false will exclude the row.

Having the value property as a function means that comparisons can be made at a variety of different levels of complexity, all completely open to the developers needs.

The example below shows a very simple function which compares data from multiple columns.




If searchPanes.panes.options.value is a string then it will be used to decide whether to include rows in the results by directly comparing against the data in the table.



If searchPanes.panes.options.value is a function then this function will be used to decide whether a row is to be included or not. It returns a boolean value indicating this. The context of the function is the parent table. The data for the row is also provided so that the function is able to make an informed decision.


Boolean indicating whether the row should be included in the results or not.


  • Value: Undefined

The default value of searchPanes.panes.options.value is undefined as custom panes must be externally defined.


Define custom pane options:

new DataTable('#myTable', {
	layout: {
		top1: {
			searchPanes: {
				panes: [
						options: [
								label: 'Accountants in Tokyo',
								value: function (rowData, rowIdx) {
									return rowData[2] === 'Accountant' && rowData[3] === 'Tokyo';


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