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 type { TableProps } from "../types/table/types";
import { cn } from "../utils/cn";
const { const {
columns = [], 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> <div class="wr:space-y-4 wr:md:hidden" data-mobile-body></div>
<!-- 📄 Pagination --> <!-- 📄 Pagination -->
{ <div
pagignations && ( class={cn(
<div class="wr:flex wr:justify-between wr:items-center wr:gap-4 wr:flex-wrap wr:mt-4"> "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"> !pagignations && "wr:!hidden",
<span class="wr:text-gray-600 wr:dark:text-gray-400"> )}
Rows per page: >
</span> <div class="wr:flex wr:items-center wr:gap-2 wr:text-sm">
<select <span class="wr:text-gray-600 wr:dark:text-gray-400">
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" Rows per page:
data-page-size </span>
> <select
<option value="10">10</option> 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"
<option value="25">25</option> data-page-size
<option value="50">50</option> >
<option value="100">100</option> <option value="10">10</option>
</select> <option value="25">25</option>
</div> <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:flex wr:items-center wr:gap-3 wr:flex-wrap">
<div <div
class="wr:text-sm wr:text-gray-600 wr:dark:text-gray-400" class="wr:text-sm wr:text-gray-600 wr:dark:text-gray-400"
data-page-info 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> </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> </div>
<script <script