Add a search field or dropdown for each column to the table head or foot row.
Individual Column Filtering
Tables have a general search field for all table columns by default, above the table. Depending on the table data, it can be more suitable to show a search field that allows each column to be filtered separately.
If rows have repeating values, it can also be helpful to show a dropdown or select element from which the visitor can choose a value. If you don’t want to show such a dropdown in the header or footer row, check out the Column Filter Dropdowns feature module that can add these outside of the table.
Feature description
This gives the visitor even more flexibility when interacting with the table. Here are two examples:
Text Inputs in the Header Row
A new second header row is inserted, with a text field for searching each column individually.
| Last Name | First Name | Company | ZIP code |
|---|---|---|---|
| Banks | Travis | Apple | 64655 |
| Cain | Lawrence | IBM | 98004 |
| Middleton | Dennis | 80913 | |
| Valenzuela | Lunea | Cisco | 51606 |
| Burgess | Quynn | Mozilla | 78965 |
Dropdowns in the Footer Row
The values in the cells in the last row are then used as the default text in the generated search input fields. Usually they should have the same content as the table head row cells.
| Last Name | First Name | Company | ZIP code |
|---|---|---|---|
| Banks | Travis | Apple | 64655 |
| Cain | Lawrence | IBM | 98004 |
| Middleton | Dennis | 80913 | |
| Valenzuela | Lunea | Cisco | 51606 |
| Burgess | Quynn | Mozilla | 78965 |
Usage instructions
To use these features with your tables, activate the “Individual Column Filtering” feature module on the “Modules” screen of TablePress Pro or TablePress Max. Then, configure the desired options in the “Individual Column Filtering” 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 | |
|---|---|---|---|---|---|---|---|
| Individual Column Filtering | datatables-column-filter | datatables_column_filter | string | "" (empty string) |
|||
| Individual Column Filtering | datatables-column-filter | datatables_column_filter_position | enum (table_head or table_foot) | table_head |
|||
| Individual Column Filtering | datatables-column-filter | datatables_column_filter_columns | string | "" (empty string) |