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 Simple, Intermediate, Complex, Relation, 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
In this step, we will install laravel 9 using the following command.
composer create-project --prefer-dist laravel/laravel livewire_datatable_example
In this step, we will install laravel livewire using the following composer command.
composer require livewire/livewire
composer require mediconesystems/livewire-datatables
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')
];
}
}
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>
In this step, we will add routes to the web.php file.
routes/web.php
Route::get('user-datatables', function () {
return view('default');
});
Output:
You might also like:
- Read Also: Laravel 9 Livewire Toastr Notification
- Read Also: Multiple Row Grouping Datatables jQuery
- Read Also: Dropdown Filter On Specific Column In Datatable
- Read Also: Laravel 9 Refresh DataTable Without Reloading Page
Recommended Post
Featured Post
How To Redirect Another Page U...
In this article, we will see how to redirect another page using javascript. we will redirect the page to another pa...
Nov-04-2022
Laravel 10 Livewire Multi Step...
Hello developers! Today, I'm excited to walk you through the process of creating a multi-step form wizard using...
Dec-18-2023
Laravel 8 QR Code Generate Exa...
In this post we will see Laravel 8 qr code generate example. we will generate QR Code using simple-qrcode package....
Jun-30-2021
Laravel 11 API Authentication...
Hello, laravel web developers! In this article, we'll see how to API authentication in laravel 11 using a passp...
Jun-28-2024