websheetjs is a JavaScript library that fills your webpage with data fetched from Google Sheets with images, filters, and links. A lightweight JS library for displaying website sections with data from Google Sheets.
Powerful Spreadsheet Data Grid Component For Vue | RevoGrid
How to make use of it:
1. Load the websheetjs JavaScript library within the doc.
<script src="./dist/websheet.min.js"></script>
2. Build the template on your net sheet.
<div data-websheet-template="product"> <!-- Loader --> <div data-websheet-on:loading> Loading... </div> <!-- When product is loaded... --> <div class="product" data-websheet-on:loaded> <!-- Display only if checkbox is True --> <div data-websheet-if="Display ?"> <!-- Bind "Picture" column to img.src attribute --> <img data-websheet-bind:src="Picture" data-websheet-bind:alt="Product"> <!-- Product Name --> <div><strong data-websheet-text="Product"></strong></div> <!-- Price (including Discount) --> <div data-websheet-unless="Discount?" data-websheet-text="Price"></div> <div data-websheet-if="Discount?"> <span style="text-decoration: line-through;" data-websheet-text="Price"></span> <strong data-websheet-text="Discounted Price"></strong> </div> </div> </div> </div>
3. Create the HTML wherein you want to render the info.
<h1>-- Websheet Bakery --</h1> <h2>Breads</h2> <div class="products" data-websheet="products"> <div data-websheet-render="product" data-websheet-if="Bread?"></div> </div> <hr/> <h2>Pastries</h2> <div class="products" data-websheet="products"> <div data-websheet-render="product" data-websheet-if="Pastry?"></div> </div> <hr/> <h2>Drinks</h2> <div class="products" data-websheet="products"> <div data-websheet-render="product" data-websheet-if="Drink?"></div> </div>
4. Initialize the net sheet and decide the path to your Goole Sheets.
websheet('products', { /** * URL of the spreadsheet */ url: '', /** * Spreadsheet tab name */ sheet: 'Products', /** * Enable caching (load as soon as possible cached version, * and load data in parallel - replace cached data if real * version has changed) */ caching: true, /** * Query used to filter/sort results * Here, sort results in alphabetical order (B = Product name) */ query: `select * order by B`, /** * When data are received from spreadsheet, * display them in console */ onLoaded: data => console.log('data =', data), /** * Define new columns (aliases) to apply filters */ aliases: { // Aliases for each category 'Bread?': row => row['Category'].value === 'Breads', 'Pastry?': row => row['Category'].value === 'Pastries', 'Drink?': row => row['Category'].value === 'Drinks', // Determine if these is discount or not on the product 'Discount?': row => { if (row['Discounted Price'].value && row['Discount End'].value) { return row['Discount End'].value > new Date(); } else { return false; } } } })
Render Data From Google Sheets On Web Page, websheet.js Plugin/Github
See Demo And Download
Official Website(pierreavn): Click Here
This superior jQuery/javascript plugin is developed by pierreavn. For extra advanced usage, please go to the official website.