WorkRoot/Astro-Component
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Changes with Table Component

Browse Source
This commit is contained in:
Clintchiz
2025-10-27 13:29:28 +05:30
parent 96e2ed9e31
commit 50b5618f9d
1 changed files with 34 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Table.astro
+34 -30
View File
@@ -1,5 +1,6 @@
---
import type { TableProps } from "../types/table/types";
import { cn } from "../utils/cn";
const {
columns = [],
@@ -79,38 +80,41 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
<div class="wr:space-y-4 wr:md:hidden" data-mobile-body></div>
<!-- 📄 Pagination -->
{
pagignations && (
<div class="wr:flex wr:justify-between wr:items-center wr:gap-4 wr:flex-wrap wr:mt-4">
<div class="wr:flex wr:items-center wr:gap-2 wr:text-sm">
<span class="wr:text-gray-600 wr:dark:text-gray-400">
Rows per page:
</span>
<select
class="wr:w-[75px] wr:rounded-md wr:border wr:border-gray-300 wr:dark:border-neutral-600 wr:bg-white wr:dark:bg-neutral-800 wr:px-2 wr:py-1 wr:text-sm wr:focus:ring-2 wr:focus:ring-primary"
data-page-size
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div
class={cn(
"wr:flex wr:justify-between wr:items-center wr:gap-4 wr:flex-wrap wr:mt-4",
!pagignations && "wr:!hidden",
)}
>
<div class="wr:flex wr:items-center wr:gap-2 wr:text-sm">
<span class="wr:text-gray-600 wr:dark:text-gray-400">
Rows per page:
</span>
<select
class="wr:w-[75px] wr:rounded-md wr:border wr:border-gray-300 wr:dark:border-neutral-600 wr:bg-white wr:dark:bg-neutral-800 wr:px-2 wr:py-1 wr:text-sm wr:focus:ring-2 wr:focus:ring-primary"
data-page-size
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div class="wr:flex wr:items-center wr:gap-3 wr:flex-wrap">
<div
class="wr:text-sm wr:text-gray-600 wr:dark:text-gray-400"
data-page-info
/>
<div
class="wr:flex wr:items-center wr:gap-1 wr:bg-gray-50 wr:dark:bg-neutral-800 wr:rounded-full wr:px-2 wr:py-1 wr:shadow-sm"
data-pagination
/>
</div>
<div class="wr:flex wr:items-center wr:gap-3 wr:flex-wrap">
<div
class="wr:text-sm wr:text-gray-600 wr:dark:text-gray-400"
data-page-info
>
</div>
)
}
<div
class="wr:flex wr:items-center wr:gap-1 wr:bg-gray-50 wr:dark:bg-neutral-800 wr:rounded-full wr:px-2 wr:py-1 wr:shadow-sm"
data-pagination
>
</div>
</div>
</div>
</div>
<script