Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at some easy to use data grid and table libraries to get you results faster.

vue-js-grid

This is a cool library that lets us create a data grid where the items in it are draggable and droppable.

It’s also very easy to create this effect. To install it, we run:

npm install --save vue-js-grid

Then we can use it as follows:

main.js :

import Vue from "vue";  
import App from "./App.vue";  
import Grid from "vue-js-grid";

Vue.use(Grid);  
Vue.config.productionTip = false;

new Vue({  
  render: h => h(App)  
}).$mount("#app");

App.vue :

<template>  
  <div id="app">  
    <grid :draggable="true" :sortable="true" :items="items" :height="100" :width="100">  
      <template slot="cell" scope="props">  
        <div>{{props.item}}</div>  
      </template>  
    </grid>  
  </div>  
</template>

<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      items: ["foo", "bar", "baz"]  
    };  
  }  
};  
</script>

In the code above, we imported the package into our app with Vue.use . Then we added the grid component to display the grid.

Then we set the items prop to items to display the items on our screen. Also, we set the draggable and sortable props to true so that we can drag the items around.

Other options that are available include, cellWidth and cellHeight . The component also emit the following events:

• change — emitted when items are being rearranged
• remove — emitted when n element is deleted
• click — occurs when a cell is clicked
• sort — emitted when array item is changed manually

The slot props have the following properties and methods in addition to item :

• index — initial index of item
• sort — the current index of the item after ordering
• remove() — a method that’ll remove the item from the array and re-sort the list

vue-easytable

vue-easytable lets us create a table without too much code on the template.

All we have to do is include our table content data and column list and then set them as props for the component.

To install it, we run:

npm install vue-easytable

Then we add the code to use the package as follows:

main.js :

import Vue from "vue";  
import App from "./App.vue";  
import "vue-easytable/libs/themes-base/index.css";  
import { VTable, VPagination } from "vue-easytable";  
Vue.component(VTable.name, VTable);  
Vue.component(VPagination.name, VPagination);  
Vue.config.productionTip = false;

new Vue({  
  render: h => h(App)  
}).$mount("#app");

App.vue :

<template>  
  <div id="app">  
    <v-table :width="1000" :columns="columns" :table-data="tableData" :show-vertical-border="false"></v-table>  
  </div>  
</template>

<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      tableData: [  
        {  
          firstName: "Jane",  
          lastName: "Smith",  
          phone: "555-555-1212"  
        },  
        {  
          firstName: "Joe",  
          lastName: "Smith",  
          phone: "182-100-1538"  
        },  
        {  
          firstName: "Mary",  
          lastName: "Smith",  
          phone: "161-493-0097"  
        }  
      ],  
      columns: [  
        {  
          field: "firstName",  
          title: "First Name",  
          width: 100,  
          titleAlign: "left",  
          columnAlign: "left"  
        },  
        {  
          field: "lastName",  
          title: "Last Name",  
          width: 260,  
          titleAlign: "left",  
          columnAlign: "left"  
        },  
        {  
          field: "phone",  
          title: "Phone",  
          width: 330,  
          titleAlign: "left",  
          columnAlign: "left"  
        }  
      ]  
    };  
  }  
};  
</script>

We imported the package and register the components in main.js . Then we add the table data to the data field and then add the v-table to our template with the columns prop for adding the columns and the table-data prop for the table data.

We can also add a selection box as a column as follows:

<template>  
  <div id="app">  
    <v-table  
      row-click-color="#edf7ff"  
      :select-all="selectAll"  
      :select-change="selectChange"  
      :select-group-change="selectGroupChange"  
      :width="1000"  
      :columns="columns"  
      :table-data="tableData"  
      :show-vertical-border="false"  
    ></v-table>  
  </div>  
</template>

<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      tableData: [  
        {  
          firstName: "Jane",  
          lastName: "Smith",  
          phone: "555-555-1212"  
        },  
        {  
          firstName: "Joe",  
          lastName: "Smith",  
          phone: "182-100-1538"  
        },  
        {  
          firstName: "Mary",  
          lastName: "Smith",  
          phone: "161-493-0097"  
        }  
      ],  
      columns: [  
        {  
          width: 60,  
          titleAlign: "center",  
          columnAlign: "center",  
          type: "selection"  
        },  
        {  
          field: "firstName",  
          title: "First Name",  
          width: 100,  
          titleAlign: "left",  
          columnAlign: "left"  
        },  
        {  
          field: "lastName",  
          title: "Last Name",  
          width: 260,  
          titleAlign: "left",  
          columnAlign: "left"  
        },  
        {  
          field: "phone",  
          title: "Phone",  
          width: 330,  
          titleAlign: "left",  
          columnAlign: "left"  
        }  
      ]  
    };  
  },  
  methods: {  
    selectAll(selection) {  
      console.log("select-all", selection);  
    }, 

    selectChange(selection, rowData) {  
      console.log("select-change", selection, rowData);  
    }, 

    selectGroupChange(selection) {  
      console.log("select-group-change", selection);  
    }  
  }  
};  
</script>

We add some extra props and:

{  
  width: 60,  
  titleAlign: "center",  
  columnAlign: "center",  
  type: "selection"  
}

to the columns array.

We can also add pagination with the v-paginator component.

Conclusion

There’re Vue libraries to add data grid to our app in different ways. The vue-js-grid component lets us add a grid with items that can be dragged and dropped.

The vue-easytable component lets us add a table that can have pagination, sorting and many more options available.