In this tutorial you will learn about the Laravel 8 Livewire Datatables Tutorial and its application with practical example.
In this Laravel 8 livewire dataTable example tutorial I will show you how to install and use livewire datatable in laravel 8 application. In this tutorial you will learn to install and use livewire datatable in your laravel project. In this article I will share example to install and use livewire datatable in laravel. We will be using mediconesystems/livewire-datatables package packge to use livewire datatable in laravel.
Laravel 8 Livewire Datatables Tutorial
In this step by step tutorial I will guide you through the process to install and use livewire datatable in your project. Please follow the instruction given below:
- Step 1 – Download Laravel 8 App
- Step 2 – Connecting App To Database
- Step 3 – Install Livewire & DataTable Livewire
- Step 4 – Build User DataTable Livewire Component
- Step 5 – Create Routes
- Step 6 – Update UserDataTable Component File
- Step 7 – Update Welcome Blade File
- Step 8 – Start Development Server
Step 1 – Download Laravel 8 App
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
1 |
composer create-project --prefer-dist laravel/laravel Laravel8CRUD |
Step 2 – Connecting App To Database
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=database-name DB_USERNAME=database-user-name DB_PASSWORD=database-password |
Step 3 – Install Livewire & DataTable Livewire
In this step, we will install livewire and Livewire DataTable Package via the composer dependency manager. Use the following command to install livewire and Livewire DataTable Package.
1 2 3 |
composer require livewire/livewire composer require mediconesystems/livewire-datatables |
Now, run the following command to build your assets:
1 |
npm install |
To run npm:
1 |
npm run dev |
Now, run the migration to create database table using following artisan command:
1 |
php artisan migrate |
Step 4 – Build User DataTable Livewire Component
In this step we will be creating livewire datatable component using following command:
1 |
php artisan make:livewire user-datatables |
The above command will create two files:
1 2 3 |
app/Http/Livewire/UserDatatables.php resources/views/livewire/user-datatables.blade.php |
Step 5 – Create Routes
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
1 2 3 |
Route::get('user-datatables', function () { return view('welcome'); }); |
Step 6 – Update UserDataTable Component File
Now, update the UserDatatables.php component file with the following code, which is placed on app/Http/Livewire directory:
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 |
<?php namespace App\Http\Livewire; use Livewire\Component; use App\Models\User; use Illuminate\Support\Str; use Mediconesystems\LivewireDatatables\Column; use Mediconesystems\LivewireDatatables\NumberColumn; use Mediconesystems\LivewireDatatables\DateColumn; use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable; class UserDatatables extends LivewireDatatable { public $model = User::class; /** * Write code on Method * * @return response() */ public function columns() { return [ NumberColumn::name('id') ->label('ID') ->sortBy('id'), Column::name('name') ->label('Name'), Column::name('email'), DateColumn::name('created_at') ->label('Creation Date') ]; } } |
Step 7 – Update Welcome Blade File
In this step we will create blade view file. Open welcome.blade.php file and update the following code into it, which is placed on resources/views/ directory:
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 |
<!DOCTYPE html> <html> <head> <title>Laravel 8 Livewire DataTable Example</title> @livewireStyles <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.2/tailwind.min.css" integrity="sha512-l7qZAq1JcXdHei6h2z8h8sMe3NbMrmowhOl+QkP3UhifPpCW2MC4M0i26Y8wYpbz1xD9t61MLT9L1N773dzlOA==" crossorigin="anonymous" /> </head> <body> <div class="container"> <div class="card"> <div class="card-header"> Laravel Livewire Example </div> <div class="card-body"> <livewire:user-datatables searchable="name, email" exportable /> </div> </div> </div> </body> @livewireScripts </html> |
Now, run the following command to create dummy records in database:
1 2 3 |
php artisan tinker User::factory()->count(100)->create() |
Step 8 – Start Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
1 |
http://127.0.0.1:8000/user-datatables |