Laravel 9 livewire dataTable example; In this tutorial, we will learn how to install livewire datatable and implement dataTable with livewire package in laravel 9 apps.
Laravel 9 Livewire Datatables Tutorial with Example
Follow the following steps to install and use dataTable with livewire in laravel 9 apps:
- Step 1 – Download Laravel 9 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 9 App
First of all, download or install laravel 9 new setup. So, open the terminal and type the following command to install the new laravel 9 app into machine:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Connecting App To Database
Setup database with downloaded/installed laravel app. So, we need to find .env file and setup database details as following:
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, execute the following command on terminal to install livewire and dataTables livewire package in laravel app:
composer require livewire/livewire composer require mediconesystems/livewire-datatables
Then, execute the “npm install && npm run dev” command to build assets:
npm install
To run npm:
npm run dev
Then, Execute the following command on the terminal to create tables into the database:
php artisan migrate
Step 4 – Build User DataTable Livewire Component
In this step, create users dataTable livewire components by executing the following command on terminal:
php artisan make:livewire user-datatables
This command will create two files, which is located on following path:
app/Http/Livewire/UserDatatables.php resources/views/livewire/user-datatables.blade.php
Step 5 – Create Routes
In this step, create routes for laravel crud app. So, open web.php file from the routes directory of laravel livewire data tables app. And update the following routes into the web.php file:
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:
<?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, open welcome.blade.php file and update the following code into it, which is placed on resources/views/ directory:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Livewire DataTable Example - Tutsmake.com</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 9 Livewire DataTable Example - Tutsmake.com
</div>
<div class="card-body">
<livewire:user-datatables
searchable="name, email"
exportable
/>
</div>
</div>
</div>
</body>
@livewireScripts
</html>
Now, execute the following command on the terminal to create dummy records in database:
php artisan tinker User::factory()->count(100)->create()
Step 8 – Start Development Server
Last step, open command prompt and run the following command to start developement server:
php artisan serve
Then open browser and hit the following url on it:
http://127.0.0.1:8000/user-datatables
