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