Vue Datatable Component Example

In this tutorial, I will show you Vue Datatable Component Example. 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. I will show you client side datatable implementation. For the server-side implementation of the datatables, you need to have a ready API so that you can query the database.

Vue Datatable Component Example

For this example, we will create a demo server and then fetch the data from that server and feed it to the vuejs. 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 backend server.

For this first demo, I am using json-server. Let us install the package using 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 a 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 component inside 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 the  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

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 mounted, then we send a request and fetch the data. Then that fetched data assign to the local variable and display it inside 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 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 on options in this link.

Server-side DataTable

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

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 fully functional server-side datatable then 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 client side, so only one time you need to send a request, and you are done.

Finally, Vue Datatable Component Example is over. Thanks for taking.