Docs

Polymer Integration

ZingGrid works well with Polymer. Simply follow the four steps below to add ZingGrid to your Polymer project.

Usage

  1. Include the following dependencies in the header of your HTML file:
<script src="path/to/zinggrid.min.js" defer></script>
  1. Import Polymer element:
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'
  1. Create a ZingGrid component:
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);
  1. Display your new component:
<my-component></my-component>

Top

On This Page