Add a search dropdown for each column above the table!

Column Filter Dropdowns

This feature module allows adding filtering dropdown boxes above the table. Each column will get a select box with all possible values from that column.

If you prefer to have such a dropdown field in the table’s header or footer row, check out the Individual Column Filtering feature module.

Feature description

This table shows the dropdowns in use:

Last Name	First Name	Birthday	Company	Phone	ZIP code	Country	Balance	Points	Rating
Banks	Travis	05/04/1969	Apple	200-4324	64655	Italy	$61.17	8	6.6
Cain	Lawrence	05/16/1994	IBM	701-3108	98004	United States	$54.81	5	2.5
Middleton	Dennis	01/10/1992	Google	580-9501	80913	Spain	$24.83	4	5.2
Valenzuela	Lunea	01/09/1966	Cisco	970-8655	51606	Germany	$74.07	7	3.7
Burgess	Quynn	09/24/1988	Mozilla	430-8943	78965	France	$16.13	8	2.9
Lott	Lillith	12/10/1978	Dell	587-2289	88178	Australia	$30.12	1	7.9
Freeman	Cheyenne	01/28/1981	LG	396-5473	14711	Germany	$49.82	1	6.0
Houston	Jorden	05/03/1978	Adobe	970-1182	96036	Canada	$47.31	2	1.5
Harris	Merritt	12/29/1989	Apple	160-5977	25178	United States	$77.33	6	0.1
Gregory	Brynn	01/13/1994	Adobe	663-6039	91558	Spain	$90.24	9	8.2
Curry	Mason	03/15/1969	Sony	115-4778	87513	Australia	$21.68	5	6.6
Holland	Alyssa	06/25/1976	Xerox	704-4977	97921	Canada	$50.31	7	9.5
Logan	Shay	09/13/1968	IBM	687-6482	03023	United States	$46.39	8	7.6
Moran	August	07/04/1986	Cisco	651-1214	60737	India	$22.64	1	7.5
Vasquez	Kelsey	03/31/1968	Samsung	470-7358	79655	Germany	$84.05	3	4.5
Stein	Lawrence	10/15/1960	Toshiba	929-5407	36044	Italy	$77.11	2	8.6
Battle	Wylie	01/03/1988	Facebook	368-2276	37585	Australia	$46.37	10	2.8
Booker	Logan	12/16/1975	Apple	830-5701	22074	United States	$40.71	1	9.0
Gilbert	Chaney	06/06/1970	Sony	132-5560	89630	Canada	$78.45	9	1.2
Buckley	Stone	09/11/1980	Cisco	422-7998	74057	United States	$30.01	2	7.9

It is also possible to configure which columns should get a filter dropdown and in which order these should be shown!

Use this feature with a TablePress Premium plan today

Usage instructions

To use these features with your tables, activate the “Column Filter Dropdowns” feature module on the “Modules” screen of TablePress Pro or TablePress Max. Then, configure the desired options in the “Column Filter Dropdowns” section on the table’s “Edit” screen.

Configuration parameters

To configure this module’s features, you can also use these configuration parameters in the “TablePress Table” block, the Elementor widget, or in the Shortcode that you are using to embed the table:

Module	Slug	Configuration parameter	Name	Description	Type	Default value
Column Filter Dropdowns	datatables-columnfilterwidgets	datatables_columnfilterwidgets	Column Filter Dropdowns	Whether to add Column Filter Dropdowns.	boolean (`true` or `false`)	`false`
Column Filter Dropdowns	datatables-columnfilterwidgets	datatables_columnfilterwidgets_columns	Column Filter Dropdowns Columns	Columns for which Column Filter Dropdowns should be shown.	string	`""` (empty string)
Column Filter Dropdowns	datatables-columnfilterwidgets	datatables_columnfilterwidgets_exclude_columns	Column Filter Dropdowns Exclude Columns	Columns which should be excluded from getting Column Filter Dropdowns. This setting is deprecated. Use `datatables_columnfilterwidgets_columns` instead.	string	`""` (empty string)
Column Filter Dropdowns	datatables-columnfilterwidgets	datatables_columnfilterwidgets_separator	Column Filter Dropdowns Filter Term Separator	String separator, e.g. “, ” that is used to split cell content to get individual filter terms.	string	`""` (empty string)
Column Filter Dropdowns	datatables-columnfilterwidgets	datatables_columnfilterwidgets_max_selections	Column Filter Dropdowns Maximum selections	The maximum number of allowed selections from each filter dropdown. Setting this to 1 will turn the dropdowns into classical select fields, that directly show the selection in the dropdown, instead of below it.	string	`""` (empty string)
Column Filter Dropdowns	datatables-columnfilterwidgets	datatables_columnfilterwidgets_group_terms	Column Filter Dropdowns Filter Terms Grouping	Whether to list the selected filter terms in one common section instead of underneath each dropdown.	boolean (`true` or `false`)	`false`

Advanced configuration

If you don’t want a dropdown box for every column, you can add another parameter to the Shortcode, with a comma separated list of columns, like

[table id=123 datatables_columnfilterwidgets=true datatables_columnfilterwidgets_exclude_columns=2,3,4 /]Code language: plaintext (plaintext)

This would add a dropdown box for all columns, except columns 2, 3, and 4.

Note that the column numbers here are meant without those columns that are hidden on the “Edit” screen of the table, i.e. only columns that are visible in the table should be counted when determining these column numbers.

To set a limit on the number of allowed selections per dropdown box, add this parameter:

[table id=123 datatables_columnfilterwidgets=true datatables_columnfilterwidgets_max_selections=1 /]Code language: plaintext (plaintext)

With that, only one value can be selected from each dropdown box at a time. The visitor would have to remove it by clicking on it, before he can select another filter value.

If your filter columns contain a list of possible keywords, e.g. a list of colors (“red, blue, green, yellow”) where filtering should only be done for one color, you can define the separator characters for these keywords, so that the list is split automatically:

[table id=123 datatables_columnfilterwidgets=true datatables_columnfilterwidgets_separator=", " /]Code language: plaintext (plaintext)