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 Create Zip File Using Z...
In this article, we will see how to create a zip file using zipArchive in laravel. Sometimes we have requirements to hav...
Sep-16-2020
Cron Job Scheduling In Laravel
In this article, we will see cron job scheduling in laravel. Many times we require to run some piece of code in a specif...
Sep-28-2020
Laravel 9 One To Many Polymorp...
In this article, we will see laravel 9 one to many polymorphic relationship. A one-to-many polymorphic relation is...
Apr-05-2022
Laravel 11 ChartJS Line Chart...
Hello developer! In this article, we'll see how to create a dynamic line chart in laravel 11 using chart js. Yo...
May-10-2024