Laravel 9 Livewire Datatable Example

WebSolutionStuff | Nov-30-2022 | Categories : Laravel

In this article, we will see the laravel 9 livewire datatable example. Here, we will learn how to use livewire datatables in laravel 8 and laravel 9. we will use MedicOneSystems/livewire-datatables package to create datatable in laravel 9.

Also, you can filter data, sort columns, hide/show columns, and export data in excel and CSV format. and you can customize paging and pagination in livewire datatable. livewire datatable provides built-in datatable like SimpleIntermediateComplexRelation, and Deletable.

So, let's see livewire datatable in laravel 9, and laravel 9 livewire datatable with filters and search.

Step 1: Install Laravel 9

Step 2: Install Livewire

Step 3: Create Livewire Component

Step 4: Create View File

Step 5: Create Route


Step 1: Install Laravel 9

In this step, we will install laravel 9 using the following command.

composer create-project --prefer-dist laravel/laravel livewire_datatable_example



Step 2: Install Livewire

In this step, we will install laravel livewire using the following composer command.

composer require livewire/livewire

composer require mediconesystems/livewire-datatables


Step 3: Create Livewire Component

Now, we will create a livewire datatable component using the following command.

php artisan make:livewire user-datatables


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 [
                ->label('Creation Date')


Step 4: Create View File

Now, we will create a blade file and include @livewireStyles, and @livewireScripts.


<!DOCTYPE html>
    <title>Laravel 9 Livewire Datatable Example - Websolutionstuff</title>
    <link rel="stylesheet" href="" integrity="sha512-l7qZAq1JcXdHei6h2z8h8sMe3NbMrmowhOl+QkP3UhifPpCW2MC4M0i26Y8wYpbz1xD9t61MLT9L1N773dzlOA==" crossorigin="anonymous" />
<div class="container">
    <div class="card">
      <div class="card-header">
        Laravel 9 Livewire Datatable Example - Websolutionstuff
      <div class="card-body">
            searchable="name, email"
            hide="latitude, longitude"
            exportable />



Step 5: Create Route

In this step, we will add routes to the web.php file.


Route::get('user-datatables', function () {
    return view('default');





You might also like:

Recommended Post

Featured Post

Follow us
facebooklogo github instagram twitter