Vue Integration

ZingGrid works with your development stack, including Vue! Below is a quick walkthrough on how to add ZingGrid to your Vue project.

Usage

1. Include the following dependencies in the header of your index.html file:

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

OR

Download ZingGrid from npm using npm i zinggrid and import that package to your main.js file or .vue component file.

 // optional ZingGrid npm import header
import ZingGrid from 'zinggrid';

2. Put <zing-grid> tag inside your render() function.

<zing-grid ref="helloWorld" caption="Hello Doggos" :data="stringData" loading></zing-grid>

3. Initialize data in mounted() function.

data() {
  return {
    // model for datastore
    datastore: [
      {
        "breed": "Dachshund",
        "name": "Sousage"
      },
      {
        "breed": "Corgi",
        "name": "Plop"
      },
      {
        "breed": "Pomeranian",
        "name": "Floof"
      }
    ],
    // assign stringified data
    stringData: null,
  };
},

// initialize grid data on mount
mounted() {
  // set state and reflect that change through attribute mutation
  this.stringData = JSON.stringify(this.datastore);

  // Alternatively you can use ZingGrid api to setdata if you do
  // not want a string form of data in the DOM tied to an attribute
  // this.$refs.helloWorld.setData(this.datastore);
}

Example