Polymer Site Demo

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <!-- Polyfills only needed for Firefox and Edge. -->
  <script nonce="undefined" src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>

  <!-- import zinggrid file -->
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    body {
      background: #FFF;
    }

    zing-grid[loading] {
      height: 800px;
    }
  </style>
</head>

<body>

  <script nonce="undefined" type="module">
    import {
      PolymerElement,
      html
    } from 'https://unpkg.com/@polymer/polymer@next/polymer-element.js?module';
    class MyComponent extends PolymerElement {
      static get properties() {
        return {
          datastore: {
            value: [{
                "breed": "Dachshund",
                "name": "Sousage"
              },
              {
                "breed": "Corgi",
                "name": "Plop"
              },
              {
                "breed": "Pomeranian",
                "name": "Floof"
              }
            ]
          }
        }
      }
      static get template() {
        return html`<zing-grid caption="Hello Doggo" data$="{{datastore}}"></zing-grid>`
      }

    }

    customElements.define('my-component', MyComponent);
  </script>

  <my-component></my-component>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <!-- Polyfills only needed for Firefox and Edge. -->
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>

  <!-- import zinggrid file -->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body>

  <script type="module">
    import {
      PolymerElement,
      html
    } from 'https://unpkg.com/@polymer/polymer@next/polymer-element.js?module';
    class MyComponent extends PolymerElement {
      static get properties() {
        return {
          datastore: {
            value: [{
                "breed": "Dachshund",
                "name": "Sousage"
              },
              {
                "breed": "Corgi",
                "name": "Plop"
              },
              {
                "breed": "Pomeranian",
                "name": "Floof"
              }
            ]
          }
        }
      }
      static get template() {
        return html`<zing-grid caption="Hello Doggo" data$="{{datastore}}"></zing-grid>`
      }

    }

    customElements.define('my-component', MyComponent);
  </script>

  <my-component></my-component>
</body>

</html>

body {
  background: #FFF;
}