docs
Menu
Menu

Polymer Integration

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

On This Page

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

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading