How to import data from a Google Spreadshet document into an article or post like a regular HTML table - Updated

In a previous tutorial we had described the process of reading a published Google Document/Spreadsheet with Tabulizer and turning it into a Joomla or Wordpress table.

Basically what we did is that we published the document as CSV file and linked the CSV file via a data source to the resulting HTML table. As Google has removed the option to publish a spreadsheet as CSV, even though there is a workaround that is mentioned at the end of previous tutorial , in this tutorial we will describe the process of reading the published documents as HTML tables.

Step 1

We create the document.

Step 2

After we have added the data, we publish the document.

Note that regardless of the Sharing settings, once the document is published it's viewable by anyone who knows the published link. This is because the published document is considered a separate document from the source and this is why it is important to keep checked the "Automatically republished when changes re made" option.

Step 3

Check that the published URL is accessible. It should be normal web page where the data appear in an single HTML table (the first and only table of the page - we will use this information later on when we specify which table we want to read from the web page).

Step 4

Create the ruleset that will be used by the template. For those of you that are not familiar with the Tabulizer, a ruleset is something like a table template or a table preset, but it's more than that. Apart from the visual aspects of the table (colors, fonts, etc) you can also do data transformations and add dynamic features such as sorting, filtering and pagination.

For the creation of the ruleset you can use the online table creation wizard or the more advanced users can do it manually within Tabulizer's environment. A sample ruleset can be found here.

Step 5

We create the data source we the following settings:

If the number of rows is larger than a certain number, which depends on the size of each row, then it's recommended to use the "server side processing" option that will load only the portion of the table that it's really needed, instead of the whole table using AJAX calls.

Tip: For smaller tables it's not recommended to use the server side option because it comes with restrictions and requirements. Two of them are:
  • The associated ruleset should have a table pagination ruleset
  • The data source cache must be enabled

OK, below is the resulting table for the published Google document published here:

Invalid data source. Please correct the following errors:
  • The data source tag/idis missing or it is invalid

And here is the related video tutorial: