New Changes with table Classes and Modification

src/components/Table.astro

@@ -14,6 +14,7 @@ const {
     columnsRendererKey,
     classInfos = "",
     tableClassNames = "",
+    hideHeader = false,
 } = Astro.props as TableProps<any>;
 
 const id = `table-${Math.random().toString(36).slice(2, 9)}`;
@@ -46,42 +47,42 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                 tableClassNames,
             )}
         >
-            <thead
+            {
-                class="wr:bg-gray-100 wr:dark:bg-neutral-700 wr:text-gray-600 wr:dark:text-gray-300"
+                !hideHeader && (
-            >
+                    <thead class="wr:bg-gray-100 wr:dark:bg-neutral-700 wr:text-gray-600 wr:dark:text-gray-300">
-                <tr>
+                        <tr>
-                    {
+                            {selectable && (
-                        selectable && (
+                                <th class="wr:p-3 wr:text-left wr:w-12">
-                            <th class="wr:p-3 wr:text-left wr:w-12">
+                                    <input type="checkbox" data-select-all />
-                                <input type="checkbox" data-select-all />
+                                </th>
-                            </th>
+                            )}
-                        )
+                            {columns.map((col) => (
-                    }
+                                <th
-                    {
+                                    class={cn(
-                        columns.map((col) => (
+                                        `wr:py-3 wr:px-4 ${col.align ? `wr:text-${col.align}` : "wr:text-left"} ${col.sortable ? "wr:cursor-pointer" : ""}`,
-                            <th
-                                class={cn(
-                                    `wr:py-3 wr:px-4 ${col.align ? `wr:text-${col.align}` : "wr:text-left"} ${col.sortable ? "wr:cursor-pointer" : ""}`,
-                                )}
-                                style={col.width ? `width:${col.width}` : ""}
-                                data-sort-key={
-                                    col.sortable ? col.key : undefined
-                                }
-                            >
-                                <div class="wr:flex wr:items-center wr:gap-1">
-                                    <span>{col.label}</span>
-                                    {col.sortable && (
-                                        <iconify-icon
-                                            icon="solar:sort-vertical-bold-duotone"
-                                            class="wr:text-lg wr:text-gray-400 sort-indicator"
-                                        />
                                     )}
-                                </div>
+                                    style={
-                            </th>
+                                        col.width ? `width:${col.width}` : ""
-                        ))
+                                    }
-                    }
+                                    data-sort-key={
-                </tr>
+                                        col.sortable ? col.key : undefined
-            </thead>
+                                    }
+                                >
+                                    <div class="wr:flex wr:items-center wr:gap-1">
+                                        <span>{col.label}</span>
+                                        {col.sortable && (
+                                            <iconify-icon
+                                                icon="solar:sort-vertical-bold-duotone"
+                                                class="wr:text-lg wr:text-gray-400 sort-indicator"
+                                            />
+                                        )}
+                                    </div>
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                )
+            }
             <tbody data-body> </tbody>
         </table>
     </div>

src/pages/table.astro

@@ -259,6 +259,7 @@ const studentColumns = [
             columns={columns}
             data={data}
             columnsRendererKey="columnsRenderer"
+            hideHeader={true}
         />
 
         <br />

src/types/table/types.ts

@@ -33,4 +33,5 @@ export interface TableProps<T> {
     columnsRendererKey?: string
     classInfos?: string;
     tableClassNames?: string;
+    hideHeader?: boolean;
 }