Create Free Data Tables in Elementor with Search and Filters

Create-free-data-tables-in-elementor

In this tutorial, I’ll show you step by step how to create free data tables in Elementor. You’ll be able to search, sort and filter tables including paginations and add unlimited rows and columns using HT Mega Addons for Elementor. The data table will be tablet and mobile responsive. 

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Create Free Data Tables in Elementor Tutorial

Install HT Mega Addons for Elementor Plugin

On your WordPress dashboard go to Plugins > Add New, search for HT Mega Addons, install and activate it (00:46)

After activation, HT Mega Addons will show up on the dashboard menu, click on it and in the next window you’ll see a list of widgets you can use. Find the Data Table widget and enable it then save changes (01:09)

Create Data Tables in Elementor

After enabling your widget, go to the Pages section and open any page with Elementor.

In the Elementor editor, use the (+) icon to add a new section, then go to the Widgets area and search for the Data Table widget, drag it to your canvas (01:27)

Tip:

The Data Table widget should have the HT label on it, and if you can’t find it you can just scroll down to the HT Mega section to locate it.

Click on your new table, in the Edit Data Table area on the right, under Table Layout, you’ll find a couple of layout options you can use, select Layout One.

Under Style, you’ll be able to style your table to your preference, for example, you can change the colours, background, etc. However, in this tutorial, we’re just going to focus on the content of the table (the data).

Adding Content To Elementor Data Tables

When you go to Content > Table Header, there are 3 columns for the header and you can edit them to whatever you want.

For example;

Change the first column to ID, the second from Name to Fname, in the third column change Designation to Role, then in the fourth change Email to Contact (03:05)

Go to the Table Content option;

Here, there’s one row and four columns.

If you want to add more rows, the simplest way to do so is to duplicate the first one. And you can do the same with columns; duplicate a column then drag it to just below the new row, then duplicate it three times to make four columns (03:41)

Go to the new row and under the first column, in the ID column go to the Cell Content option and rename it to 2, go to the next column and under Cell Content add the first name, next column add the role and the contact in the next (04:37)

Go on to the third row and input your data to each column just like we did in the second row (05:40)

You can go ahead and add as many rows and columns as you need.

To Read: Create Custom Elementor Tables with Images, Links, Icons and Lotties. Import Tables from CSV and Google Sheets

Make Elementor Data Table Filterable

Select your table and go to Content > Table Layout, enable the Show Sorting options option, and when you do this you’ll get a couple of other options you can enable. 

Pagination will show the pages at the bottom, Searching; you’ll be able to type a keyword and search your table, Ordering will enable you to organise your entries and choose how many to show, and the Footer info displays your table info at the bottom.

After adding your data to your table and making it sortable you can go ahead and make changes to for example your header Background, your Typography, etc on the Table Header and Table Body options under Style, you can basically change anything in the table to your preference, and when you’re done, hit the Update button and you can preview it.

create free data tables in elementor

Also Read: Free Elementor Pricing Table Tutorial: Create Pricing Tables using Premium Addons

In closing

That’s how you can use HT Mega Addons to create a data table for free; add content to it and make it filterable/sortable, as well as do even further customization and styling on it for your Elementor website.

For any questions or comments about this or any other tutorial, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.

Also Read. . .

Leave a Comment

Your email address will not be published. Required fields are marked *

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

Elementor is the WordPress most popular page builder with over 10 million active users

Get My Free WordPress
Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design journey.

Intermediate and advanced WordPress users have found it helpful too.

By joining my list, I promise you’ll never be spammed! 🙂

cropped img of the toolkit