Vue Datatable Component Tutorial: The Complete Guide

For this demo, I am using a vue-tables-2 library.  To send a network request and fetch the data from the server, I am using Axios promise-based library. You can find more on Github. Finally, I will show you client-side datatable implementation. For the server-side implementation of the datatables, you need to have a ready API to query the database.

Vue Datatable Component

In this example, we will create a demo server and then fetch the data from that server and feed it to the vuejs. Next, we will see some options to configure the vue datatables. We see first the Client-side datatable, and then we will go for server-side datatable.

Dependencies

• Vue.js (>=2.0)
• Server Side: axios OR vue-resource (>=0.9.0) OR jQuery for the AJAX requests

I am using Axios, but you can use any above-mentioned libraries.

Compatibility

• Vuex (>=2.0)
• Bootstrap 3 / Bootstrap 4 / Bulma

I am using Bootstrap 4 for this example.

Step 1: Install Vue.js using Vue CLI.

First of all, let us install Vue CLI and then create a new Vue project. Type the command.

npm install -g @vue/cli
# or
yarn global add @vue/cli

Okay, now create a Vue.js project using this command.

vue create vuedatatable

Now go to the project folder.

cd vuedatatable

Open project in the editor. I am using VSCode.

code .

Start the dev server using this command.

npm run serve

Step 2: Configure the backend server.

For this first demo, I am using json-server. First, let us install the package using the node package manager.

yarn global add json-server

# or

npm install -g json-server

Now, inside the root of the project, create one folder called data, and inside that, create one file called db.json.

Write the following code inside a db.json file.

{
    "songs": [
    {
        "id": "1",
        "name": "Thriller",
        "album": "Thriller"
    },
    {
        "id": "2",
        "name": "Dangerous",
        "album": "Dangerous"
    },
    {
        "id": "3",
        "name": "Stranger In Moscow",
        "album": "History"
    },
    {
        "id": "4",
        "name": "Smooth Criminal",
        "album": "BAD"
    },
    {
        "id": "5",
        "name": "BAD",
        "album": "BAD"
    },
    {
        "id": "6",
        "name": "Black or White",
        "album": "Dangerous"
    },
    {
        "id": "6",
        "name": "You rock My World",
        "album": "Invincible"
    },
    {
        "id": "7",
        "name": "Hold My Hand",
        "album": "Michael"
    },
    {
        "id": "8",
        "name": "Rock With You",
        "album": "Off The Wall"
    },
    {
        "id": "9",
        "name": "Billy Jean",
        "album": "Thriller"
    },
    {
        "id": "10",
        "name": "They don't really care about us",
        "album": "History"
    }
  ]
}

So, this data will be served by json-server. The form of the data is JSON, so it is easy to feed the data to the Vue.js application.

Now, start the JSON server using the following command.

json-server --watch data/db.json --port 4000

Now, go to this URL: http://localhost:4000. It will serve as JSON data.

Step 3: Install Axios and vue-axios.

Go to the CMD and type this command.

npm install vue-axios axios --save

Register these packages inside src >> main.js file.

// main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

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

Step 4: Make components inside the components folder.

Inside src >> components folder, create a file called VueDataTable.vue file.

// VueDataTable.vue

<template>
  <div>
    DataTable
  </div>
</template>

<script>
export default {

}
</script>

Now, import this component inside src >> App.vue file.

// App.vue

<template>
  <div id="app">
    <vue-data-table></vue-data-table>
  </div>
</template>

<script>
import VueDataTable from './components/VueDataTable'

export default {
  name: 'app',
  components: {
    VueDataTable
  }
}
</script>

Step 5: Install Bootstrap 4 library.

Type the following command to install Bootstrap 4.

npm install bootstrap --save

Import bootstrap.min.css file inside main.js file.

// main.js

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

Step 6: Install vue-tables-2 library.

Type the following command to install the vue-tables-2 library.

npm install vue-tables-2 --save

The next step is to register vue-tables-2 inside a main.js file. I am showing the whole main.js file.

// main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { ClientTable } from 'vue-tables-2';

Vue.use(ClientTable);

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

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

Right now, I am just using a ClientTable module.

Step 7: Send an Axios GET request.

Okay, now we need to send a GET request to the json-server and fetch the data.

So, when the VueDataTable.vue component is mounted, we send a request and fetch the data. Then that fetched data assigned to the local variable and display inside the vue-client-table.

// VueDataTable.vue

<template>
  <div class="container">
      <v-client-table 
          :data="tableData"
          :columns="columns" 
          :options="options">
      </v-client-table>
  </div>
</template>

<script>

export default {
    data() {
        return {
            columns: ['id', 'name', 'album'],
            tableData: [],
            options: {
                headings: {
                    id: 'ID',
                    name: 'Song Name',
                    album: 'Album'
                },
                sortable: ['name', 'album'],
                filterable: ['name', 'album']
            }
        }
    },
    mounted() {
        this.axios.get('http://localhost:4000/songs').then(res => {
            this.tableData = res.data
        })
    }
 
}
</script>

