Managing table data manually in WordPress can be time-consuming, especially when the data changes frequently. That’s where TableMaster makes things much easier.
With TableMaster, you can directly connect Google Sheets to your WordPress website and display spreadsheet data in a clean, organized table layout inside Elementor. Whenever you update data in Google Sheets, you can quickly refresh it on your website without rebuilding the table each time.
TableMaster includes three dedicated table elements for different types of content: Content Table, Data Table, and Dynamic Table.
For this tutorial, we’ll be using the Data Table element to pull data from Google Sheets.
Let’s go step by step and see how you can connect Google Sheets with your WordPress website using Elementor and TableMaster.
Create a Google Sheets API Key#
Before TableMaster can access your spreadsheet data, you first need to generate a Google Sheets API key. This key acts like a secure connection between Google Sheets and your website.
Don’t worry if this sounds technical; the setup process is quite simple once you follow the steps below.
Step 1: Create a New Project in Google Cloud Platform#
First, you need to create a project inside Google Cloud Platform.
- Open the Google Cloud Platform dashboard.
- At the top of the page, click on New Project.
- Enter a name for your project. You can use any name that helps you identify the project easily.
- Next, select the Organization and add the Parent Resource.
- Once done, click the Create button.
Google will now create your project and redirect you to the dashboard.
Organization: An Organization in Google Cloud is basically the top-level account that manages all projects, users, permissions, and resources within a company or institution.
This option usually appears when you’re using a:
- Google Workspace account
- Company email
- School or institutional account
For example, if someone is using an email like:
- name@company.com
- name@school.edu
Google may automatically place their projects under that organization.
Parent Resource: A Parent Resource in Google Cloud simply refers to the folder or organization under which your project will be created. It is mainly used in company or team Google Workspace accounts to help organize multiple projects properly. For example:
- If you’re using a personal Gmail account, you may not see this option at all.
- If you’re using a company or organization account, Google may ask you to choose: an Organization or a Folder/Parent Resource
Step 2: Enable APIs and Services#
Now that your project is ready, the next step is enabling the required Google APIs.
- On the Google Cloud Welcome page, click APIs & Services.
- Inside the dashboard, click the + ENABLE APIS AND SERVICES button.
- This opens the Google API Library, where you can search for various Google services.
Step 3: Enable the Google Sheets API#
Since we want to fetch spreadsheet data, we need to enable the Google Sheets API.
- In the search bar, type Google Sheets API.
- Click on the API from the search results.
- Press the Enable button.
Once enabled, your project can now communicate with Google Sheets.
Step 4: Create Credentials#
After enabling the API, Google will ask you to create credentials.
- Click the CREATE CREDENTIALS button.
These credentials help authenticate the connection between your website and Google Sheets.
Step 5: Choose the Credential Type#
Now Google will ask you a few setup questions.
- Select Google Sheets API as the API you’re accessing.
- Under the data type section, choose User Data.
- Click DONE to continue.
Step 6: Configure the OAuth Consent Screen#
Next, you’ll need to configure the OAuth Consent Screen. This step helps Google identify which application is requesting access to the Google Sheets API.
- In the OAuth Consent Screen, fill in the required details such as:
- App Name
- User Support Email
- Developer Contact Information
- Once you’ve added the details, click Save and Continue.
- On the next screen, under the OAuth Client ID section, select Web Application as the application type.
- Enter a name for your application and click Next to continue.
Google will now generate your OAuth credentials successfully.
Step 7: Download Credentials#
On the next screen, you’ll see the generated OAuth credentials. You can either download the credentials file or copy the details for future use if needed.
Step 8: Generate Your Google Sheets API Key#
Now it’s time to generate the API key that TableMaster will use to access your Google Sheets data.
- Click the + CREATE CREDENTIALS button once again.
- From the dropdown menu, select API Key.
- As soon as you select the option, a popup window or side panel will appear with additional settings.
- Under the API Restrictions section, choose Google Sheets API from the available options.
This helps restrict the API key so it only works with Google Sheets, making your integration more secure.
Once done, Google will generate your API key. Copy the key, as you’ll need it in the next step while configuring TableMaster.
Next, keep the Authenticate API calls through a service account option unchecked.
After that:
- Under Application Restrictions, select None.
- Click the Create button.
On the next screen, your API key will be generated automatically. Copy the key and keep it handy, as you’ll need to add it to the TableMaster settings in the next step.
Add the Google Sheets API Key to TableMaster#
Now that your Google Sheets API key is ready, the next step is to connect it with TableMaster.
- Open your WordPress Admin Dashboard.
- Navigate to: Elementor >> Editor >> TableMaster
- Open the Integration tab.
- Paste your API key into the Google Sheets API Key field.
- Click the Save Changes button.
Once saved, your website will be connected to Google Sheets and ready to fetch spreadsheet data directly into your tables..
Import Data From Google Sheets into TableMaster#
Now that the API setup is complete, you can start displaying your Google Sheets data directly on your website using the TableMaster Data Table element.
Let’s see how to set it up.
Step 1: Add the Data Table Element#
- Open the page or template you want to edit in Elementor.
- Add the TableMaster Data Table element to your page.
- In the element settings, select Google Sheets from the Source dropdown.
Once you select Google Sheets as the source, additional settings related to Google Sheets integration will appear. These options allow you to connect your spreadsheet and control which data should be displayed in the table.
Get Your Google Sheets URL#
To fetch and display data from Google Sheets, TableMaster needs the URL of the spreadsheet you want to connect.
Before copying the link, make sure the Google Sheet is publicly accessible. Otherwise, TableMaster won’t be able to retrieve the data.
Here’s how you can get the correct Google Sheets URL.
How to Get Your Google Sheets URL#
- Open the Google Sheet you want to display on your website.
- Click the Share button located in the top-right corner.
- Under General Access, change the permission to Anyone with the link.
- Click the Copy Link button.
- Press Done to close the popup window.
Now return to Elementor and paste the copied link into the Google Sheets URL field inside the Data Table settings.
Next, you need to define the Table Cell Range to display table data.
How to Get the Table Cell Range#
- Open your Google Sheet.
- Select the group of cells you want to display on your website.
- From the top menu, navigate to: Data >> Named ranges
- Google Sheets will display the selected cell range.
- Copy the range and paste it into the Table Cell Range field inside the TableMaster Data Table settings.
Once you add the range, TableMaster will instantly fetch and display only the selected spreadsheet data inside your table.
This feature is especially useful when working with large spreadsheets where you only want to display a particular section instead of the complete sheet.
Automatically Refresh Google Sheets Data#
One of the biggest advantages of connecting Google Sheets with TableMaster is that your table data can stay updated automatically.
Inside the Data Table settings, you’ll find the Refresh Data After option.
Using this setting, you can choose how often TableMaster should fetch updated data from your Google Sheet. This means whenever you make changes to the spreadsheet, the updated information can automatically appear on your website after the selected refresh interval.
With automatic data refresh enabled, you can manage everything directly from Google Sheets without manually updating the table on your website every time changes are made.
Wrapping Up!#
Importing Google Sheets data into your WordPress website becomes incredibly simple with TableMaster’s Data Table element.
Instead of manually updating tables inside WordPress every time your data changes, you can manage everything directly from Google Sheets and let TableMaster handle the display automatically.
This setup is especially useful when working with frequently changing data or collaborative spreadsheets where multiple people regularly update the content.
Once connected, you get a flexible, easy way to display live spreadsheet data beautifully in Elementor without any complicated setup.