Datatable

 1<?php
 2 
 3namespace App\Livewire;
 4 
 5use Illuminate\Support\Facades\DB;
 6use Livewire\Component;
 7use Livewire\WithPagination;
 8 
 9class Datatable extends Component
10{
11    use WithPagination;
12 
13    public $perPage = 10;
14    public $search = '';
15 
16    public function updated($property)
17    {
18        if ($property === 'search') {
19            $this->resetPage();
20        }
21    }
22 
23    public function render()
24    {
25        $employees = DB::table('employees');
26 
27        if (!empty($this->search)) {
28            $search = trim(strtolower($this->search));
29            $employees = $employees->where('name', 'like', '%'.$search.'%')
30                ->orWhere('office', 'like', '%'.$search.'%')
31                ->orWhere('position', 'like', '%'.$search.'%')
32                ->orWhere('age', 'like', '%'.$search.'%');
33        }
34 
35        return view('livewire.datatable', [
36            'employees' => $employees->paginate($this->perPage),
37        ])
38        ->title('Datatable');
39    }
40}

 1<div>
 2    <a href="/" class="underline text-blue-500">Back</a>
 3    <h1 class="text-2xl">Datatable</h1>
 4    <h2 class="text-xl">Basic Datatable</h2>
 5    <p>This demo shows example of basic Datatable using Livewire</p>
 6    <div class="flex items-center gap-4 my-4">
 7        <div class="flex-1">
 8            <label>
 9                <select wire:model.change="perPage">
10                    <option>10</option>
11                    <option>25</option>
12                    <option>50</option>
13                    <option>100</option>
14                </select>
15                entries per page
16            </label>
17            <input type="text" wire:model.change="search">
18        </div>
19 
20        <button wire:click="$refresh" class="rounded p-2 bg-blue-500 text-white">Refresh</button>
21    </div>
22    <table class="w-full table-auto border-collapse border border-slate-400">
23        <thead>
24            <tr>
25                <th class="p-2 border border-slate-300">Name</th>
26                <th class="p-2 border border-slate-300">Position</th>
27                <th class="p-2 border border-slate-300">Office</th>
28                <th class="p-2 border border-slate-300">Age</th>
29                <th class="p-2 border border-slate-300">Start date</th>
30                <th class="p-2 border border-slate-300">Salary</th>
31            </tr>
32        </thead>
33        <tbody>
34            @forelse ($employees as $employee)
35            <tr @class(['bg-gray-100' => ($loop->index % 2 === 0)])>
36                <td class="p-2 border border-slate-300">{{ $employee->name }}</td>
37                <td class="p-2 border border-slate-300">{{ $employee->position }}</td>
38                <td class="p-2 border border-slate-300">{{ $employee->office }}</td>
39                <td class="p-2 border border-slate-300 text-right">{{ $employee->age }}</td>
40                <td class="p-2 border border-slate-300 text-right">{{ Carbon\Carbon::parse($employee->start_date)->format('jS F Y') }}</td>
41                <td class="p-2 border border-slate-300 text-right">{{ $employee->salary }}</td>
42            </tr>
43            @empty
44            <tr>
45                <td class="p-2 text-center bg-gray-100" colspan="6">No record found</td>
46            </tr>
47            @endforelse
48        </tbody>
49    </table>
50    <div class="mt-4">
51        {{ $employees->links('vendor/livewire/custom-tailwind', [
52            'grand_total' => \App\Models\Employee::count(),
53            'search' => $this->search
54        ]) }}
55    </div>
56</div>