Since: SearchPanes 1.0.0

Allow panes to cascade under selection.
Please note - this property requires the SearchPanes extension for DataTables.


As standard, SearchPanes will display all of the options for that column throughout its operation. When searchPanes.cascadePanes is set to true, the panes will remove options which are no longer present in the currently displayed DataTable. The cascade action will occur when a selection or a deselection is made in one of the panes.

This is useful when dealing with large data sets with many different options as they are narrowed down accordingly as selections proceed.

Note: When using columns.searchPanes.combiner along with searchPanes.cascadePanes you must make sure that your data is appropriate for the selection that you make. searchPanes.cascadePanes was developed with the default or logic in mind, using and logic will work in the majority of cases, but may yield some unexpected results when deselecting in a very small amount of cases.

Note: When loading SearchPanes options over ajax, but then not using serverSide processing, neither searchPanes.cascadePanes or searchPanes.viewTotal are supported. This is due to the requirements for users to provide accurate data for the SearchPanes options, whose values change when using these two options. While it is still possible to enable these options, it is not advised and may lead to unexpected behaviour.




By setting the searchPanes.cascadePanes option to true, when a selection is made the options in the other panes which have no values currently being shown in the table hidden.


  • Value: false

The default value for the searchPanes.cascadePanes parameter is false. When this default value is in place no action will be taken to cascade the panes.


Enable cascading panes::

new DataTable('#myTable', {
	layout: {
		top1: {
			searchPanes: {
				cascadePanes: true