Hi Dev, Today we are going to learn Laravel 9 Livewire Datatables Example. In this tutorial we are going to cover laravel 9 livewire datatables with example. we are creating laravel livewire datatables using MedicOneSystems/livewire-datatables package.
Laravel Livewire is a library that makes it simple to build modern, reactive, dynamic interfaces using Laravel Blade as your templating language. This is a great stack to choose if you want to build an application that is dynamic and reactive but don’t feel comfortable jumping into a full JavaScript framework like Vue.
Steps for Laravel 9 Livewire Datatables Example:
- Step 1: Installing fresh new Laravel 9 Application
- Step 2: Creating Database and Configuration
- Step 3: Creating Dummy Records using Tinker Factory
- Step 4: Installing Livewire and Livewire-Datatables Package
- Step 5: Creating Component
- Step 6: Creating Route
- Step 7: Creating Blade View File
- Step 8 Testing
- Step 9: Conclusion
Also Read: Install NextUI with React Js in Laravel 9
Step 1: Installing fresh new Laravel 9 Application
First, we are installing a fresh new laravel 9 application. To install a laravel application run the following command in terminal.
composer create-project laravel/laravel livewire-datatables
cd livewire-datatables
Note: “livewire-datatables” is our laravel application name.

Step 2: Creating Database and Configuration
Now, we will create a database. First open phpmyadmin and create a database with name “livewire-datatables” (you may use anything you like).

Now we are going to add the database details to the laravel application. Open .env file and enter the database details.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=livewire-datatables
DB_USERNAME=root
DB_PASSWORD=

Now migrate the following to create tables with the following command.
php artisan migrate
Also Read: Laravel 9 Install Vue JS Example
Step 3: Creating Dummy Records using Tinker Factory
Now we will create a dummy records for users using tinker factory. Run the following command to create a dummy records.
php artisan tinker
App\Models\User::factory()->count(100)->create()

Also Read: React JS Image Upload using Vite in Laravel 9 Example
Step 4: Installing Livewire and Livewire-Datatables Package
In this step, we are installing Livewire and Livewire-datatables package.
Install Livewire:
composer require livewire/livewire
Install livewire-datatables package:
composer require mediconesystems/livewire-datatables --with-all-dependencies
–with-all-dependencies is use to upgrade or downgrade the other package to match with the this package.
Step 5: Creating Component
Now, we will create component file. Run the following command to create a component file.
php artisan make:livewire user-datatables
The above command will create a two file:
- app/Http/Livewire/UserDatatables.php
- resources/views/livewire/user-datatables.blade.php
Now update the file with the below code.
app/Http/Livewire/UserDatatables.php
<?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')
->label('Email'),
DateColumn::name('created_at')
->label('Creation Date')
];
}
}
Also Read: Create Custom Artisan Command Laravel 9 Example
Step 6: Creating Route
Now we will create route for our application. Add the following route to you routes/web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('user-datatables', function () {
return view('default');
});
Step 7: Creating Blade View File
Final step is to create a blade view file which we are call from route. Create default.blade.php in resources/views folder and add the following code.
resources/views/default.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Livewire Datatables Example - LaravelTuts.com</title>
@livewireStyles
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
<div class="container mx-auto">
<div class="shadow-sm rounded bg-gray-200 p-10 my-10">
<div class="text-center text-2xl font-bold mb-10">
Laravel 9 Livewire Datatables Example - LaravelTuts.com
</div>
<div class="card-body">
<livewire:user-datatables
searchable="name, email"
exportable
/>
</div>
</div>
</div>
</body>
@livewireScripts
</html>
Also Read: How to create SEO friendly sluggable URL Laravel 9 Example
Step 8 Testing
Now its time to test the laravel application. Run the following command to start the laravel server.
php artisan serve
Then open the following URL in any web browser.
http://127.0.0.1:8000/user-datatables
Preview:

Step 9: Conclusion
Today, We had learn Laravel 9 Livewire Datatables Example. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.
Also Read: Restrict User Access from IP Address in Laravel 9 Tutorial
[…] Also Read: Laravel 9 Livewire Datatables Example […]
[…] Also Read: Laravel 9 Livewire Datatables Example […]
[…] Also Read: Laravel 9 Livewire Datatables Example […]
[…] Also Read: Laravel 9 Livewire Datatables Example […]