feat: create TableHeadRow component

.changeset/stupid-guests-remain.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": minor
+---
+
+Added a new TableHeadRow component for enhanced customization of table header rows.

.github/CONTRIBUTING.md

@@ -147,6 +147,12 @@ git push -u origin fix/accordion-alwaysopen
 
 9. Fill out the Pull Request template, which will be available automatically
 
+10. At the end you need to create a new changeset, use the following command and answers the provided questions.
+
+```bash
+bunx changeset
+```
+
 #### What Happens Next?
 
 If you have followed the steps above, your Pull Request will be reviewed by a maintainer soon. If it passes review, it will be merged into the `main` branch and will be included in the next release. If not, you will receive feedback about what needs to be improved until it is ready to be merged.

packages/ui/src/components/Table/Table.spec.tsx

@@ -33,13 +33,15 @@ describe("Components / Table", () => {
 const TestTable: FC<TableProps> = (props) => (
   <Table {...props}>
     <Table.Head>
-      <Table.HeadCell>Product name</Table.HeadCell>
-      <Table.HeadCell>Color</Table.HeadCell>
-      <Table.HeadCell>Category</Table.HeadCell>
-      <Table.HeadCell>Price</Table.HeadCell>
-      <Table.HeadCell>
-        <span className="sr-only">Edit</span>
-      </Table.HeadCell>
+      <Table.HeadRow>
+        <Table.HeadCell>Product name</Table.HeadCell>
+        <Table.HeadCell>Color</Table.HeadCell>
+        <Table.HeadCell>Category</Table.HeadCell>
+        <Table.HeadCell>Price</Table.HeadCell>
+        <Table.HeadCell>
+          <span className="sr-only">Edit</span>
+        </Table.HeadCell>
+      </Table.HeadRow>
     </Table.Head>
     <Table.Body className="divide-y">
       <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">

packages/ui/src/components/Table/Table.tsx

@@ -10,6 +10,7 @@ import { TableCell } from "./TableCell";
 import { TableContext } from "./TableContext";
 import { TableHead, type FlowbiteTableHeadTheme } from "./TableHead";
 import { TableHeadCell } from "./TableHeadCell";
+import { TableHeadRow } from "./TableHeadRow";
 import { TableRow, type FlowbiteTableRowTheme } from "./TableRow";
 
 export interface FlowbiteTableTheme {
@@ -52,6 +53,7 @@ TableComponent.displayName = "Table";
 
 export const Table = Object.assign(TableComponent, {
   Head: TableHead,
+  HeadRow: TableHeadRow,
   Body: TableBody,
   Row: TableRow,
   Cell: TableCell,

packages/ui/src/components/Table/TableHead.tsx

@@ -7,9 +7,11 @@ import type { DeepPartial } from "../../types";
 import { useTableContext } from "./TableContext";
 import type { FlowbiteTableHeadCellTheme } from "./TableHeadCell";
 import { TableHeadContext } from "./TableHeadContext";
+import { FlowbiteTableHeadRowTheme } from "./TableHeadRow";
 
 export interface FlowbiteTableHeadTheme {
   base: string;
+  row: FlowbiteTableHeadRowTheme;
   cell: FlowbiteTableHeadCellTheme;
 }
 
@@ -26,7 +28,7 @@ export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
     return (
       <TableHeadContext.Provider value={{ theme }}>
         <thead className={twMerge(theme.base, className)} ref={ref} {...props}>
-          <tr>{children}</tr>
+          {children}
         </thead>
       </TableHeadContext.Provider>
     );

packages/ui/src/components/Table/TableHeadRow.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithRef } from "react";
+import { twMerge } from "tailwind-merge";
+import { mergeDeep } from "../../helpers/merge-deep";
+import type { DeepPartial } from "../../types";
+import { useTableHeadContext } from "./TableHeadContext";
+
+export interface FlowbiteTableHeadRowTheme {
+  base: string;
+}
+
+export interface TableHeadRowProps extends ComponentPropsWithRef<"tr"> {
+  theme?: DeepPartial<FlowbiteTableHeadRowTheme>;
+}
+
+export const TableHeadRow = forwardRef<HTMLTableRowElement, TableHeadRowProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: headTheme } = useTableHeadContext();
+
+    const theme = mergeDeep(headTheme.row, customTheme);
+
+    return (
+      <tr className={twMerge(theme.base, className)} ref={ref} {...props}>
+        {children}
+      </tr>
+    );
+  },
+);
+
+TableHeadRow.displayName = "Table.HeadRow";

packages/ui/src/components/Table/theme.ts

@@ -15,6 +15,9 @@ export const tableTheme: FlowbiteTableTheme = createTheme({
   },
   head: {
     base: "group/head text-xs uppercase text-gray-700 dark:text-gray-400",
+    row: {
+      base: "group/row",
+    },
     cell: {
       base: "bg-gray-50 px-6 py-3 group-first/head:first:rounded-tl-lg group-first/head:last:rounded-tr-lg dark:bg-gray-700",
     },