Polymer Integration

ZingGrid works with your development stack, including Polymer! In this guide, we'll walk you through how 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>

2. Import the Polymer element, like so:

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

3. Create a ZingGrid component, like so:

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

4. Display your new component, like so:

   <my-component></my-component>

Polymer Integrated Grid

Here is our complete grid that is successfully integrated with Polymer: