docs

Polymer Integration

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

Usage

Include the following dependencies in the header of your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Import Polymer element:

CloseCopy Copied
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'

Create a ZingGrid component:

CloseCopy Copied
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);

Display your new component:

CloseCopy Copied
<my-component></my-component>

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

On This Page

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading