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,24 +47,23 @@ 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"
-            >
-                <tr>
             {
-                        selectable && (
+                !hideHeader && (
+                    <thead class="wr:bg-gray-100 wr:dark:bg-neutral-700 wr:text-gray-600 wr:dark:text-gray-300">
+                        <tr>
+                            {selectable && (
                                 <th class="wr:p-3 wr:text-left wr:w-12">
                                     <input type="checkbox" data-select-all />
                                 </th>
-                        )
+                            )}
-                    }
+                            {columns.map((col) => (
-                    {
-                        columns.map((col) => (
                                 <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}` : ""}
+                                    style={
+                                        col.width ? `width:${col.width}` : ""
+                                    }
                                     data-sort-key={
                                         col.sortable ? col.key : undefined
                                     }
@@ -78,10 +78,11 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                                         )}
                                     </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;
 }