If you have ever wanted to create custom elementor tables or import CSV tables with images, icons, Lottie animations, and hyperlinks, that are sortable, searchable, and also responsive, or if you simply want to use your remote tables from Google sheets in Elementor, then this is the table tutorial for you!
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 Custom Elementor Tables Tutorial
What we’re going to cover in this article:
- How to use custom data tables with images, links, icons, Lottie images
- How to use CSV imported tables in Elementor
- How to use links and images in imported tables
- How to use remote files to import tables into Elementor
- How to style tables in Elementor
What You’ll Need
For this tutorial, you’re going to need the Pro version of the Premium Addons for Elementor. This is where you’ll find the Table widget that we’re going to use.
To use the Premium Addons Pro, you should also have the free version. With Premium addons (Pro) you’re able to dynamically link your tables to several resources on your website.
To install the free version of Premium Addons for Elementor, go to your WordPress dashboard > Plugins, search for Premium Addons, install and activate it.
You should also be having Elementor page builder plugin installed and activated. The free version will do.
1. Create a Table with custom Data Rows and Columns
In this section of this tutorial, you’ll be able to create a table with custom added rows and columns; it’ll have images and icons, Lottie animations, links; whereby when you click on a link it takes you to that particular page, it’ll have filters (be searchable), for example, you’ll be able to search for anything within the table, you’ll also be able to choose how many records to display.
Go to Premium Addons for Elementor on your WordPress dashboard, under Widgets and Addons (05:08) find the Table widget and activate it.
Tip:
To avoid any disturbance with many different widgets running in the background of your site, you can switch off all the other widgets and addons you’re not going to use and leave only the Table widget enabled.
When you’re done enabling the table widget, click the Save Settings button.
Go to your dashboard > Pages and open up any page with Elementor (where you want to add a table), just go to that particular page and click Edit with Elementor (05:53)
In your Elementor editor, go to the Widgets area and search for the table widget called Premium Table then drag it to your canvas (06:31)
Select your table widget, under Content > Data > Data type, select Custom.
Under Header, add your titles; Name, Position, Company. Use the Add Item option (or duplicate the previous title) and add; Office, Age, Salary.
Click on the header to close it then go to Body;
There are 3 default columns and 3 default rows, click (X) to delete them.
Click the Add Item option, under Type select Row (that’s for the Name). For the first Cell, select the Cell Type to be Body, under Text, type in a name of your choice, under Icon Type select custom image; click on the Upload image option to add an image from your Media Library.
Click on the Add Item button again; this automatically takes you to the Position section, Cell Type is Body and the Text is Personnel Lead (you can use whatever text you want).
Add another item (that’s for the Company section), then just go to Icon Type and select image, then on the Upload image option select an image for your Library, like a company logo.
Add another item (for the Office section) with Cell Type Body and under Text, type in Edinburgh (or any other country of your choice).
Add another item for Age; Cell Type Body and under Text, type in any age.
Add the last item for Salary, Cell Type Body, and under Text, add any amount. And with this, you’re done with the first row of your table (09:41)
To create the second row;
Click Add Item, under Type choose Row
Add another item, Type Cell, Cell Type Body and under Text type a name of your choice.
Repeat the above steps and add information under position, company, office, age and salary.
However, in this row, the image under the Company cell is a Lottie animation. To add this, when you get to the Company, under Icon Type choose Lottie animation instead of custom image. Go to lottiefiles.com, click on the animation you want then copy its URL (). Go back to your dashboard and paste the link under Animation JSON URL.
Under Icon Size, you can increase the size of your Lottie, and under Alignment, you can align your animation to the left, right, or center.
If you want to link your Lottie or your image to another page, you can use the Link option and type in your page URL (the full URL with https://…).
If you want to link it to an internal page or a page on your website; go to Link and under Link Type select existing page then select a page from the dropdown (12:00).
After adding your content to the table, the next step is to style it up.
Click on the table widget, in the Edit premium table section on the left, go to Content > Advanced settings, enable the Sortable option, and enable the Search option as well. On the Placeholder option under Search, you can type in what you want to appear in your search box for example “search names, age or salary”. Enable the Show records option too.
Under Style, go to the Search option and under Border Radius, you can either remove or increase it by using the slider, depending on how you want your search box to look. Same with the Records option.
Go to the Head option; under Background color select white, do this for both Odd and Even options (14:36)
To make changes to the rows;
Click on the Rows option, under Style, you can set the Text Color to white (or another of your choice), under Background set it to purple. You can give it some transparency. Remember to do this for both Odd and Even options (15:54)
Let’s check out what this table looks like on Mobile;
In your Responsive Mode select the mobile device (16:19)
Select the heading widget, under Style > Typography, reduce the header size.
Select the table widget, go to Content > Display options, enable the Responsive option., this makes the table visible and gives it the horizontal scroll to be able to view all the data.
Under Advanced Settings, you can enable the Sort on mobile feature to be able to sort through the table.
You can also edit other options like the Padding and others to your preference.
If you want to use an Icon in your table;
Select the table widget and add a new item with Type of Row.
Add another item under this table row with a Type of Cell, Cell Type Body. For Text, type in a name.
Down on Icon Type select Font Awesome Icon, then on Icon, you can choose the icon you want, then you can adjust it to your preference using the Icon Size and Spacing options. You can also use the link option to link your icon to any other page (18:54).
Back to the Body option, use Add Item to add the rest of the cell info under Position, Company, Age and Salary. When you’re done, click the Update button.
2. Create Table from CSV (Comma Separated Values)
Create a new section on your page by clicking the (+) icon, then drag the Premium Table widget to your new section (20:20)
Select the table widget, under Content > Data, select CSV File for Data Type, on the File Type option select Upload File, on Data Separator, type in a comma (the comma is important here).
Moving on to the Upload CSV File option, first you need to have created a CSV file to upload here.
To create a CSV table, just use your Excel sheet, enter in your data for example a row with Name, Position, Age, and Salary, then add info to the cells (21:12).
Tip:
When you’re entering data into the Salary section (that’s in currency format), be sure NOT to use a comma, if you use a comma, Elementor is going to add another column into your table because the comma is a separator.
After adding your rows and cells with their info, go to File > Save as, give your table a name, then on File format choose .csv, and save (21:48)
Now when you click on the Upload CSV File option back in your editor, you can go upload your .csv file then insert it from the Media Library.
Under Render first row as, select header.
Go to the Display options, set the Table layout to Auto.
Enable the Responsive option so that your table is visible on a smaller screen device.
Under Table alignment, you can align your table where you want it.
Go to Advanced Settings, enable Search so that someone can search for specifics in the table. Under Search still, set the Border Radius to 0 pixels. On Placeholder, type in ‘Search anything’ (or whatever text you want your search to show).
Enable the Pagination option as well, here, you can be able to choose how many rows per page to display in your table, set it to 7.
Note:
The CSV imported table provides fewer options than the custom table we previously looked at. For example, the sort and record features aren’t provided.
To style up the table, go to Style, select the Head option, select white for Text color, yellow for Text on hover, then select purple for the Background color.
Do this for both the Odd and Even options (24:42).
Under Typography, change the font to ‘short stack’.
Go to Rows, set Text color to white on both Odd and Even.
For the Background color, select purple and add some transparency to it, that’s for the Even option. Over to the Odd option, under Background color give it purple with more transparency (25:52)
To adjust the table width;
Select the table widget, under Content > Display Options, set Table Layout to Fixed, and set the Width to 65% (26:14).
Go back to Style > Pagination, set Color to orange and Background color to white. On the Hover option, set the Color to white and the Background color to orange. On Active, set the Color to white and the Background color to purple. When you’re done, click the Update button and then preview (27:01).
3. Import Tables from CSV with images and links
Back in your editor, add another section then as you did with the previous table, go to your Widgets area and drag the Premium Table widget to your section.
Under Content > Data > Data Type, select the CSV file option, select Upload file for the File Type option and add a comma for the Data Separator.
For this next step, you need to have your CSV file ready. In this case, I have a sort of monthly savings table in excel with Name, Date, Particulars, Balance, Subtotal, and a Total (28:58).
But in this table, I also want to add images and links to another site or blog.
To do this:
Add a new row above the total, add a name in the row. To add a corresponding image to the name you need to copy an image URL from an already uploaded image on your WordPress website (29:33).
After copying your image link, paste it into your excel sheet but you have to use the HTML tags to add the image and the website link, as well as the person’s name (30:34)
In the next columns add the date, balance, and the rest of the info. Remember to NOT use any commas or quotations.
When you’re done go to File > Save as; give the table a name then save as a .csv file.
Tip:
You can also edit this table using a text editor like NotePad.
Back to the Upload CSV file option in your Elementor editor, select the .csv file you’ve just saved and insert it (32:22)
Next, let’s do some styling on the table. Under Style, select the Head option; set Text Color to white and Background Color to purple. Do this for bot Odd and Even.
Go to the Columns option; set the Background color to purple but with transparency, same for the Even option. Set the Text color to white for both Odd and Even column options. Update and preview (34:04).
To add a link to a particular data item; just go to your excel or text editor and make sure you use the HTML link code on that particular cell.
4. Import Remote Data from Google Sheets
This last feature provides you with the option to import data tables from your Google sheets without having to download and import the CSV file. All you have to do is link it to your premium tables widget.
To get this done; first, add a new section and drag the Premium Tables widget to it from your Widgets area.
Select the table widget, under Content > Data > Data type select CSV File, on File Type select Remote File this time instead of upload file, Data Separator is a comma.
On the File URL option, this is where you paste your link. With a table like this one in your Google sheets (36:16), go to File and select Publish to web, select Entire Document and Comma-separated values, then copy the link.
Make sure you enable the ‘automatically republish when changes are made’ option; so that whenever you make changes to your table in Google sheets, it automatically updates in Elementor, depending on the time you set on the ‘Refresh cached data’ option.
Paste your URL under the File URL option, and your new table will automatically show (37:06)
To style the table;
Select it and go to Style, on the Head option, set the Text color to white, and make the Background transparent, for both the Odd and Even options.
Under Content > Display options, set Table Layout to Fixed, and the Width to 55%
To add a rounded table border, go to Style, select the Table option, select solid for the Border Type, on Color add orange, and for the Border Radius, give it 30 pixels.
Select the Rows option, under Style, set the Text color to black for both Odd and Even. Change the Background color on the Even option to grey.
When you’re done, update and preview (39:32).
To make your table responsive, go to Content > Display options, enable the Responsive option. This way it will add a horizontal scroll when someone is viewing the table on a mobile device.
Closing remarks
That’s how you can create tables in your Elementor with links, images, icons, and Lottie animations using custom tables, CSV tables, and Google sheets with the Premium addons.
Thanks for sticking with me through this tutorial. If you have any questions or comments, let me know in the comments action. Don’t forget to subscribe to my newsletter and youtube channel for more tips and tutorials.
