• Edit
  • Download
  • <!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" defer></script>
      <style>
        body {
          background: #FFF;
        }
    
        zing-grid[loading] {
          height: 800px;
        }
      </style>
    </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>
      <script></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" defer></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;
    }