There are several ways to create a table in WordPress. If you already have a table in Google Sheets, you can display it to your WordPress site without needing to recreate the table. This post will show you how to turn a spreadsheet file in Google Sheets into a beautiful table in WordPress using Essential Addons. This method is great to convey announcements such as graduation, test results, and so on.
Essential Addons itself is a freemium Elementor add-on. The widget to turn a Google Sheets spreadsheet into a WordPress table is available on the free version. You can also use the free version of Elementor to create the table.
Before getting started, make sure you have installed and activated both Elementor and Essential Addons.
Step 1: Creating a Google Sheets API Key
Before being able to turn a spreadsheet file into a WordPress table, you need to integrate your WordPress site with Google Sheets first. You need an API key to do so.
Visit Google API Console and login with your Google account. Make sure to login with the same Google account as the one you use for Google Sheets. If you have no project yet, create a new one by clicking the dropdown menu on the top bar and click NEW PROJECT.
Give your new project a name and click the CREATE button.
Select the project you have just created from the dropdown menu on the top bar and click Library on the left panel.
Enable the Google Sheets API key. To do so, click VIEW ALL on the G Suite section. Seek for Google Sheets API and click. Click the ENABLE button to enable the API key.
Switch back to the Google API Console main dashboard (you can click the Google API Console logo on the top bar to do so). Click Credentials on the left panel and click the CREATE CREDENTIAL button on the top side, select API key.
Copy the generated API key.
Step 2: Start Creating the Table
Login to your WordPress dashboard and create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor.
Add a new section by clicking the plus button on the canvas area and add the Advanced Data Table widget to the section you have just added.
On the Data Source block under the Content tab, set the Source option to Google Sheets and enter your Google Sheets API key, sheet ID, and table range.
Note: If you see no option to enter the API key, sheet ID and table range, make sure to update your Essential Addons to the latest version.
Getting the sheet ID and table range
Before you copy the sheet ID and table range, make sure to set the spreadsheet file you want to display the table of to Public. To do so, click the Share button on the upper-right corner. Click Advanced on the appearing window.
Click Change and select the Public on the web option. Click the Save button.
Next, copy the sheet ID. Sheet ID is a random text on the URL structure of Google Sheets.
To get the table range, highlight the cells of the table and click the Data menu and select Named ranges. You can copy the data range from the panel on the right side.
Styling the table
If everything went well, you should see the data of your Google Sheets on the Elementor canvas as the following. You can set the width of the columns by dragging them to the left/right.
To style your table. you can go to the Style tab on the left panel. To set the width of the table, change the value on the Width option on the Table block. You can also set the border color of the table, border type, border width, and border radius from this block.
To customize the table header (top column), you can open the Head block. You can set the typography (font size, font family, font style), text alignment, text color, background color, and so on.
To customize the body (table data), you can open the Body block. You can set the typography (font size, font family, font style), text color, background color.
You can also set the style of the pagination from the Pagination block. To set the rows per page, you can open the Advanced Features block under the Content tab.
You can play around on the left panel to customize your table until you get satisfied with the look of your table. Once you are done, click the PUBLISH button on the bottom side on the left panel to publish your page.
The bottom line
Essential Addons is an Elementor add-on that comes with creative widgets. One of which is Advanced Data Table that allows you to turn a Google Sheets spreadsheet into a beautiful table in WordPress. This widget is great to display a long table such as a graduation announcement, test results, and so on. You can customize your table to make it more appealing to see.