A Tool for Publishing Responsive HTML Tables of a Google Spreadsheet as a CMS

gshtmltable.js is a javascript library for creating an HTML table from a generic Google Spreadsheet – a Google Spreadsheet to an HTML timeline.

  • It allows non-technical users to edit a schedule in a Google Spreadsheet and then publish it on a web page.
  • It has two copies:
  • Desktop (same as spreadsheet view)
  • Responsive (Split column headers-Mon,…, Sunday- as new rows)

convert google sheet to html table, create bigquery table from google sheet, editable spreadsheet html, google sheets data connector, connected sheets google workspace

[CRUD] Data Grid Component With A Spreadsheet In JavaScript/HTML5 | Handsontable

How to make use of it:

1. To get started, include the gshtmltable.js library on the page.

<script src="./lib/gshtmltable.js"></script>

2. Draw the HTML table (desktop version) of the generic Google Spreadsheet you provide.

<div class="desktop_table">
  url: " ",
  desktop_container: ".desktop_table",
  responsive_container: null

3. Draw a mobile-friendly table from your generic Google Spreadsheet.

<div class="responsive_table"></div>
  url: " ",
  desktop_container: null,
  responsive_container: ".responsive_table"     

4. Apply additional CSS classes to the table.

  desktop_css : "",
  responsive_css : "" 

Generate Tables From Public Google Spreadsheets, Google Spreadsheet to HTML Timetable Plugin/Github, data connectors google sheets not showing, connected sheets pricing

See Demo And Download

Official Website(davidayalas): Click Here

This superior jQuery/javascript plugin is developed by davidayalas. For extra advanced usage, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from https://squircley.app wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…