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.prop="datastore" 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"
      }
    ]
  };
}

Example