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.
- Searching
- Sorting
- 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.
- columns
- tableData
- 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.
- data
- 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.
Thanks! Really enjoying these practical examples in Vue!
Nice!
It’s great and workable..by the way, do you have any documentations or guides for styling the data tables?
Very useful, thanks !!!!!
Very useful !!!
Something wron… I received a message like this:
[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got Object
Thanks Man this is really helpful
How to use column template ? Could you please give idea about that