Vue Datatable Component Tutorial: If you want to display data in tabular format with Vue Datatable rather than simple HTML table. Then Vue.js provides Advanced Datatable Component which will able to process on data such as sorting, searching, and pagination along with displaying records in tabular format.
Vue.js Datatable will also fetch dynamic data from serverside and gives an excellent look to your table than simple HTML Table.
Here, you can see a live demo on Vue Datatable Component
Vue Datatable Features.
- Efficient Data Loading from server-side.
- Multi Column data filtering.
- Multi Column data sorting.
- Dynamic pagination according to data length.
- Customizable and configurable column with label, action button, design, text alignment etc.
- Provide Responsive Table.
- Display collapsible row for displaying child records.
Here, you will learn about
Vue Datatable Component
with server-side processing in Laravel after completion of this tutorial.
Laravel 5.8 Advanced Vue Datatable Component Tutorial
In this tutorial, I am using Laravel 5.8 for fetching data from the server and render it in
Vue Datatable Component
Dependencies
- Vue.js (>=2.0).
- Axios Or Vue Resource for server-side processing.
- vue-tables-2 library for Datatable Component
#1: Install Vue.js using Vue-cli
First, we require to install Vue-cli for creating a new Vue project. So, installing Vue-cli by typing following command in terminal.
1 |
npm install --global vue-cli |
After installing, Vue-cli globally. Now, Create a new Vue.js project by typing below command.
1 |
vue init webpack vue-datatable |
Now, go to your project directory and run the below command.
1 2 |
cd vue-datatable npm run dev |
#2: Install Vue-axios and axios library
Axios is used for sending a request to the server. Vue Datatable Component will always carry a GET request to fetch data from the server.
So, you need to install Vue-axios and axios packages to accomplish the task. Install it by typing below command.
1 |
npm install vue-axios axios --save |
After installing, you must register that packages in your Main.js file to use.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' //axios import VueAxios from 'vue-axios' import axios from 'axios' Vue.use(VueAxios, axios); Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' }) |
#3: Install vue-table-2 Library
Install vue-table-2 package for Vue Datatable.
1 |
npm i vue-tables-2 |
Register vue-table-2 package in Main.js.
1 2 3 |
//import vue-table-2 import { ServerTable } from 'vue-tables-2'; Vue.use(ServerTable); |
Now, Apply CSS Framework to design your web application. You can use Bootstrap 3 / Bootstrap 4, Materialize, or any CSS Framework you want.
Here, we have used Materialize CSS CDN in this tutorial inside index.html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-datatable</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .container{ padding:0px; width:88%; } </style> </head> <body> <div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> <!-- built files will be auto injected --> </body> </html> |
After applying Material CSS. your web application looks like
#4: Create Datatable Component
Create a new file called Datatable.vue inside src >> components folder and write the following code in it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<template> <div> <!--<vue-topprogress ref="topProgress"></vue-topprogress>--> <div class="container"> <v-server-table ref="myTable" :columns="columns" :options="options"> </v-server-table> </div> </div> </template> <script> export default { data() { return { columns: ['id', 'name', 'email'], options: { headings: { id: 'ID', name: 'Student Name', email: 'Email', // action: 'Action' }, perPage: 10, perPageValues: [10,20,25,50,100], sortable: ['name', 'email'], filterable: ['name'], requestFunction: function (data) { console.log(data); let self = this; return self.axios.get('your server URL/api/students', { params: data }).catch(function (e) { self.dispatch('error', e); }.bind(this)); }, responseAdapter: function(resp) { console.log(resp) return { data: resp.data.data, count: resp.data.total, } } } } }, mounted() { } } </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 { margin-top:20px; } .VueTables__child-row-toggler--closed::before { content: "+"; } .VueTables__limit-field{ margin-top:30px; } .VueTables__child-row-toggler--open::before { content: "-"; } .VuePagination nav{ background-color: transparent !important; color:black; box-shadow: none; text-align: right; padding:0px; } .VuePagination nav ul{ float:right; margin:0px; } .VuePagination nav p{ text-align: right; padding:0px; } </style> |
Here, We have sent a GET request with parameters to the server and received a response from the server. Then received data will be displayed inside the element.
To accomplish this axios request to the server and fetch data from the server, We have used Laravel 5.8 in this tutorial.
Now, we are going to create a new Laravel 5.8 project and configure the database.
#5: Create a Laravel project using Composer
1 |
composer create-project --prefer-dist laravel/laravel vue-datatable-backend |
#6: Change Database Configuration
Now, create a database with the help of phpMyAdmin or any other database tool. Then connect the database to the newly created Laravel Project with the following configuration in the .env file.
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=vue_datatable DB_USERNAME=root DB_PASSWORD=write your MySQL password |
Here, I have made a database called vue_datatable and written this database name in DB_DATABASE.
Once the configuration is done, Run the Laravel Migration command.
1 |
php artisan migrate |
Here, I have also created a seeder class called StudentSeederClass in this tutorial to seed the database with test data. So, you need to run seeder command.
1 |
php artisan db:seed --class=StudentSeederClass |
After, you will able to see all the laravel default table and data in the database.
#7: Create a Controller
Now, in this tutorial, I have used the default Laravel user’s table and model. So, directly, I am going to create a controller called StudentController.
1 |
php artisan make:controller StudentController |
After executing above command, File is created inside app >> Http >> Controllers folder. Now, write the below code in StudentController file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php namespace App\Http\Controllers; use App\User; use Illuminate\Http\Request; class StudentController extends Controller { public function getStudents(Request $request) { if($request['query']) { $users = User::select('id', 'name', 'email')->where('name', 'like', '%' . $request['query'] . '%')->paginate($request->limit ? $request->limit : 20); } elseif($request->orderBy) { $users = User::select('id', 'name', 'email')->orderBy($request->orderBy, $request->ascending == 1 ? 'ASC' : 'DESC')->paginate($request->limit ? $request->limit : 20); } else { $users = User::select('id', 'name', 'email')->paginate($request->limit ? $request->limit : 20); } return response()->json($users); } } |
Here, We have created a getStudents() method with parameters like a query for filtering and orderBy for sorting the data. If none of the parameters is passed, then all the record will be displayed in ascending order.
#8: Define API Route for axios GET request
Now, you will see the below code in the Datatable.vue file which was created in the step-4.
1 2 3 4 5 6 7 8 9 10 11 12 |
requestFunction: function (data) { let self = this; return self.axios.get('your domain name/api/students', { params: data }).catch(function (e) { self.dispatch('error', e); }.bind(this)); }, responseAdapter: function(resp) { return { data: resp.data.data, count: resp.data.total, } } |
So, to accomplish the GET axios request, you need to define an API route on server side. Add the below line inside the api.php file which is located in routes folder.
1 |
Route::get('/students', 'StudentController@getStudents'); |
This students API route will call the getStudents() method of StudentController created at step-7 with parameters coming from axios request.
Finally, I have completed
Advanced Vue Datatable Component Tutorial with example
I hope you have learned from this tutorial and will implement Vue.js Datatable in your next project after knowing its features. Thank you.
Is it possible to add a column to the table that has some html(like edit buttons)?