feat: added footer with pagination to feed table

This commit is contained in:
Corban-Lee Jones 2025-04-24 12:41:59 +01:00
parent c2d11120b0
commit 87da78286c
2 changed files with 39 additions and 0 deletions

View File

@ -45,6 +45,20 @@
@apply border-none bg-gray-50 dark:bg-neutral-800;
}
.cj-table-footer {
@apply px-6 py-4 gap-3 flex justify-between items-center border-t
border-gray-200 dark:border-neutral-700;
}
.cj-table-paging-btn {
@apply py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium
rounded-lg border border-gray-200 bg-white text-gray-800
shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50
disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800
dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700
dark:focus:bg-neutral-700;
}
.cj-table-checkbox {
@apply form-checkbox shrink-0 disabled:opacity-50 rounded-sm
text-blue-600 focus:ring-blue-500 border-gray-300

View File

@ -101,6 +101,31 @@
</table>
</div>
<div class="cj-table-footer">
<div class="max-w-sm space-y-3">
select
</div>
<div class="sm:inline-flex items-center gap-x-2" data-hs-datatable-info="">
<p class="text-sm text-gray dark:text-neutral-400">
<span data-hs-datatable-info-from=""></span>
to
<span data-hs-datatable-info-to=""></span>
of
<span data-hs-datatable-info-length=""></span>
</p>
</div>
<div class="inline-flex gap-x-2" data-hs-datatable-paging="">
<button type="button" class="cj-table-paging-btn" data-hs-datatable-paging-prev="">
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
Prev
</button>
<div class="flex items-center space-x-1 " data-hs-datatable-paging-pages=""></div>
<button type="button" class="cj-table-paging-btn" data-hs-datatable-paging-next="">
Next
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
</button>
</div>
</div>
</div>
</div>
</div>