<style>
#app {
  width: 95%;
  margin-top: 50px; 
}

.VuePagination {
  text-align: center;
}

.vue-title {
  text-align: center;
  margin-bottom: 10px;
}

.vue-pagination-ad {
  text-align: center;
}

.glyphicon.glyphicon-eye-open {
  width: 16px;
  display: block;
  margin: 0 auto;
}

th:nth-child(3) {
  text-align: center;
}

.VueTables__child-row-toggler {
  width: 16px;
  height: 16px;
  line-height: 16px;
  display: block;
  margin: auto;
  text-align: center;
}

.VueTables__child-row-toggler--closed::before {
  content: "+";
}

.VueTables__child-row-toggler--open::before {
  content: "-";
}

</style>

Save the file and go to the http://localhost:8080/

You can see that our Client-side Datatable is working correctly.

 

You can do the following things with Datatable.

1. Searching
2. Sorting
3. Pagination

So almost all the functionalities that the general data tables are providing are including in this example.

Explanation

First, for our component, we have taken 3 data properties.

1. columns
2. tableData
3. options

Columns property defines which columns are we need to display from the backend.

The tableData is a property defines as actual data from the backend. It is an array that contains the whole data.

The options are an object that contains the various configuration for our DataTable.

You can find more options at this link.

Server-side DataTable

On server side DataTable, you need to send a GET request to the server with the Parameters and then respond.

Let us change the db.json file to meet the requirement of the <v-server-table> data.

{
    "songs": {
        "data" : [
    {
        "id": "1",
        "name": "Thriller",
        "album": "Thriller"
    },
    {
        "id": "2",
        "name": "Dangerous",
        "album": "Dangerous"
    },
    {
        "id": "3",
        "name": "Stranger In Moscow",
        "album": "History"
    },
    {
        "id": "4",
        "name": "Smooth Criminal",
        "album": "BAD"
    },
    {
        "id": "5",
        "name": "BAD",
        "album": "BAD"
    },
    {
        "id": "6",
        "name": "Black or White",
        "album": "Dangerous"
    },
    {
        "id": "6",
        "name": "You rock My World",
        "album": "Invincible"
    },
    {
        "id": "7",
        "name": "Hold My Hand",
        "album": "Michael"
    },
    {
        "id": "8",
        "name": "Rock With You",
        "album": "Off The Wall"
    },
    {
        "id": "9",
        "name": "Billy Jean",
        "album": "Thriller"
    },
    {
        "id": "10",
        "name": "They don't really care about us",
        "album": "History"
    }
],
    "count": "11"
    }
}

The return response must have two properties.

1. data
2. count

In a real-time scenario, the data is coming from a backend server, but for this example, I am changing the JSON object manually to show the server-side table.

Now, first, change the main.js file and import the ServerTable module.

// main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { ServerTable } from 'vue-tables-2';

Vue.use(ServerTable);

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

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

Okay, now we can write the code inside VueDataTable.vue file.

// VueDataTable.vue

<template>
  <div class="container">
      <v-server-table
          :columns="columns" 
          :options="options">
      </v-server-table>
  </div>
</template>

<script>

export default {
    data() {
        return {
            columns: ['id', 'name', 'album'],
            options: {
                headings: {
                    id: 'ID',
                    name: 'Song Name',
                    album: 'Album'
                },
                sortable: ['name', 'album'],
                filterable: ['name', 'album'],
                requestFunction: function () {
                    return this.axios.get('http://localhost:4000/songs').catch(function (e) {
                        this.dispatch('error', e);
                    }.bind(this));
                },
                responseAdapter: function(resp) {
                  return {
                    data: resp.data.data,
                    count: resp.data.count
                  }
                }
            }
        }
    }
}
</script>

<style>
#app {
  width: 95%;
  margin-top: 50px; 
}

.VuePagination {
  text-align: center;
}

.vue-title {
  text-align: center;
  margin-bottom: 10px;
}

.vue-pagination-ad {
  text-align: center;
}

.glyphicon.glyphicon-eye-open {
  width: 16px;
  display: block;
  margin: 0 auto;
}

th:nth-child(3) {
  text-align: center;
}

.VueTables__child-row-toggler {
  width: 16px;
  height: 16px;
  line-height: 16px;
  display: block;
  margin: auto;
  text-align: center;
}

.VueTables__child-row-toggler--closed::before {
  content: "+";
}

.VueTables__child-row-toggler--open::before {
  content: "-";
}

</style>

So, first, I have implemented my request function to fetch the server data.

We need to pass some parameters to get all functionalities, but right now, I am just displaying the data.

In this example, remember Sorting, Searching, and Pagination will not work because this is a server-side table, and we need to send a request with the parameter to get the desired data.

I have just implemented the code to fetch the data. Also, I have used the responseAdapter function to format the client-specific data.

You get the idea right; if you want to build a fully functional server-side datatable, you have a backend that responds every time you send a request.

In client-side, it is not needed because all the calculation is done on the client-side, so only one time do you need to send a request, and you are done.

That’s it for this tutorial. Thanks for taking it.