Datatable

  1<?php
  2 
  3use Illuminate\Support\Facades\DB;
  4use Livewire\Attributes\Title;
  5use Livewire\Volt\Component;
  6use Livewire\WithPagination;
  7 
  8new
  9#[Title('Datatable - Larva Interactions')]
 10class extends Component
 11{
 12    use WithPagination;
 13 
 14    public $perPage = 10;
 15    public $search = '';
 16 
 17    public function updated($property)
 18    {
 19        if ($property === 'search') {
 20            $this->resetPage();
 21        }
 22    }
 23 
 24    public function with(): array
 25    {
 26        $employees = DB::table('employees');
 27 
 28        if (!empty($this->search)) {
 29            $search = trim(strtolower($this->search));
 30            $employees = $employees->where('name', 'like', '%'.$search.'%')
 31                ->orWhere('office', 'like', '%'.$search.'%')
 32                ->orWhere('position', 'like', '%'.$search.'%')
 33                ->orWhere('age', 'like', '%'.$search.'%');
 34        }
 35 
 36        return [
 37            'md_content' => markdown_convert(resource_path('docs/datatable.md')),
 38            'employees' => $employees->paginate($this->perPage),
 39        ];
 40    }
 41}
 42?>
 43 
 44<div>
 45    <a href="/" class="underline text-blue-500">Back</a>
 46    <h1 class="text-2xl">Datatable</h1>
 47    {!! $md_content !!}
 48    <h2 class="text-xl">Basic Datatable</h2>
 49    <p>This demo shows example of basic Datatable using Livewire</p>
 50    <div class="flex items-center gap-4 my-4">
 51        <div class="flex-1">
 52            <label>
 53                <select wire:model.change="perPage">
 54                    <option>10</option>
 55                    <option>25</option>
 56                    <option>50</option>
 57                    <option>100</option>
 58                </select>
 59                entries per page
 60            </label>
 61            <input type="text" wire:model.change="search">
 62        </div>
 63 
 64        <button wire:click="$refresh" class="rounded p-2 bg-blue-500 text-white">Refresh</button>
 65    </div>
 66    <table class="w-full table-auto border-collapse border border-slate-400">
 67        <thead>
 68            <tr>
 69                <th class="p-2 border border-slate-300">Name</th>
 70                <th class="p-2 border border-slate-300">Position</th>
 71                <th class="p-2 border border-slate-300">Office</th>
 72                <th class="p-2 border border-slate-300">Age</th>
 73                <th class="p-2 border border-slate-300">Start date</th>
 74                <th class="p-2 border border-slate-300">Salary</th>
 75            </tr>
 76        </thead>
 77        <tbody>
 78            @forelse ($employees as $employee)
 79            <tr @class(['bg-gray-100' => ($loop->index % 2 === 0)])>
 80                <td class="p-2 border border-slate-300">{{ $employee->name }}</td>
 81                <td class="p-2 border border-slate-300">{{ $employee->position }}</td>
 82                <td class="p-2 border border-slate-300">{{ $employee->office }}</td>
 83                <td class="p-2 border border-slate-300 text-right">{{ $employee->age }}</td>
 84                <td class="p-2 border border-slate-300 text-right">{{ Carbon\Carbon::parse($employee->start_date)->format('jS F Y') }}</td>
 85                <td class="p-2 border border-slate-300 text-right">{{ $employee->salary }}</td>
 86            </tr>
 87            @empty
 88            <tr>
 89                <td class="p-2 text-center bg-gray-100" colspan="6">No record found</td>
 90            </tr>
 91            @endforelse
 92        </tbody>
 93    </table>
 94    <div class="mt-4">
 95        {{ $employees->links('vendor/livewire/custom-tailwind', [
 96            'grand_total' => \App\Models\Employee::count(),
 97            'search' => $this->search
 98        ]) }}
 99    </div>
100</div>