Note: This tool is not maintained, and has been deprecated since February 2018. It does not handle Google's API limits.
This note was added December 4, 2018.
We released a responsive table creation command-line tool last month. After installation, it took a Google spreadsheet and some configuration in a JSON file, and returned a collection of files to be uploaded to your webserver and embedded on your page. Sounds complicated, right?
Today we're launching a responsive table creation webapp. Feed it the URL of a Google spreadsheet and it will help you create a collection of files that need to be uploaded to your webserver and embedded on your page.
The difference between today's responsive table tool and last month's is that this one runs in your browser. It offers you a convenient user-friendly interface. It lets you preview what your table will look like. And, most importantly, the tool doesn't require you to install anything on your computer for it to work.
How the webapp works
Once you've set up a spreadsheet in Google Drive, paste its URL into the URL field of the webapp. The page parses the URL to extract the spreadsheet key (44 characters of upper- and lower-case letters, numbers, and dashes), then feeds the key to Tabletop.js, which parses the spreadsheet. Tabletop.js and jQuery combine to render a list of columns in the webapp, allowing users to give each column a display name. Users can also add their Google Analytics ID to be included in the download.
The preview uses the same Tabletop.js + Tablesaw combination that the downloadable files use, but it gets the spreadsheet key and the column definition from URL parameters.
Other notes
The webapp doesn't change the actual responsive table code generated by the original app. The table breakpoint is still set to 60em/960px, and works best for tables with 5-7 columns.
You can see an example of a table rendered with our rig here: http://nerds.inn.org/wp-content/uploads/static/discounts/
And an example of that same table embedded via iframe: http://nerds.inn.org/discounts/
View the code in the INN/responsive-tables repository on GitHub (bug reports and pull requests welcome!): https://github.com/INN/responsive-tables/