You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.3 KiB
39 lines
1.3 KiB
{{-- resources/views/components/skeleton-table.blade.php --}}
|
|
@props([
|
|
'columns',
|
|
'rows',
|
|
'height',
|
|
'pages' => 0, // Default to 3 pages if not specified
|
|
])
|
|
|
|
<div wire:loading class="w-100">
|
|
<div class="table-responsive w-100">
|
|
<table class="table mb-0 w-100">
|
|
<thead>
|
|
<tr style="visibility:hidden; height:{{ $height }}">
|
|
@for ($i = 0; $i < $columns; $i++)
|
|
<th> </th>
|
|
@endfor
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for ($r = 0; $r < $rows; $r++)
|
|
<tr style="height:{{ $height }}">
|
|
@for ($c = 0; $c < $columns; $c++)
|
|
<td class="align-middle">
|
|
<div class="skeleton rounded w-100" style="height:1.75rem"></div>
|
|
</td>
|
|
@endfor
|
|
</tr>
|
|
@endfor
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- Skeleton pagination --}}
|
|
<div class="d-flex justify-content-end mt-3">
|
|
@for ($i = 0; $i < $pages; $i++)
|
|
<div class="skeleton rounded me-2" style="width: 2.5rem; height:1.5rem"></div>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
|