Laravel Vue

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



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.

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

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

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

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

#3: Install vue-table-2 Library

Install vue-table-2 package for Vue Datatable.

Register vue-table-2 package in Main.js.

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.

After applying Material CSS. your web application looks like

vue-datatable-layout

#4: Create Datatable Component

Create a new file called Datatable.vue inside src >> components folder and write the following code in it.

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

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.

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.

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.

After, you will able to see all the laravel default table and data in the database.

vue-datatable-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.

After executing above command, File is created inside app >> Http >> Controllers folder. Now, write the below code in StudentController file.

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.

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.

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.




About the author

Parth Vakil

Full Stack Developer at Artixun Softwares. My specialty is web development with Laravel/Node development, using JS libraries such as JQuery, Angular, Vue, React and Ionic

Leave a Comment