Heavily improved in TablePress 2.4!
Add a search dropdown for each column above the table.
This feature module is part of the TablePress Premium plans.
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.
Feature description
This table shows the dropdowns in use:
Last Name | First Name | Birthday | Company | Phone (Ext.) | 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 | 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 | 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 |
New feature! It is also possible to configure which columns should get a filter dropdown and in which order these should be shown!
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: JSON / JSON with Comments (json)
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: JSON / JSON with Comments (json)
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: JSON / JSON with Comments (json)
Last Name | First Name | Birthday | Company | Phone (Ext.) | 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 | 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 | 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 |
Usage instructions
To use this feature with your tables, enable the “Column Filter Dropdowns” module on the TablePress “Modules” screen.
To use this feature with your tables, choose the desired options on the table’s “Edit” screen.
On this page