With Cellmate, embedding a google sheet in your HTML is as easy as linking to a javascript library and adding a single HTML container, wherever you want your table to show. From there, you’ll have complete control over the customization, including the styles as well as functionality, say, if you wanted to sort columns.

In this post, I’ll cover the easiest way to generate a table from a Google Sheet.

<script src='https://cdn.jsdelivr.net/npm/@cellmateapp/table/src/Table.js'></script>

View on GitHub

Add a container div

<div cellmate-src="your service url"></div>

Create a new service

If you don’t yet have a Cellmate account, you can create one for free by clicking “Sign in with Google” on the home page.

Next, click “Create a New Service”. From here, you’ll have the option of using an existing sheet you own, or creating a brand new demo sheet with some sample data. Either one works.

Copy the URL

Because each service represents an entire google sheet, and not a particular tab, you’ll need to navigate to the correct tab’s url.

Click “View JSON”. Copy the URL that corresponds to the tab you’d like to display in your HTML.

Replace “your service url” with the link you copied:

<div cellmate-src="your service url"></div>

Next Steps…

That’s it! From here, you’ve got several options, from styling the table as you like to extending the table’s functionality like sorting columns or making the table responsive.