Advanced filtering: How to use it in wpDataTables

To enable advanced filtering for a wpDataTable, you need to tick the “Advanced filtering” checkbox in the “Sorting and Filtering” tab of the table settings (it is preselected by default, it is also enabled by default for tables created with Table Constructor).

When this checkbox is checked, it is possible to define a filter type for each of the columns’ settings. Different filter types produce different filtering behavior. We will go through these in detail.

The Text filter type is a basic type: it will perform the search based on at fragment of text you enter. Only those rows where the text in the cell of this column contains the entered text will be shown in the table:

In this example, the “City” column has a text filter type assigned. When we enter the “na” fragment, only the rows that contain this fragment in the city names will be shown (i.e.,  Barcelona, Punta Cana). All other rows are filtered out.

If you need an exact match and do not want to show values containing a substring, enable the ‘Exact match‘ checkbox for this filter in the column settings on the ‘filtering’ tab.

The DateTime range filter type should only be used only when the column is a DateTime type, and when you want your users to be able to filter the table data by some ranges of date-times, e.g. “later than 1st June 14:00”, or “between 1st May 10:00 and 15th of August 21:00”, etc.

In this example the “Order Date” column has a Datetime Range filter type, where the “From” value is set to 22/04/2019 1:00 PM, and the “To” value to “22/04/2019 5:00 PM”. So, only the rows, where cells in the “Order Date” column have values between these 2 are shown.

The Time range filter type should be only used when the column is a time type, and when you would like your users to be able to filter the table data by some ranges of times, e.g., “later than 8:00 AM”, or “10:00 AM and 10:00 PM”, etc.

In this example, the “Arrival” column has a Time Range filter type, where the “From” value is set to“5:40 AM”, and the “To” value to “5:45 AM”. So, only the rows where cells in the “Arrival” column have the time value between these 2 are shown.

The Selectbox filter type is a very convenient filter, that allows front-end users to select one of the pre-defined values for some of the columns, and the table data will be filtered based on this value.

If you want to define possible values list for the select box, you must first go to the column settings for the desired column. In the “Data” tab and for “Possible values for column” select “Define values list“.

Click on the “Read from table” button, and you will see that all values from that column are added to the select box.
You can also enter the field you want to be displayed as selectbox values in the Values list. 

For example, if you need to filter by the “Fruits” column, you can put this example in the input field:

Apple, Peach, Lemon, Orange

You can also override the default generated values with this input field if you want them to display in a different order from their order of appearance in the table.

This same field is used for possible cell options in editable tables.

The filter is rendered on the front-end as a dropdown selectbox:

When a user chooses one of the values in the dropdown, the table is filtered, and only the rows that contain the selected value in the column will be displayed.

You can also use search in select-box and multiselectbox filter types if the option “Number of possible values to load” on the “Data” tab in column settings is set to anything except for “All“. Once you choose select-box or multiselectbox as filter type, open the filter, and you will see a place to enter your search.

If this option is set to “All“, then all possible values will be rendered in this select-box and the search field will not be presented.

Multiselectbox filter also supports the AND Logic where the data and the results must match all of the selected examples so, as in the example on the left if you look for “Asia” and “North America”, the results will pull only the rows where both are in the same cell.

When users click on this button, a pop-up appears, in which all the possible values of this column are listed with checkboxes:

When a user ticks any of the checkboxes, the table will be rendered simultaneously, and only the rows that contain the selected values in the column will be displayed.

The “OK” button closes the popup, and the “Reset” button unticks all the checkboxes.

The checkbox filter can appear in a popup, when the filter is rendered above the table, instead of rendering checkboxes directly on the page.

Sometimes, you will need to find the exact match for certain column in your table.
For example, if a multi-select field has possible values of Room 1, Room 2, Room3, … Room 10, Room 12, and someone selects filter value “Room 1” – it will return all records for Rooms that have number 1 in the first place.
To disable this, you can use Exact filtering option.

You can select Exact filtering if you want to allow an exact search to use exact match logic for filtering and disabling a partial match.

Sometimes, you may not want to allow your users to filter the table by all the columns, since some columns are less significant, and it makes sense to hide the advanced filter capability for them.
For this, you can click on the Filtering tab in the column settings and disable the filtering with the switch.

By doing so, this column will not have a filter on the front-end.

Additional settings when “Advanced filters” option is turn on is option “Clear filters button“. After clicking on this button all filters in table will be reset.