Create dynamic data table component with Laravel and Vue JS . (Part 1)

Data tables are used widely in the web applications. Data tables allow the users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. In this tutorial we will learn to implement a simple data table component with Vue JS, Laravel and Bootstrap.

Requirements:

• Laravel 5.5+
• Vue JS

Let’s get started by creating a new Laravel Project

$ laravel new vue-datatable-laravel

Next we need to install the javascript dependencies:

$ npm install

Next, we need to prepare the database. Let’s create a database called laravel-vue-table and make changes on the .env files accordingly.

Next let’s make changes on the users’ table’s migration as will be using users table to display the contents in the table.

Run the migration using the command:php artisan migrate which runs the migration for the project and new table users is created in our database.We need to prepare the data from the Laravel backend to feed to the data table.

We will create by adding a route. So inside the routes/web.php we add a new route with get request:

$this->get('users/data-table', 'UsersController@getUsersForDataTable')->name('users.table');

We need to create a new controller, so the commandphp artisan make:controller UsersController creates a new controller for us inside the app/Http/Controllers directory.

We will be using Laravel resource to transfrom the data as per our need. So let’s create a new resource file using the following command:

php artisan make:resource UserResource

Great. We are going great.

Now lets move on to User model i.e.app/User.php to make the following changes. Since we added a new field address to the users migration, we need to define that address field is also fillable. So our User model looks like this:

Now, before fetching all the users, we will prepare our Resource file:

For now, let’s fetch all the users and apply our UserResource to transform the data:

Next is we need to seed some data to the users table. Laravel out of the box ships with the UserFactorty file. We need to make some changes on the database/factories/UserFactory.php file by adding new field address inside the array of the data that is being stored in database.

'address'           => $faker->address,

Now we need to make seed file for Users table by using the following command: php artisan make:seed UsersTableSeeder.

Now we will seed the data by using the command:

php artisan db:seed --class=UsersTableSeeder

Now 50 new users have been added to our database.(The required number can be easily changed in the above seeder file.) So by visiting the url https://yourapp.dev/users/data-table we get list of all the users.

Now we are ready with the backend. So let’s move on to the frontend.

We will create a new component DataTable.vue inside the directory resources/js/components

Now we need to make changes on the resources/js/components/app.js file. Here we will register the DataTable component

Now, we need to make changes on the welcome.blade.php file:

So by visiting the app base url https://myapp.dev or http://localhost:8000 i get the following result:

Conclusion:

We just created a very simple dynamic data table component with vue js and Laravel. (We will be adding pagination, sorting and searching functionalities on the second part.)

Link to github repo for first part.

Buy me a coffee.