Render Data From Google Sheets On Web Page – websheetjs

Preview:

Description:

websheetjs is a JavaScript library that populates your web page with data fetched from Google Sheets with pictures, filters, and links.

How to use it:

1. Load the websheetjs JavaScript library in the document.

<script src="./dist/websheet.min.js"></script>

2. Build the template for your web 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 in which you wish to render the data.

<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 web sheet and determine the path to your Goole Sheets.

websheet('products', {
  /**
   * URL of the spreadsheet
   */
  url: 'https://docs.google.com/spreadsheets/d/1enj8u4b7WA4Itrw8u5YEzt8MzwtRD1GkJNSWkl9GMK0/edit#gid=0',
  /**
   * 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;
      }
    }
  }
})