113 lines
5.0 KiB
PHP
113 lines
5.0 KiB
PHP
<div>
|
|
<div class="p-4 bg-white rounded shadow">
|
|
<div class="flex justify-between items-center mb-4">
|
|
@if ($searchable)
|
|
<input
|
|
type="text"
|
|
placeholder="Search"
|
|
class="border p-2 rounded w-1/3"
|
|
wire:model.debounce.300ms="search"
|
|
>
|
|
@endif
|
|
@if ($addButtonLabel)
|
|
<button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">
|
|
{{ $addButtonLabel }}
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<table class="min-w-full text-sm text-left border border-gray-200">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
@if ($checkboxes)
|
|
<th class="p-2"><input type="checkbox" /></th>
|
|
@endif
|
|
|
|
@foreach ($columns as $col)
|
|
<th
|
|
class="p-2 cursor-pointer select-none"
|
|
wire:click="sortBy('{{ $col['field'] }}')"
|
|
>
|
|
<div class="flex items-center space-x-1">
|
|
<span>{{ $col['label'] }}</span>
|
|
|
|
{{-- Sort Icons --}}
|
|
@if ($sortField === $col['field'])
|
|
@if ($sortDirection === 'asc')
|
|
{{-- Ascending Icon --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 3l4 6H6l4-6z" clip-rule="evenodd" />
|
|
</svg>
|
|
@else
|
|
{{-- Descending Icon --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 17l-4-6h8l-4 6z" clip-rule="evenodd" />
|
|
</svg>
|
|
@endif
|
|
@else
|
|
{{-- Neutral Sort Icon --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M6 7h8l-4-4-4 4zm0 6h8l-4 4-4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
@endif
|
|
</div>
|
|
</th>
|
|
@endforeach
|
|
|
|
{{-- Status Column --}}
|
|
|
|
{{-- Actions Column --}}
|
|
|
|
|
|
@if ($showActions)
|
|
<th class="p-2">Action</th>
|
|
@endif
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse ($paginatedRows as $row)
|
|
<tr class="hover:bg-gray-50">
|
|
@if ($checkboxes)
|
|
<td class="p-2"><input type="checkbox" /></td>
|
|
@endif
|
|
|
|
@foreach ($columns as $col)
|
|
<td class="p-2 {{ $col['field'] === 'status' ? 'text-blue-500' : '' }}">
|
|
{{ $row[$col['field']] ?? '-' }}
|
|
</td>
|
|
@endforeach
|
|
|
|
@if ($showActions)
|
|
<td class="p-2 flex space-x-2 text-orange-500">
|
|
@foreach ($actions as $action)
|
|
<button wire:click="{{ $action['method'] }}({{ $row['id'] ?? 'null' }})">
|
|
{{ $action['icon'] }}
|
|
</button>
|
|
@endforeach
|
|
</td>
|
|
@endif
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td class="p-2 text-center" colspan="{{ count($columns) + ($checkboxes ? 1 : 0) + ($showActions ? 1 : 0) }}">
|
|
No data found.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
|
|
{{-- Pagination Controls --}}
|
|
<div class="mt-4 flex justify-center space-x-2">
|
|
@for ($page = 1; $page <= $this->calculateTotalPages(); $page++)
|
|
<button
|
|
wire:click="setPage({{ $page }})"
|
|
class="px-3 py-1 border rounded {{ $currentPage === $page ? 'bg-orange-500 text-white' : 'bg-white text-gray-700' }}"
|
|
>
|
|
{{ $page }}
|
|
</button>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</div>
|