Laravel 9 Livewire Datatable Example

    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
Read Also: Laravel 9 Livewire Dependent Dropdown
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

    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'),
  
            DateColumn::name('created_at')
                ->label('Creation Date')
        ];
    }
}
Step 4: Create View File

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

    resources/views/default.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Livewire Datatable Example - Websolutionstuff</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 - Websolutionstuff
      </div>
      <div class="card-body">
        <livewire:user-datatables 
            sort="name|asc"
            searchable="name, email"
            hide="latitude, longitude"
            exportable />
  
      </div>
    </div>
        
</div>
    
</body>
  
@livewireScripts
  
</html>
Read Also: Laravel 9 Livewire CRUD Operation
Step 5: Create Route

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

    routes/web.php

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

    Output:

    laravel_9_livewire_datatable_output

    You might also like:

Bình luận
Vui lòng đăng nhập để bình luận
Một số bài viết liên quan