Leafy

Leafy is an easy-to-use template designed to turn your google spreadsheet into a styled, sortable table on a website.

Screenshot of example Leafy page

• Built on Tabletop.js, which lets you use google spreadsheet as your backend database.
• Use the spread sheet to generate a sortable list on your website.
• Sort the list through customized categories. Tag items in your spreadsheet with multiple categories.

Leafy is made for educators and organizers, with the intention of small - large scale collaborations. Build an ongoing list of readings, resources, to-dos, etc and distribute your content to the greater community. Making edits to the spreadsheet will automatically post these changes to your Leafy site.

Examples built with Leafy

Basic minimal example

Weird Game-Making Tools, contributed by @lee2sman

Thesis during COVID, multiple contributors

Open source, experimental, and tiny tools roundup, multiple contributors, compiled by @everestpipkin

Getting Started

Set up a google spreadsheet

1. Visit the google spreadsheet template I've created here. Duplicate the spreadsheet and save it into your own google drive.
2. Edit the spreadsheet with your own data. You can expand or delete the number of categories. Enter URLs under the Link column, or you could also leave it empty.
3. Visit Tabletop.js' README, scroll down to Getting Started, and follow the instructions inside the 1) Publishing your Google Sheet section.

Put spreadsheet on a website

We're ready to connect the spreadsheet to our website. From here you could move forward by remixing the Leafy template hosted on Glitch, or you could also download the repository and work locally.

Now go to script.js, and look at the top section where it says editable info:

1. const publicSpreadsheetUrl replace this with your own spreadsheet URL.
2. const categoryStartNum let the program know where the categoy begins on the spreadsheet column. Default value is 3.
3. const sheetName this has to match the name of your sheet. Default value is "Sheet 1".
4. const punctuation this changes the punctuation between the title and the description.
5. That's it!

Notes

• This template doesn't support multiple sheets