unioil-cms-fe/resources/views/livewire/components/table.blade.php

92 lines
4.2 KiB
PHP

<div class="mt-10">
<div class="p-4 bg-white shadow-md">
<!-- Top Bar with Search & Add Button -->
<div class="mb-4 flex items-center justify-between">
<input type="text" wire:model.debounce.500ms="search"
class="w-80 p-2 border border-gray-300 rounded-md"
placeholder="Search..."
autofocus>
@if ($hasAddButton && $addRoute)
<a href="{{ $addRoute }}" wire:navigate
class="ml-4 px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600">
+ Add
</a>
@endif
</div>
<table class="table-auto w-full">
<thead class="bg-gray-100">
<tr>
@if ($hasCheckbox)
<th class="px-4 py-2 text-left">
<input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
</th>
@endif
@foreach ($columns as $column)
<th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
{{ $column['label'] }}
@if ($sortField === $column['field'])
@if ($sortDirection === 'asc')
<span class="ml-2">&#8593;</span>
@else
<span class="ml-2">&#8595;</span>
@endif
@else
<span class="ml-2">&#8597;</span>
@endif
</th>
@endforeach
@if ($hasActions)
<th class="px-4 py-2 text-left">Actions</th>
@endif
</tr>
</thead>
<tbody>
@forelse ($rows as $row)
<tr class="hover:bg-gray-50">
@if ($hasCheckbox)
<td class="px-4 py-2">
<input type="checkbox" wire:click="selectRow('{{ $row['id'] }}')"
@if(in_array($row['id'], $selected)) checked @endif class="cursor-pointer">
</td>
@endif
@foreach ($columns as $column)
<td class="px-4 py-2">
{{ $row[$column['field']] ?? '' }}
</td>
@endforeach
@if ($hasActions)
<td class="px-4 py-2 gap-2 flex">
@if($isViewPage)
<button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-eye"></i>
</button>
@else
<button wire:click="editRow({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
<i class="fas fa-edit"></i>
</button>
<button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-eye"></i>
</button>
<button wire:click="deleteRow({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
<i class="fas fa-trash-alt"></i>
</button>
@endif
</td>
@endif
</tr>
@empty
<tr>
<td colspan="{{ count($columns) + 1 }}" class="text-center p-4">No data available</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>