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 Web Notification...
In this article, we will see how to create web notifications in laravel 9 using pusher. Here, we will learn how to...
Feb-03-2023
Laravel 11 Install Yajra Datat...
In this tutorial, we'll explore an example of installing Yajra Datatable in Laravel 11. In every project, it's e...
Apr-10-2024
How To Install PHP XML Extensi...
In this article, I will guide you through the process of installing the PHP XML extension in Ubuntu. The PHP XML extensi...
Jul-19-2023
How To Get Current Week Record...
In this tutorial, we will see how to get current week records in MySQL. Many times we need to get current week reco...
Feb-07-2022