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.
- Laravel 5.5+
- Vue JS
Let’s get started by creating a new Laravel Project
$ laravel new vue-datatable-laravel
$ 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:
We need to create a new controller, so the command
php artisan make:controller UsersController creates a new controller for us inside the
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
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:
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.