Some easy to use Vue data grid libraries

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-t-use 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:

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 emits 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 an 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:

<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>

Some easy to use Vue data grid libraries

vue-js-grid

vue-easytable

Conclusion