Laravel 5.8 Advanced Vue Datatable Component Tutorial Example

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

Content Index

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.

npm install --global vue-cli

1	npm install --global vue-cli

After installing, Vue-cli globally. Now, Create a new Vue.js project by typing below command.

vue init webpack vue-datatable

1	vue init webpack vue-datatable

Now, go to your project directory and run the below command.

cd vue-datatable
npm run dev

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.

npm install vue-axios axios --save

1	npm install vue-axios axios --save

After installing, you must register that packages in your Main.js file to use.

// 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/>'
})

// 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 },

})

#3: Install vue-table-2 Library

Install vue-table-2 package for Vue Datatable.

npm i vue-tables-2

1	npm i vue-tables-2

//import vue-table-2
import { ServerTable } from 'vue-tables-2';
Vue.use(ServerTable);

//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.

<!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>

<!DOCTYPE html>

<html>

<head>

<title>vue-datatable</title>

<style>

.container{

padding:0px;

width:88%;

}

</style>

</head>

<body>

</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.

<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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<div>

<v-server-table ref="myTable"

:columns="columns"

:options="options">

</v-server-table>

</div>

</template>

export default {

data() {

return {

columns: ['id', 'name', 'email'],

options: {

headings: {

id: 'ID',

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,

}

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

composer create-project --prefer-dist laravel/laravel vue-datatable-backend

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.

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

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.

php artisan migrate

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.

php artisan db:seed --class=StudentSeederClass

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.

php artisan make:controller 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.

<?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);
    }
}

<?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.

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,
      }
 }

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,

}

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.

Route::get('/students', 'StudentController@getStudents');

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.

Advanced Vue Datatable Component Tutorial Example

Vue Datatable Features.

Vue Datatable Component

Laravel 5.8 Advanced Vue Datatable Component Tutorial

Vue Datatable Component

Dependencies

#1: Install Vue.js using Vue-cli

#2: Install Vue-axios and axios library

#3: Install vue-table-2 Library

#4: Create Datatable Component

#5: Create a Laravel project using Composer

#6: Change Database Configuration

#7: Create a Controller

#8: Define API Route for axios GET request

Advanced Vue Datatable Component Tutorial with example

About the author

Parth Vakil

1 Comment

Leave a Comment X