If you have a large datatable on your site, you would want to allow your users to search and help find specific data in a table with many rows and columns.
If you have an HTML table and you want to add a filter to it, you would have to add a jQuery or Javascript library. There are no ways to add a bootstrap table filter, you should know that bootstrap does not have a component that allows filtering and search.
The best way to add filters to tables is by using Tablesome a WordPress table plugin to quickly create tables with advanced table filters. It comes with a user-friendly and easy-to-use interface to filter tables.
To create a new table in Tablesome or to migrate your HTML tables to Tablesome, see this article.
Download Tablesome WordPress Table Plugin!
Tablesome Table Filter
#
On a Tablesome table, you can find Search and Filter options on the top right.
You can enable or disable filters in Tablesome settings, so if you don’t find the ‘Filter’ option please make sure that it is enabled in the settings.
In the table search bar, you can make a text search to find matching data in the table. It will search all of the table rows and columns and bring the matching records.
If you’re having a datatable and you want to search the rows in a specific column, you can use the Filter options. You can use the Filter to display only a subset of the items in a table, see only the items in which you are interested.
Using the Tablesome Filter you can do different types of table fillers such as:
- Single Criterion & Single Column
- Multiple Criteria & Single Column – Range Filtering (Number & Date)
- Multiple Criteria & Multiple Columns
Before we see how to use the filters, let’s see the different components of the table filter.
Table Filter Components #
Tablesome filter has an advanced filter UI design which is one of the best interfaces compared to other table filter UI examples on the internet.
Let’s see the basic components of the filter:
The filter option comes with 3 fields:
- Column – choose the column that you want to filter
- Operator – choose the operation/function that you want to perform (Is, Is not, Contains, Does not contains, etc.,)
- Context – give the value that you want to filter
Since your datatable can have different data in different formats that as Text, Number, Date, etc., Tablesome Filters come with different types of operators in the filter.
Text Filter Operators #
For columns with Text data format values (Text, Text Area, Email, etc,.) you have a set of text operators.
- Contains – brings only the rows that contain matching words or phrases in the query
- Does not contains – brings all the rows that do not have matching word or phrases
- Is – brings only the rows that exactly match word or phrase
- Is not – brings all the rows do not exactly match word or phrase
- Starts with – brings only the rows that start with the specified word or phrase
- Ends with – brings all the rows that start with the specified word or phrase
- Is empty – brings only the empty rows
- Is not empty – brings all the rows with values, that are not empty
Number Filter Operators #
For columns with number values, you get a set of comparison operators with which you can compare two numerical values.
- = (equal sign) – brings the rows with values that are equal to the query (A1=B1)
- != (not equal to sign) – brings the rows with values that are not equal to the query (A1!=B1)
- < (less than sign) – brings the rows with values that are lesser than the query (A1<B1)
- > (greater than sign) – brings the rows with values that are greater than the query (A1>B1)
- <= (less than or equal to sign) – brings the rows with values that are lesser than or equal to sign the query (A1<=B1)
- >= (greater than or equal to sign) – brings the rows with values that are greater than or equal to the query (A1>=B1 )
Date Filter #
Date values are one of the most common data that you find in many data sets. When you have large datatables with date values on your WordPress table, you would want to filter the date values.
Tablesome also gives you advanced filter filtering for date values. It comes with specific operators and contexts for date values.
Date Filter Operators #
- Is – brings the rows that match the date context
- Is not – brings all the rows that do not match the date context
- Is before – brings the rows that are before the date context
- Is after – brings all the rows that are after the date context
- Is on or before – brings the rows that are on or before the date context
- Is on or after – brings all the rows that are on or after the date context
Date Contexts
#
Tablesome allows you to filter date values based on Exact and Relative Context.
Exact Contexts #
- Date (date picker)
- Month
- Year
Relative Contexts
#
- Today
- Tomorrow
- Yesterday
- Last 7 days
- Last 30 days
- Current Month
- Current Year
Only “Is” and “Is not” operators work for relative date contexts.
Date Range Filters #
If you want a datatable date range filter, you can use 2 date filters in succession. We will explain this in detail in the Single Column & Multiple Criteria section.
How to filter tables with Tablesome? #
As it is mentioned before you can use the table filter option in multiple ways. Let’s see them in detail.
Single Criterion & Single Column Filter:
#
If you want to filter the rows in only one column, that is ‘datatables filter rows by column value’,
- Go to the table and click the ‘Filter’
- Then click ‘Add Filter’ and it will open the table filter UI to filter a single column with a single criterion
- In the 1st field choose the column you want to filter
- In the 2nd field choose the operator and in the 3rd field give the value with which you want to filter the column rows.
Multiple Criteria & Single Column – Range Filtering (Number & Date):
If you want to filter the same column with multiple values,
- Follow the steps to filter with a single value (as mentioned above)
- Then click the ‘Add a Filter’ button and add another filter
- In the 2nd filter, choose the same column, to filter the same column with multiple values
- Then select the operator and give the value with which you want to filter
- You can add as many filters you want for the same column and datatable will only display filtered values
If you are looking to filter Number and Date values within a range (i,e. Intervals), you use this method and use it as a Number Range filter and Date Range filter.
Multiple Criteria & Multiple Columns Filter:
If you are looking to do complex table filtering, the Tablesome filter can help you. You can use it as a ‘DataTables filter for multiple columns’.
You can filter multiple datatable columns in Tablesome. To do this:
- Follow the steps above and add the first filter
- Then click ‘Add a Filter’ and in the second filter select a different column
- Choose an operator and value for this filter and the datatable will only display filtered values
- Repeat this process and add multiple filters for different data formats such as Text, Number, Date, and more
