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 Vue data grid libraries so we can avoid creating them from scratch ourselves.

vue-floatThead

vue-floatThead is a library that lets us create tables with a few options.

We can install it as follows:

npm install vue-floatthead

Then we can use it as follows:

main.js :

import Vue from "vue";  
import App from "./App.vue";  
import FloatThead from "vue-floatthead";  
Vue.use(FloatThead);  
Vue.config.productionTip = false;new Vue({  
  render: h => h(App)  
}).$mount("#app");

App.vue :

<template>  
  <div id="app">  
    <float-thead-table>  
      <thead>  
        <tr>  
          <th>  
            <a href="#">First Name</a>  
          </th>  
          <th>  
            <a href="#">Last Name</a>  
          </th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr v-for='p of persons' :key='p'>  
          <td>{{p.firstName}}</td>  
          <td>{{p.lastName}}</td>           
        </tr>  
      </tbody>  
    </float-thead-table>  
  </div>  
</template>

<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      persons: [  
        { firstName: "Jane", lastName: "Smith" },  
        { firstName: "Alex", lastName: "Smith" }  
      ]  
    };  
  }  
};  
</script>

We registered the component in main.js , then we use the float-thead-table component to build the table.

vue-good-table

vue-good-table is a table library with lots of options. It’s also easy to make a table with filtering and sorting with it.

To install it, we run:

npm install --save vue-good-table

Then to use it, we write:

main.js :

import Vue from "vue";  
import App from "./App.vue";  
import VueGoodTablePlugin from "vue-good-table";  
import "vue-good-table/dist/vue-good-table.css";

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

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

App.vue :

<template>  
  <div id="app">  
    <input type="text" v-model="searchTerm">  
    <vue-good-table  
      :columns="columns"  
      :rows="rows"  
      :search-options="{  
        enabled: true,  
        externalQuery: searchTerm  
      }"  
    ></vue-good-table>  
  </div>  
</template>

<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      searchTerm: "",  
      columns: [  
        {  
          label: "Name",  
          field: "name",  
          filterable: true  
        }  
      ],  
      rows: [{ name: "Jane" }, { name: "Alex" }]  
    };  
  },  
  methods: {  
    search() {}  
  }  
};  
</script>

We registered the component with Vue.use and imported the styles, then we created the rows and columns data which are passed straight into the vue-good-table as props.

Also, we added the search-options prop to let us pass in the value of the input as the search value. It’s smart enough to search all columns without adding additional code.

Adding pagination is also very easy. To do this, we write:

<template>  
  <div id="app">  
    <input type="text" v-model="searchTerm">  
    <vue-good-table  
      :columns="columns"  
      :rows="rows"  
      :search-options="{  
        enabled: true,  
        externalQuery: searchTerm  
      }"  
      :pagination-options="{  
        enabled: true,  
        mode: 'records',  
        perPage: 5,  
        position: 'top',  
        perPageDropdown: [3, 7, 9],  
        dropdownAllowAll: false,  
        setCurrentPage: 2,  
        nextLabel: 'next',  
        prevLabel: 'prev',  
        rowsPerPageLabel: 'Rows per page',  
        ofLabel: 'of',  
        pageLabel: 'page',   
        allLabel: 'All',  
      }"  
    ></vue-good-table>  
  </div>  
</template><script>  
export default {  
  name: "App",  
  data() {  
    return {  
      searchTerm: "",  
      columns: [  
        {  
          label: "Name",  
          field: "name",  
          filterable: true  
        }  
      ],  
      rows: [  
        { name: "Jane" },  
        { name: "Alex" },  
        { name: "James" },  
        { name: "Joe" },  
        { name: "Bob" },  
        { name: "Mary" }  
      ]  
    };  
  },  
  methods: {  
    search() {}  
  }  
};  
</script>

All we did is pass some pagination options into the pagination-options props. The object we set as the value of the prop includes options for labels, text for the next and previous page buttons, the drop-down for the number of items to display on the table at one time, and more.

It also has a per-column filter feature which we can add easily by changing the column options as follows:

<template>  
  <div id="app">  
    <vue-good-table  
      :columns="columns"  
      :rows="rows"  
      :search-options="{  
        enabled: true,  
        externalQuery: searchTerm  
      }"  
    ></vue-good-table>  
  </div>  
</template>

<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      searchTerm: "",  
      columns: [  
        {  
          label: "Name",  
          field: "name",  
          filterable: true,  
          filterOptions: {  
            enabled: true,  
            placeholder: "Filter Name",  
            filterValue: "",  
            filterDropdownItems: [],  
            filterFn: this.columnFilterFn,  
            trigger: "enter"  
          }  
        }  
      \],  
      rows: \[  
        { name: "Jane" },  
        { name: "Alex" },  
        { name: "James" },  
        { name: "Joe" },  
        { name: "Bob" },  
        { name: "Mary" }  
      ]  
    };  
  },  
  methods: {  
    search() {}  
  }  
};  
</script>

All we added was the follow property to the column entry:

filterOptions: {  
  enabled: true,  
  placeholder: "Filter Name",  
  filterValue: "",  
  filterDropdownItems: [],  
  filterFn: this.columnFilterFn,  
  trigger: "enter"  
}

to enable filtering for the column.

Conclusion

vue-floatThead is a basic table component to let us build a table. On the other hand, vue-good-table is a full-featured table component that has sorting, filtering, pagination right out of the box. It’s also very easy to add those features to our tables.