Display Website Sections With Data From Google Sheets | websheet.js

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>
  <!-- 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>

3. Create the HTML wherein you want to render the info.

<h1>-- Websheet Bakery --</h1>
<div class="products" data-websheet="products">
  <div data-websheet-render="product" data-websheet-if="Bread?"></div>
<div class="products" data-websheet="products">
  <div data-websheet-render="product" data-websheet-if="Pastry?"></div>
<div class="products" data-websheet="products">
  <div data-websheet-render="product" data-websheet-if="Drink?"></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.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…


Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…


A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…


First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…


Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…