Create Free Data Tables in Elementor with Search and Filters

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)

8flV3yj9 enlRARP87GN5bs73HbNr8NF6NjqzngSGPOk5xuj2wMIc452BxZlbcb90c4eeMmJc0M

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)

CFVCBj7CEMUwX0t80SdK8kxv9YH7ht91zIdu6ptb7e9tj38zibPggJa59gUsQsfBNMCPnqCjTMOb7GUhPiegWBoBwSFdLE YNR6fkzcAn6Ez61646r bem61XyQcY1pRFKmqMi 7

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)

UsuELnteqfzUiRSs2BY3wVN6QCfJTu9n99RDe6lvfyB9ZVqhqFkwNE1pKH g27mdlCwyxUy7rcdZ6nLfzlkASC7tvuwnqAA W6tX6NiTfaMWSeuRhn4DBcBvnpI0gLV5m1XF11Fl

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)

DZ 3WBbaKs8X2M3CdIHBNjGrPSsNy LamnfZrjxnwivRbIjzTDXHVUedeaDEuMWhMpwj9Hg mt FQZkDOsg8nufR5kNpjSV9Hb SguQ9Quh0uEmiWvu tGfAid6E057fA4enYTad

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)

W7ttzsXOhYvrh6crC5QYodmoVgsW7Ixa8ddoxlnpcgtSIkuknw6tFw080 NLl5FjdqRVUd R1jtB9K gYRfKR0hEYMJm4ou1AobolNomTteHvVgCQTBciOVDurbtApK9aGh8wtu6

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)

SR2AqLH6d2KpBbPJW1ca0qwOANiZbNheuR

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.

5QkMIy2ny3VQFoSosH8hWlbHglPv35E 6MmS yTnR KEsZpArX31a5Mq3PY1HzcJxbrlRyCvmEaT6DPm BrCzFboQ28vCqAuFt4iG

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. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

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

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

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