Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

communitycreator
vuejs
javascript
data grid
communitycreator

Some easy to use Vue data grid libraries

John Au-Yeung

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:

main.js
App.vue
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");

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:

main.js
App.vue
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");

We imported the package and register the components in main.js. Then, we add the table data to the data field and 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 section 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 to the columns array:

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

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

Conclusion

There are 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 has the options of pagination, sorting, and more.

RELATED TAGS

communitycreator
vuejs
javascript
data grid
communitycreator
RELATED COURSES

View all Courses

Keep Exploring