Laravel 11 Livewire Datatable Example
Websolutionstuff | Jun-05-2024 | Categories : Laravel
Hello, laravel web developers! In this article, we'll see how to create datatable in laravel 11 livewire using mediconesystems/livewire-datatables. Also, you can filter data, sort columns, hide/show columns, and export data in Excel and CSV format.
You can customize paging and pagination in Livewire datatable. livewire datatable provides built-in datatable like Simple, Intermediate, Complex, Relation, and Deletable.
Laravel 11 Livewire Datatable Example
In this step, we'll install laravel 11 using the following command.
composer create-project --prefer-dist laravel/laravel livewire_datatable_example
Next, we'll install Laravel Livewire using the following composer command.
composer require livewire/livewire
composer require mediconesystems/livewire-datatables
Then, we'll 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')
];
}
}
We'll create a blade file and include @livewireStyles, and @livewireScripts.
resources/views/default.blade.php
<!DOCTYPE html>
<html>
<head>
<title>how to create datatable in laravel 11 livewire - 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">
how to create datatable in laravel 11 livewire - 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>
Then, we'll define routes to the web.php file.
routes/web.php
Route::get('user-datatables', function () {
return view('default');
});
You might also like:
- Read Also: Datatables Expand/Collapse Columns
- Read Also: How To Change Text In Laravel 9 Datatable
- Read Also: How to Filter Datatable using Dropdown in Laravel 10
- Read Also: 7 Easy Steps: Create Laravel 10 Livewire CRUD Operation
Recommended Post
Featured Post
How To Add Bootstrap 5 Modal I...
In this article, we will see how to add the bootstrap 5 modal in laravel 10. Here, we will learn about the bootstra...
Apr-12-2023
How to Upgrade PHP 7.4 to 8.0...
Hey there! I recently faced the need to upgrade my PHP version from 7.4 to the latest 8.0 on my Ubuntu server. It might...
Nov-06-2023
How to Set Auto Database BackU...
In this article, we will see how to set auto database backup using the cron scheduler in laravel. here we will set ...
Feb-18-2021
How to Update User Profile in...
Hello, laravel developers! In this article, we'll see how to update user profiles in laravel 11. Here, we'll cha...
Jul-12-2024