87 lines
4.1 KiB
PHP
87 lines
4.1 KiB
PHP
<div class="mt-10">
|
|
<div class="p-4 bg-white shadow-md">
|
|
<!-- Search Input with Debounce -->
|
|
<div class="mb-4">
|
|
<input type="text" wire:model.debounce.500ms="search"
|
|
class="w-80 p-2 border border-gray-300 rounded-md"
|
|
placeholder="Search..."
|
|
autofocus>
|
|
</div>
|
|
|
|
<table class="table-auto w-full">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<!-- Select All Checkbox -->
|
|
<th class="px-4 py-2 text-left">
|
|
<input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
|
|
</th>
|
|
|
|
@foreach ($columns as $column)
|
|
<th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
|
|
{{ $column['label'] }}
|
|
<!-- Sorting Icons -->
|
|
@if ($sortField === $column['field'])
|
|
@if ($sortDirection === 'asc')
|
|
<!-- Ascending Triangle (Up) -->
|
|
<span class="ml-2">↑</span> <!-- Up Triangle -->
|
|
@else
|
|
<!-- Descending Triangle (Down) -->
|
|
<span class="ml-2"> ↓</span> <!-- Down Triangle -->
|
|
@endif
|
|
@else
|
|
<!-- Default to Ascending Triangle (Up) -->
|
|
<span class="ml-2">↕</span> <!-- Up Triangle by default -->
|
|
@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">
|
|
<!-- Row Checkbox -->
|
|
<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>
|
|
|
|
@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>
|