FancyGrid Vue Component
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve
`
If everything goes well, npm run serve has started the web server.
You can open the default app at localhost:8080.
As a next step, let's add the FancyGrid NPM packages.
Run the following command in my-project (you may need a new instance of the terminal):
`npm install --save fancygrid fancy-grid-vue`
After a few seconds of waiting, you should be good to go. Let's get to the actual coding!
As this will be a simple example we can delete the src/components directory. Our example application will live in src/App.vue.
Let's add the component definition to our template. Edit app/App.vue and replace the scaffold code:
`
`
In code above you see that we provide only one param config.
It is the simplest way to provide component with grid config.
Next, let's declare the basic grid configuration. Edit src/App.vue:
`
`
It could be needed to re-run npm run serve.
Also check the terminal on errors.
If everything works as expected, you should see a simple grid.
The code above is the simplest way to use FancyGrid with Vue.
Let us change it to Vue code style that your app looks better.
In FancyGrid you can define properties, events and use reactivity like in Vue.
Let's change the component template. Edit app/App.vue and replace the code to:
`
:theme="'gray'"
:width="width"
:height="height"
:data="data"
:resizable="true"
:defaults="defaults"
:sel-model="'rows'"
:trackOver="true"
:columns="columns">
`
Almost all properties from grid API are available for Vue wrapper.
Except: renderTo, renderOuter.
Also you need to remember that camelCase properties should be replaced with kebab code style.
selModel to sel-model
Next, let's change the grid configuration. Edit src/App.vue:
`
``