https://medium.com/vowel-magic/how-to-fetch-data-from-google-sheets-with-react-and-tabletop-js-ca0e9d2ab34b

https://medium.com/vowel-magic/how-to-fetch-data-from-google-sheets-with-react-and-tabletop-js-ca0e9d2ab34b

How To Fetch Data From Google Sheets with React and Tabletop.js

Render data from Google Spreadsheets with React and Tabletop.js

 

 

Google spreadsheets

Spreadsheets are popular since they act as a database that’s easy to modify for non-developers. Anyone with a laptop and internet connection can use spreadsheets and insert useful information.

As developers, we’re constantly searching for ways to improve our everyday workflow. Here’s a way to save time by fetching data straight from Google sheets with React and tabletop.js.

We’re going to use tabletop since it easily integrates with Google Spreadsheets. The library is used for getting JSON from a Google Spreadsheet without jumping through a thousand hoops.

Become a Medium Member to directly support my work. Thanks in advance!

Getting started

Step One: make a Google Spreadsheet and click “Publish to Web.”

https://docs.google.com/spreadsheets/d/1TK1Qj6kfA90KbmFAdnIOtKUttpJUhZoZuOPy925c6nQ/edit#gid=1892712628

Step Two: Install the tabletop library.

yarn add tabletop

Step Three: Write the React component that fetches the data from Google sheets.

Note: we’re using React hooks — if you’re new to them, check out this article where I explained React hooks in depth.

Here’s what happens inside the React component above;

• We’re initializing the Tabletop library inside the useEffect hook. The init function takes an object as an argument. This is where we place the information about our Google sheets. Notice the **key** prop.

The **key** propis taken from this section of the Google Sheets URL:

• Once the tabletop library is done initializing, it’s going to fetch the data from google spreadsheets. If the query is successful, we store the retrieved data inside the react hook which is called data.

Rendering data

Rendering the data on the screen is quite straight-forward. We’re going to map over the array of data.

Rendering the data from the spreadsheet

Here’s the result

Well done! You did it.

Here are a few gotchas with fetching data from google sheets with tabletop.js

• All columns must be named in the first row and may not contain any strange characters (%, $, &).
• Google assumes an empty row is the end of the data and doesn’t return any rows thereafter.
• NOTE: If your share URL has a /d/e in it, try refreshing the page to see if it goes away. If it doesn't, try this.
• If you want to deal with multiple sheets you can get rid of the simpleSheet property.
• Check out the tabletop documentation for a deeper dive.

Here’s the full React component

In case you’re feeling curious, here’s the interactive demo. Try it out!

Thanks for reading, happy coding!