Vue Integration
ZingGrid works with your development stack, including Vue! In this guide, we'll walk you through how to add ZingGrid to your Vue project.
Usage
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 yourmain.js
file or.vue
component file:// optional ZingGrid npm import header import ZingGrid from 'zinggrid';
Add a
<zing-grid>
tag inside yourrender()
function, like so:<zing-grid ref="helloWorld" caption="Hello Doggos" :data.prop="datastore" loading></zing-grid>
Initialize data in
mounted()
function, like so:data() { return { // model for datastore datastore: [ { "breed": "Dachshund", "name": "Sousage" }, { "breed": "Corgi", "name": "Plop" }, { "breed": "Pomeranian", "name": "Floof" } ] }; }
Add styles (Optional). Note: You must use deep selectors when using scoped styles.
<style scoped> zing-grid >>> zg-row { ... } </style>
Vue Integrated Grid
Here is our complete grid that is successfully integrated with Vue:
[integrations: vue]