From 50b5618f9d83a2e3be235af92ab0ad9e32deea2e Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Mon, 27 Oct 2025 13:29:28 +0530
Subject: [PATCH] New Changes with Table Component

---
 src/components/Table.astro | 64 ++++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/components/Table.astro b/src/components/Table.astro
index 9240362..e7561e9 100644
--- a/src/components/Table.astro
+++ b/src/components/Table.astro
@@ -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