Create a data table in Wordpress with advanced search capabilities
Even though there are many Wordpress plugins that help you to add a table into your Wordpress post or page, if you need advanced search capabilities you need to go premium.
In this article we discuss how to use Tabulizer for Wordpress to implement the following features with just a few clicks:
- Do a column search filtering, instead of table wide search.
- Use input text controls, or select from list controls where it makes more sense.
- Do a numeric range search to filter rows with values that fall into a certain range.
Create the table template that you will use for the table creation. Note that the table template is called ruleset to emphasize the fact that is more than styling rules and it will be created only once and it can be use for all the subsequent tables that share the same styling and features. The ruleset can be created:
- inside the plugin, using the available tools
- manually by editing the appropriate text files (for advanced users only)
- using the online ruleset creation wizard
In this tutorial we will use the first option.
- Login in the backend of your Wordpress site and go to Tabulizer plugin. Select the Ruleset Archives submenu and click on the New Archive toolbar button.
- Fill in the Archive Title and Archive Description fields. When ready click on the Save & Close button.
- The archive is now created but contains no rulesets. In order to add a new one, click on the archive's title or on the View link in the actions column.
- Click on the New Ruleset toolbar button to add our first ruleset to the archive.
- Fill in the Ruleset Title and Ruleset Description fields. When ready click on the Save & Close button.
- The ruleset now is created, but contains no rules. Click on the ruleset's title or the View link in the actions column to add out first rule.
- Now it comes the interesting part! All table features can be expressed in rules, so adding a rule will add to the table the desired feature (styling or functionality). In this example will add a table rule that will add search capabilities according to our specifications. The important settings are shown in the image below:
Some explanation is needed here:
Element: Table - The element is "table" because the rule will affect the whole table, not just some rows, columns or cells.
Range: all - The range "all" means that the rule will be applied in all cases.
- Enabled - We check this to enable column filtering
- Header Row - The row that will contain the column filters.
- Header Size - The size of the table header (in rows). All rows that belong to the table header will be excluded from any filtering.
- Column List - Here we specify which for columns we will add filters and the type/search method of the filters. In this example, the value 1:input,2:select:exact,3:input:numeric_comma means:
Use an input text to filter values in column 1. The search method is set to default that will filter all rows that contain the search keywords in the particular column.
Use a select control to filter values in column 2. The search method is set to exact that will filter all rows that are equal to the search keywords in the particular column.
Use an input text to filter values in column 3. The search method is set to numeric range that will filter all rows that have values that are within the given range in the particular column. Note, that since numbers can have a decimal part which sometimes is the comma (e.g. 12,32) and some other is the period (e.g. 12.32) you need to specify that explicitly. In this example we have used the search method numeric_comma which will use the comma as the decimal part separator. A typical search phrase is > 10 that will match all values greater than 10 or <100 that will match all values less than 100 or 10 & 100 that will match all values between 10 and 100.
Create the table using the ruleset we just made.. Go to your Wordpress editor and invoke Tabulizer by clicking on the appropriate editor button.
Type or copy-paste the table data and select the archive and the ruleset we just created.
When ready click on the Convert button to apply the selected ruleset and then the Insert button to insert the produced HTML into the post.
Let's see how it looks like on the back-end and on the front-end:
This was the bare minimum example. You could have added more rules for styling, data formatting, responsiveness, etc. After you grasp the basic principles behind Tabulizer you will be able to do really amazing things.