How to Add a Filterable Data Table on your Website

Creating Tables for your WordPress website can be tricky, If you first build a table on a Word file and then paste it into the WordPress Editor, it will not work. It will have some unclear and unresponsive borderlines, that’s not very useful.

Tables inside WordPress Pages/Posts is a great tool for presenting content. Furthermore, not all content is meant to be written down in long descriptive paragraphs. Some content is better presented in key points. And when the content is meant for online readers, the importance of to the point content is ten-fold.

Additionally, Static Tables will help you present data, but they are not responsive. That is why a Filterable Data Tables is a much better solution.

Create Table in WordPress with Elementor and Essential Addons.

To create Table in WordPress you need Elementor-the best Page Builder Plugin for WordPress. The Interface of Elementor is very intuitive. In fact, you can master this plugin overnight. You get 28+ elements with the Free version.

For creating a Filterable Gallery for WordPress you will need to install Essential Addons for Elementor. This addon comes with 30+ top-notch elements.

Elementor Interface

Open the Dashboard of your Website and navigate to Posts>Add New. If you have properly installed Elementor you will see a blue button labeled Elementor. Click on it to open the Elementor Interface.

The Elementor Interface has three distinct parts- side panel, footer panel, and the blank canvas.

Side Panel-It is divided into two columns. The first is Elements and the second is Global.

Footer Panel– Here you will see all the editing history. Additionally, you can check for responsiveness for your content. Click on the very left side icon to open the settings options.

Blank Canvas– The center part is mostly a blank canvas. You can either choose a template to jump-start your editing or use elements to build pages from scratch.

Once you are inside the Elementor interface look for EA Filterable Gallery.

Create Filterable Table-Step by Step

First, go over to the side panel and search for EA Data Table. Drag and Drop the element inside the Elementor interface. 

Fixing the Layout for the Table

You should start by adjusting the layout of the table. By default, you will see 4 Columns and 1 Row. But we want to build a 3by4 table, which means the table will have 3 Columns and 4 Rows.

To do so, first, go to Content>Header and remove one column. You can do it by clicking on the little cross icon at the right corner of the Column Card.

Now we need to adjust the Row fields for the Data table. For this example, we are building a 3by4 Table. We have already reduced the column fields to 3, now we need to add three more row fields.

Open the Content options. To remove a row field, click on the little cross icon beside the row field entries. Now focus on the part highlighted with a red box in the above screenshot. Look at the 5 cards and their label texts. The first card is labeled row:: Content. An entry like this marks the start of a row entry.

And below it, you see 4 column entry fields which are labeled col:: Content. Remember, we are building a 3 column table, that is why we will remove the very last col:: Content card. Done!

Now we need to add three more row entries.

To add the remaining three rows of data, click on the Add Item button. Simply, add a new row:: Content card and place three column:: Conent cards below it, repeat it 2 more time and you are done.

If you followed the instructions correctly you will have something like this.

Practice a different layout

In the previous example, we built a 3by4 table. It had 3 columns and 4 rows of entry. But what about a table with 4 columns and 2 rows. Well, the steps for building such a table are very similar to those illustrated above.

For a table with 4 columns and 2 rows of dat, the sequence of content cards will be 

• row:: content
• col::content
• col::content
• col:: content
• col::content

• row:: content
• col::content
• col::content
• col::content
• col::content

Now let’s finish building our 3by4 table.

Add Text to the Table Cards

Remember, every entry on the Table is presented as a separate card. Quickly head over to the Header options again and click on a card. The Header Cards have three fields. 

Similarly, go on and add row content.

Add Styling

Every Essential Addons element have the same customization options as every other Elementor element. Head over to the Style section where you can adjust the General, content and Header style for your Data Table.

Filtering

It is always a great idea to test the table as you create it. To filter the table you will need to click on the little arrow button beside the Header entries. You can have both numeric and alphabetic entries in the table. In that case, the filtering will place alphabetic entries in accordance to their sequence and then place numeric ones.

Wrapping Up!

Do comment below if you face any trouble while using EA Data Table element. In the meantime, here is a great blog where you will learn the use of Elementor and Essential Addeons in recreating famous Website designs.