Peter
Install HT Mega Addons for Elementor Plugin
01
On your WordPress dashboard go to Plugins > Add New, search for HT Mega Addons, install and activate it
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
Create Data Tables in Elementor
02
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
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
03
When you go to Content > Table Header, there are 3 columns for the header and you can edit them to whatever you want.
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
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 Go on to the third row and input your data to each column just like we did in the second row
You can go ahead and add as many rows and columns as you need.
Make Elementor Data Table Filterable
04
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.
Video: Create Free Data Tables in Elementor Tutorial
Check out more on this story on the link below.