Seperti yang sudah diketahui, datatable merupakan component yang sering digunakan untuk menyajikan data. Karena fungsinya yang cukup lengkap seperti sorting, searching dan pagination. Tapi keterbatasan menggunakan datatable adalah kita harus menggunakan jQuery di dalamnya dan Bootstrap. Nah apabila aplikasi kita sekarang dibangun menggunakan Laravel, Livewire dan Tailwinds, kita juga bisa membuat fungsi table layaknya datatable tersebut,
Setup Laravel dan Livewire, bisa dilihat pada halaman dokumentasi di https://laravel-livewire.com/docs/2.x/installation
Saya anggap kita sudah punya tabel Categories yang ada isinya dan sudah dibuat modelnya, dan buat dulu component Livewirenya dengan perintah
php artisan make:component Categories
Pada class Categories, kita ubah menjadi seperti berikut
<?php
namespace App\Http\Livewire;
use App\Models\Categories as ModelsCategories;
use Livewire\Component;
use Livewire\WithPagination;
class Categories extends Component
{
use WithPagination;
public $category_id, $name, $description,$searchParam;
public $columnOrder = 'id';
public $order = 'ASC';
public function render()
{
$searchParam = '%'.$this->searchParam.'%';
$order = $this->order;
$columnOrder = $this->columnOrder;
return view('livewire.categories', [
'data' => ModelsCategories::orderBy($columnOrder,$order)->where('name','like',$searchParam)->paginate(5),
]);
}
public function sort($column){
$this->order = $this->order == 'ASC' ? 'DESC' : 'ASC';
$this->columnOrder = $column;
}
}
Untuk pengaplikasiannya, kira-kira seperti ini untuk pencarian
<input type="search" name="search" wire:model="searchParam" class="leading-snug border border-gray-300 block w-full appearance-none bg-gray-100 text-sm text-gray-600 py-1 px-4 pl-8 rounded-lg" placeholder="Search" />Untuk tabelnya
<table class="table-auto border-collapse w-full">
<thead>
<tr class="rounded-lg text-sm font-medium text-gray-700 text-left" style="font-size: 0.9674rem">
<th wire:click="sort('name')" class="px-4 py-2 bg-gray-200" style="background-color:#f8f8f8">
<div class="flex flex-row">
Name
</div>
</th>
<th wire:click="sort('description')" class="px-4 py-2" style="background-color:#f8f8f8">
<div class="flex flex-row">
Description
</div>
</th>
<th class="px-4 py-2 " style="background-color:#f8f8f8">Action</th>
</tr>
</thead>
<tbody class="text-sm font-normal text-gray-700">
@foreach ($data as $item)
<tr class="hover:bg-gray-100 border-b border-gray-200 py-10">
<td class="px-4 py-4">{{ $item->name }}</td>
<td class="px-4 py-4">{{ $item->description }}</td>
<td class="px-4 py-4 flex space-x-4">
<a href="#" wire:click.prevent="edit({{ $item->id }})" class="text-yellow-400">Edit</a>
<a href="#" wire:click.prevent="delete({{ $item->id }})" class="text-red-500">Delete</a>
</td>
</tr>
@endforeach
</tbody>
</table>
Sedangkan untuk paginasinya
<div id="pagination" class="w-full mt-4">
{{ $data->links() }}
</div>
Full sourcecode https://github.com/dwijonarko/laravel-8-livewire-tailwind