Vue.js Grid Component

You can study basics over screencast.

Vue is one the most popular JavaScript framework.
Almost all JavaScript libraries do some component wrapper for frameworks (React, Angular, Vue), we either.
To do component for Vue is simple thing.
For simplicity let us start from live sample of wrapper for FancyGrid.
Link on sample Vue Grid Component
The sample above does not suit well for production.
Next we will study production approach.

Add FancyGrid to Your Project

For the purposes of this tutorial, we are going to scaffold an Vue app with Vue CLI. Don't worry if your project has a different configuration. FancyGrid and its Vue wrapper are distributed as NPM packages, which should work with any common Vue project module bundler setup. Let's follow the Vue CLI instructions - run the following in your terminal:

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 src/App.vue and replace the scaffold code:

<template>
  <div id="app">
	<fancy-grid-vue :config="gridConfig"></fancy-grid-vue>
  </div>
</template>

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:

<script>
import FancyGridVue from 'fancy-grid-vue';

let data = [{
  name: 'Ted',
  surname: 'Smith',
  position: 'Java Developer',
  email: 'ted.smith@gmail.com',
  company: 'Electrical Systems',
  age: 30,
  knownledge: 'Java, Ruby'
}, {
  name: 'Ed',
  surname: 'Johnson',
  position: 'C/C++ Market Data Developer',
  email: 'ed.johnson@gmail.com',
  company: 'Energy and Oil',
  age: 35,
  knownledge: 'C++'
}, {
  name: 'Sam',
  surname: 'Williams',
  position: 'Technical Analyst',
  email: 'sam.williams@gmail.com',
  company: 'Airbus',
  age: 38,
  knownledge: ''
}, {
  name: 'Alexander',
  surname: 'Brown',
  position: 'Project Manager',
  email: 'alexander.brown@gmail.com',
  company: 'Renault',
  age: 24,
  knownledge: ''
}, {
  name: 'Nicholas',
  surname: 'Miller',
  position: 'Senior Software Engineer',
  email: 'nicholas.miller@gmail.com',
  company: 'Adobe',
  age: 33,
  knownledge: 'Unix, C/C++'
}, {
  name: 'Andrew',
  surname: 'Thompson',
  position: 'Agile Project Manager',
  email: 'andrew.thompson@gmail.com',
  company: 'Google',
  age: 28,
  knownledge: ''
}, {
  name: 'Ryan',
  surname: 'Walker',
  position: 'Application Support Engineer',
  email: 'ryan.walker@gmail.com',
  company: 'Siemens',
  age: 39,
  knownledge: 'ActionScript'
}, {
  name: 'John',
  surname: 'Scott',
  position: 'Flex Developer',
  email: 'john.scott@gmail.com',
  company: 'Cargo',
  age: 45,
  knownledge: 'Flex'
}];

export default {
  name: 'app',
  data: function() {
    return {   
      gridConfig: {
        title: 'Vue with FancyGrid',
        theme: 'gray',
        width: 700,
        height: 400,
        data: data,
        resizable: true,
        defaults: {
          type: 'string',
          width: 100,
          sortable: true,
          editable: true,
          resizable: true
        },
        selModel: 'rows',
        trackOver: true,
        columns: [{
          type: 'select'
        },{
          index: 'company',
          title: 'Company'
        },{
          index: 'name',
          title: 'Name'
        },{
          index: 'surname',
          title: 'Sur Name'
        },{
          index: 'age',
          title: 'Age',
          type: 'number',
          width: 80
        },{
          index: 'email',
          title: 'Email',
          width: 160
        }]
      }
    }
  },
  components: {
    FancyGridVue
  }
}
</script>

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:

<template>
  <div id="app">
	<fancy-grid-vue 
	  :title="title"
      :theme="'gray'"
      :width="width"
      :height="height"
      :data="data"
      :resizable="true"
      :defaults="defaults"
      :sel-model="'rows'"
      :trackOver="true"
      :columns="columns">
	</fancy-grid-vue>
  </div>
</template>

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:

