75 lines
3.0 KiB
PHP
75 lines
3.0 KiB
PHP
<div>
|
|
<!-- Search Input -->
|
|
<div class="mb-3">
|
|
<input
|
|
type="text"
|
|
wire:model.debounce.500ms="searchValue"
|
|
class="form-control"
|
|
placeholder="Search..."
|
|
>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<table class="table table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
@foreach($columns as $column)
|
|
<th wire:click="sort('{{ $column['dataIndex'] }}')" style="cursor: pointer;">
|
|
{{ $column['title'] }}
|
|
@if($sortedInfo && $sortedInfo['field'] === $column['dataIndex'])
|
|
<i class="bi bi-caret-{{ $sortedInfo['order'] === 'asc' ? 'up' : 'down' }}-fill"></i>
|
|
@endif
|
|
</th>
|
|
@endforeach
|
|
@if($actions)
|
|
<th>Action</th>
|
|
@endif
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($data as $item)
|
|
<tr>
|
|
@foreach($columns as $column)
|
|
<td>{{ $item[$column['dataIndex']] }}</td>
|
|
@endforeach
|
|
@if($actions)
|
|
<td>
|
|
@foreach($actions as $action)
|
|
@if($action['type'] === 'edit')
|
|
<a href="{{ $action['path'] . '/' . $item[$keyValue] }}" class="btn btn-sm btn-primary me-1">Edit</a>
|
|
@elseif($action['type'] === 'view')
|
|
<a href="{{ $action['path'] . '/' . $item[$keyValue] }}" class="btn btn-sm btn-info me-1">View</a>
|
|
@elseif($action['type'] === 'delete')
|
|
<button class="btn btn-sm btn-danger" wire:click="$dispatch('delete', {{ $item[$keyValue] }})">Delete</button>
|
|
@endif
|
|
@endforeach
|
|
</td>
|
|
@endif
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="{{ count($columns) + ($actions ? 1 : 0) }}" class="text-center">No data available</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Pagination and Clear Filters -->
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<button wire:click="handleClearAll" class="btn btn-secondary">Clear Filters</button>
|
|
<nav>
|
|
<ul class="pagination">
|
|
@for($i = 1; $i <= ceil($totalData / $pageSize); $i++)
|
|
<li class="page-item {{ $currentPage === $i ? 'active' : '' }}">
|
|
<button wire:click="handlePagination({{ $i }})" class="page-link">{{ $i }}</button>
|
|
</li>
|
|
@endfor
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Loading Indicator -->
|
|
@if($loading)
|
|
<div class="text-center my-3">Loading...</div>
|
|
@endif
|
|
</div> |