Skip to content

Latest commit

 

History

History
49 lines (32 loc) · 2.85 KB

README.md

File metadata and controls

49 lines (32 loc) · 2.85 KB
Raw

Leafy

2023 updates

Replacing Tabletop.js for Papa Parse

Updating example of Leafy.js with PapaParse.

You can try the demo

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

Leafy example screenshot Screenshot of example Leafy page

  • Built on Papa Parse, 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.

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. Follow these instructions for your spreadsheet to Publish to the web

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!

Leafy animation

Notes

  • This template doesn't support multiple sheets