New Changes with Table Component

src/components/Table.astro

@@ -1,5 +1,6 @@
 ---
 import type { TableProps } from "../types/table/types";
+import { cn } from "../utils/cn";
 
 const {
     columns = [],
@@ -79,9 +80,12 @@ 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={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:
@@ -101,16 +105,16 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
             <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