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
Laravel 11 Firebase Push Notif...
Hello, web developers! This article will explore how to send web push notifications in Laravel 11 using Fireba...
Sep-11-2024
How to Add Select Clear Select...
Hey everyone! Have you ever wanted to make your website's dropdown menus more interactive and user-friendly? Well, I...
Feb-19-2024
How To Upload And Preview Imag...
In this article, we will see how to upload and preview images in react js. You can learn how to show an i...
Sep-06-2022
Laravel 11 Simple Pagination E...
Hello developers! In this article, we'll see the laravel 11 simple pagination example. Here, we'll use Bootstrap...
May-03-2024