Creating a styled data project with Tabletop and Handlebars

Posted on Oct 7 2014 - 4:03pm by Eric Tompkins

tabletop handlebars google

Creating a styled data project with Tabletop, Handlebars, and Google Spreadsheets

by Roberto Rocha

Tabletop is a library built by Balance Media, which lets you access the data in a Google Spreadsheet via JavaScript. The implications of this are huge: you can essentially use Google Docs as your CMS. This means web content can be updated by simply changing or adding rows to a spreadsheet. For news orgs with clumsy CMSs like ours, this is a huge time saver.

All you have to do is build an HTML template for your content, and Tabletop will fill in that template with whatever is in your spreadsheet. It will create a new template item for every row.

Here are the steps to make my F1 interactive project (see finished product at bottom of page). I could not have done this without the generous help of Chris Keller of SoCal Public Radio and tutor extraordinaire Lisa Williams.

Organize the data

One row per item. That’s how the data has to be structured. In my case, I wanted to make one card per F1 team, with two drivers in each. That meant one row per team.

This is what my spreadsheet looked like.

It’s important that column names have no spaces or underscores. Tabletop will not read those columns in.

Create your template

To display in the data from your spreadsheet, tabletop woks hand-in-hand with another library: Handlebars. Named after the curly braces that resemble sideways moustaches – { and } – Handlebars is the heart of your template. Essentially, you need to put in the column name of whatever info you want displayed within double braces.

So if I have a column ‘team’ with the name of the F1 team, I put {{team}} wherever I want that displayed.

Here’s the template I used. Note that it goes inside a script tag with specific Handlebars ID and type. Since you’re writing an HTML template inside a script tag, it could confuse your text editor (or Gist). Ignore it.

If you want to style your template with nested divs, it’s very important that you declare specific dimensions for all the containers in your CSS. If you have anything set to auto, it could break your template entirely. See my CSS an an example.

Load the required libraries

Activate Tabletops and Handlebars

Every example I’ve seen does this in a script tag after the template in the body. See the comments for explanation on each component.

Make it interactive

If you follow my steps so far, this will create a card for each team all the way down the page. To add the interactive layer, with the buttons and the scrolling, I did an extra step:

Tabletop assigns a row number to each row in your spreadsheet after the header row with an attribute ‘rowNumber’. This makes it handy to target items after the project has been loaded.

I assigned each team button an href of #1 to #11, and in my template, I gave each card an ID of {{rowNumber}}, using Handlebars. You now have a link to each card.

I used the scrollTo jQuery plugin to scroll to each card using a jQuery selector:

The finished project

tabletop handlebars google

This awesome tutorial was created by Roberto Rocha /

About the Author
Eric Tompkins

Eric Tompkins is an Experienced Web Developer and Digital Media Professional. As well as a Professional Photographer and Technical Instructor. You can follow on Twitter @_codemics.