<script>
import FancyGridVue from 'fancy-grid-vue';
export default {
  name: 'app',
  data: function(){
    return {
	  title: "Vue with FancyGrid",
	  theme: "gray",
	  width: 700,
	  height: 400,
	  data: this.getData(),
	  defaults: this.getDefaults(),
	  columns: this.getColumns()
    };
  },
  methods: {
    getColumns: function(){
	  return [{
	    type: 'select'
	  },{
	    index: 'company',
	    title: 'Company'
	  },{
	    index: 'name',
	    title: 'Name'
	  },{
	    index: 'surname',
	    title: 'Sur Name'
	  },{
	    index: 'age',
	    title: 'Age',
	    type: 'number',
	    width: 80
	  },{
  	    index: 'email',
	    title: 'Email',
	    width: 160
	  }];
    },
    getDefaults: function(){
	  return {
  	    type: 'string',
	    width: 100,
	    sortable: true,
	    editable: true,
	    resizable: true
	  };
    },
    getData: function(){
	  return [{
	    name: 'Ted',
	    surname: 'Smith',
	    position: 'Java Developer',
	    email: 'ted.smith@gmail.com',
	    company: 'Electrical Systems',
	    age: 30,
	    knownledge: 'Java, Ruby'
	  }, {
	    name: 'Ed',
	    surname: 'Johnson',
	    position: 'C/C++ Market Data Developer',
	    email: 'ed.johnson@gmail.com',
	    company: 'Energy and Oil',
	    age: 35,
	    knownledge: 'C++'
	  }, {
	    name: 'Sam',
	    surname: 'Williams',
	    position: 'Technical Analyst',
	    email: 'sam.williams@gmail.com',
	    company: 'Airbus',
	    age: 38,
	    knownledge: ''
	  }, {
	    name: 'Alexander',
	    surname: 'Brown',
	    position: 'Project Manager',
	    email: 'alexander.brown@gmail.com',
	    company: 'Renault',
	    age: 24,
	    knownledge: ''
	  }, {
	    name: 'Nicholas',
	    surname: 'Miller',
	    position: 'Senior Software Engineer',
	    email: 'nicholas.miller@gmail.com',
	    company: 'Adobe',
	    age: 33,
	    knownledge: 'Unix, C/C++'
	  }, {
	    name: 'Andrew',
	    surname: 'Thompson',
	    position: 'Agile Project Manager',
	    email: 'andrew.thompson@gmail.com',
	    company: 'Google',
	    age: 28,
	    knownledge: ''
	  }, {
	    name: 'Ryan',
	    surname: 'Walker',
	    position: 'Application Support Engineer',
	    email: 'ryan.walker@gmail.com',
	    company: 'Siemens',
	    age: 39,
	    knownledge: 'ActionScript'
	  }, {
	    name: 'John',
	    surname: 'Scott',
	    position: 'Flex Developer',
	    email: 'john.scott@gmail.com',
	    company: 'Cargo',
	    age: 45,
	    knownledge: 'Flex'
	  }];
    }
  },
  components: {
    FancyGridVue
  }
}
</script>

We got the same grid but with nicer code.
In code above we change data and adding methods to that code looks cleaner.

Events

There are 2 approaches to add events for grid:
1 - FancyGrid approach adding events properties to configs.
2 - Vue approach.
It needs to choose only one approach, we can not mix them.
Let us study Vue approach.
First we will change template code.

<template>
  <div id="app">
	<fancy-grid-vue 
	  :title="title"
      :theme="'gray'"
      :width="width"
      :height="height"
      :data="data"
      :resizable="true"
      :defaults="defaults"
      :sel-model="'rows'"
      :trackOver="true"
	  @init="onInit"
	  @select="onSelect"
      :columns="columns">
	</fancy-grid-vue>
  </div>
</template>

In grid config code we will add methods(handlers) for events.

methods:{
  ...
  onInit: function(grid){
    
  },
  onSelect: function(grid, selection){
    
  },

Reactive properties

There are several properties that you can use for reactive change like Vue does.
They are: data, title, height, width, page, subTitle.
Let us view how they work, add this in code.

mounted: function(){
  var me = this;
  
  setTimeout(function(){
    me.title = 'New ';
    me.height = 350;
    me.width = 800;
  }, 2000);
},

Methods

To use all methods of grid from API, it needs to get link on grid.
You can do this over event init and store link on grid or define id
and use method Fancy.getWidget.
Learn more about Methods.

Production

FancyGrid consists of modules. It helps much to keep bundle size small.
But for production it requires to execute extra complex steps.

If you installed FancyGrid over npm and uses ES6/TypeScript than this section is for you.
By default FancyGrid includes core small module that auto-detects which modules will be used.
Than modules will be loaded from path that was provided in Fancy.MODULESDIR.
By default Fancy.MODULESDIR is equal to https://cdn.fancygrid.com/modules/ You can study about modules by this link Modules.

JavaScript Modules

You would need to get list of all modules that are used. For that open run open Web Console in browser and run this.
Fancy.getModulesList();
You would get something like that: ["paging", "server-data", "sort", "grouping", "filter", "tree", "dom", "ajax", "menu", "form", "grid"]. Now, open src/App.vue and import modules.

import FancyGridVue from 'fancy-grid-vue';
import Fancy from 'fancygrid';
import 'fancygrid/client/modules/paging.min';
import 'fancygrid/client/modules/server-data.min';
import 'fancygrid/client/modules/sort.min';
import 'fancygrid/client/modules/grouping.min';
import 'fancygrid/client/modules/filter.min';
import 'fancygrid/client/modules/dom.min';
import 'fancygrid/client/modules/menu.min';
import 'fancygrid/client/modules/form.min';
import 'fancygrid/client/modules/grid.min';

If you would need to debug the code, than remove .min from modules.

i18n

On case you use localization that you would need to include lang module.
Add this line.

import 'fancygrid/client/modules/i18n/de';

CSS file

The next thing to do is including css file.
For that after including modules add this lines.

import 'fancygrid/client/fancy.min.css';
Fancy.stylesLoaded = true;

The first line is including css file.
The second one is stoping FancyGrid from loading styles file by self.

That's it.