Add Google Sheets to Elementor Table Widget Tutorial

Table Widget for Elementor allows you to easily pull data from Google Sheets then display those Google sheets via Elementor Table Widget within few simple steps.

Now, you can use Premium Table Widget for Elementor to show off and customize your Google Sheets that you want to display on your website. Furthermore, you can edit your Google Sheets without any need to update anything on Elementor Table Widget, as it will automatically update (republish) any changes you made within few minutes after saving the Google Sheet.

Click here to check Premium Table Widget Tutorial and Premium Table Widget demo.

Premium Table Widget For Elementor Page Builder

Search for “Premium Table” widget on Elementor Editor, you will find Premium Table Widget for Elementor.

Premium Table Widget Element in Elementor Editor
Premium Table Widget for Elementor

Google Sheet [Part1]

We are assuming that you already have a spreadsheet on Google Sheets.

So, to add Google Sheets into Elementor Table Widget.

1- First, Go to your Google Sheet file, from the toolbar click on File.

Spreadsheet on Google Sheets with Arrow Points at File
A Spreadsheet on Google Sheets Will Be Displayed Using Elementor Table Widget

2- Click on [Publish to the web].

Google Sheets, Toolbar File List is Opened, and Arrow Points at Publish to The Web
Google Sheet, File Options – Publish to the web –

3- Select the Google Sheet that you want to add to your Table Widget for Elementor. You can also check if you want to make your Google Sheet automatically republish when changes are made (Recommended) so that any changes happen to your Google Sheet will appear on Elementor Table Widget within few minutes [5-10 minutes] after the changes are saved on Google Sheets.

Google Spreadsheets With Elementor Table Widget
Google Sheet – Publish to the web – Options

4- Select the following format [Comma-seperated values (.CSV)].

Generate CSV for Premium Table Widget for Elementor
Google Sheet Link Embed Options [Comma-separated values (.csv)]

5- Copy the link from the Google Sheet which appears in “Publish to The Web” popup window to use it in your Elementor Table Widget.

Elementor Table Widget With Google Spreadsheet
Google Sheet Link, Will Be Used on Table Widget For Elementor to Display Google Sheet

Table Widget For Elementor [Part2]

And now we will move to the next step, you have to do the settings for the Elementor Table Widget to display your Google Sheet on your webpage.

Go to Premium Table Widget -> Content

6- Data Type, Select [CSV File].

Elementor Table Widget CSV File
Select “CSV File” as Data Type for Your Google Sheet on Elementor Table Widget

7- File Type, Select [Remote File].

Table Widget for Elementor Remote File Option
Select “Remote File” as File Type for Your Google Sheet on Elementor Table Widget

8- Data Separator: Use a separator to separate between the data cells. You can write comma [,].

Premium Table Widget for Elementor CSV File URL
Add File URL from Google Sheet

9- File URL: Paste the URL that was copied from your Google Sheet. Refer back to step [5].

10- “Render First Row As” You can select one of two choices either Header or Body.

  • Header: Will give the first row a distinctive styling from the rest of the table.
  • Body: Will make the first row similar to the rest of the table.
Elementor Table Widget Header Type Option
There are two Options to Select from how to Render First Arrow As: Header, Body

This is how the data pulled from Google Sheets will looks like when you insert it into the Elementor Table Widget.

How Google Sheets Appear Through Premium Table Widget for Elementor
Google Sheet Rendered on Table Widget For Elementor

And this is how the Table Widget for Elementor looks after applying some basic styling. For more details about how to style the Elementor Table Widget, you can check Table Widget Tutorial.

Elementor Table Widget is Displaying Google Sheet .CSV File with Red Mono Colors
Google Sheet Styling Using Table Widget For Elementor [1]
Google Sheets Displayed Through Premium Table Widget for Elementor With Blue and Gray Mono Colors
Google Sheet Styling Using Table Widget For Elementor [2]

Note: HREFs (links) within Google Sheet will be delivered as a text on Elementor Table template.

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.