FancyGrid

Vue Grid Component for FancyGrid
Read more here:
https://fancygrid.com/docs/getting-started/vue

Install

Vue CLI

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:

<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: '[email protected]',
  company: 'Electrical Systems',
  age: 30,
  knownledge: 'Java, Ruby'
}, {
  name: 'Ed',
  surname: 'Johnson',
  position: 'C/C++ Market Data Developer',
  email: '[email protected]',
  company: 'Energy and Oil',
  age: 35,
  knownledge: 'C++'
}, {
  name: 'Sam',
  surname: 'Williams',
  position: 'Technical Analyst',
  email: '[email protected]',
  company: 'Airbus',
  age: 38,
  knownledge: ''
}, {
  name: 'Alexander',
  surname: 'Brown',
  position: 'Project Manager',
  email: '[email protected]',
  company: 'Renault',
  age: 24,
  knownledge: ''
}, {
  name: 'Nicholas',
  surname: 'Miller',
  position: 'Senior Software Engineer',
  email: '[email protected]',
  company: 'Adobe',
  age: 33,
  knownledge: 'Unix, C/C++'
}, {
  name: 'Andrew',
  surname: 'Thompson',
  position: 'Agile Project Manager',
  email: '[email protected]',
  company: 'Google',
  age: 28,
  knownledge: ''
}, {
  name: 'Ryan',
  surname: 'Walker',
  position: 'Application Support Engineer',
  email: '[email protected]',
  company: 'Siemens',
  age: 39,
  knownledge: 'ActionScript'
}, {
  name: 'John',
  surname: 'Scott',
  position: 'Flex Developer',
  email: '[email protected]',
  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: '[email protected]',
	    company: 'Electrical Systems',
	    age: 30,
	    knownledge: 'Java, Ruby'
	  }, {
	    name: 'Ed',
	    surname: 'Johnson',
	    position: 'C/C++ Market Data Developer',
	    email: '[email protected]',
	    company: 'Energy and Oil',
	    age: 35,
	    knownledge: 'C++'
	  }, {
	    name: 'Sam',
	    surname: 'Williams',
	    position: 'Technical Analyst',
	    email: '[email protected]',
	    company: 'Airbus',
	    age: 38,
	    knownledge: ''
	  }, {
	    name: 'Alexander',
	    surname: 'Brown',
	    position: 'Project Manager',
	    email: '[email protected]',
	    company: 'Renault',
	    age: 24,
	    knownledge: ''
	  }, {
	    name: 'Nicholas',
	    surname: 'Miller',
	    position: 'Senior Software Engineer',
	    email: '[email protected]',
	    company: 'Adobe',
	    age: 33,
	    knownledge: 'Unix, C/C++'
	  }, {
	    name: 'Andrew',
	    surname: 'Thompson',
	    position: 'Agile Project Manager',
	    email: '[email protected]',
	    company: 'Google',
	    age: 28,
	    knownledge: ''
	  }, {
	    name: 'Ryan',
	    surname: 'Walker',
	    position: 'Application Support Engineer',
	    email: '[email protected]',
	    company: 'Siemens',
	    age: 39,
	    knownledge: 'ActionScript'
	  }, {
	    name: 'John',
	    surname: 'Scott',
	    position: 'Flex Developer',
	    email: '[email protected]',
	    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.

Support

If you need any assistance or would like to report any bugs found in FancyGrid, please contact us at [email protected]