From d40e6af8ccec98165544cc1dfedf20e9bd773654 Mon Sep 17 00:00:00 2001
From: raky291 <raky291@gmail.com>
Date: Fri, 16 Aug 2024 08:56:46 -0700
Subject: [PATCH 1/3] feat: create TableHeadRow component

---
 packages/ui/src/components/Table/Table.tsx    |  2 ++
 .../ui/src/components/Table/TableHead.tsx     |  3 +-
 .../ui/src/components/Table/TableHeadRow.tsx  | 28 +++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components/Table/TableHeadRow.tsx

diff --git a/packages/ui/src/components/Table/Table.tsx b/packages/ui/src/components/Table/Table.tsx
index 2bae70bdb..a9613928d 100644
--- a/packages/ui/src/components/Table/Table.tsx
+++ b/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,
diff --git a/packages/ui/src/components/Table/TableHead.tsx b/packages/ui/src/components/Table/TableHead.tsx
index 5c5c5de86..1bed43667 100644
--- a/packages/ui/src/components/Table/TableHead.tsx
+++ b/packages/ui/src/components/Table/TableHead.tsx
@@ -10,6 +10,7 @@ import { TableHeadContext } from "./TableHeadContext";
 
 export interface FlowbiteTableHeadTheme {
   base: string;
+  row: string;
   cell: FlowbiteTableHeadCellTheme;
 }
 
@@ -26,7 +27,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>
     );
diff --git a/packages/ui/src/components/Table/TableHeadRow.tsx b/packages/ui/src/components/Table/TableHeadRow.tsx
new file mode 100644
index 000000000..620bf872b
--- /dev/null
+++ b/packages/ui/src/components/Table/TableHeadRow.tsx
@@ -0,0 +1,28 @@
+"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 { useTableContext } from "./TableContext";
+import type { FlowbiteTableHeadTheme } from "./TableHead";
+
+export interface TableHeadRowProps extends ComponentPropsWithRef<"tr"> {
+  theme?: DeepPartial<FlowbiteTableHeadTheme>;
+}
+
+export const TableHeadRow = forwardRef<HTMLTableRowElement, TableHeadRowProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: rootTheme } = useTableContext();
+
+    const theme = mergeDeep(rootTheme.head, customTheme);
+
+    return (
+      <tr className={twMerge(theme.row, className)} ref={ref} {...props}>
+        {children}
+      </tr>
+    );
+  },
+);
+
+TableHeadRow.displayName = "Table.HeadRow";

From fd6e0a2fdc84097b538e5f922f0fcf942834a812 Mon Sep 17 00:00:00 2001
From: raky291 <raky291@gmail.com>
Date: Tue, 27 Aug 2024 21:51:53 -0700
Subject: [PATCH 2/3] chore: update TableHeadRow component and theme.ts

---
 packages/ui/src/components/Table/Table.spec.tsx  | 16 +++++++++-------
 packages/ui/src/components/Table/TableHead.tsx   |  3 ++-
 .../ui/src/components/Table/TableHeadRow.tsx     | 15 +++++++++------
 packages/ui/src/components/Table/theme.ts        |  3 +++
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/components/Table/Table.spec.tsx b/packages/ui/src/components/Table/Table.spec.tsx
index 2b7935d06..61d3bd10c 100644
--- a/packages/ui/src/components/Table/Table.spec.tsx
+++ b/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">
diff --git a/packages/ui/src/components/Table/TableHead.tsx b/packages/ui/src/components/Table/TableHead.tsx
index 1bed43667..6ec6a0030 100644
--- a/packages/ui/src/components/Table/TableHead.tsx
+++ b/packages/ui/src/components/Table/TableHead.tsx
@@ -7,10 +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: string;
+  row: FlowbiteTableHeadRowTheme;
   cell: FlowbiteTableHeadCellTheme;
 }
 
diff --git a/packages/ui/src/components/Table/TableHeadRow.tsx b/packages/ui/src/components/Table/TableHeadRow.tsx
index 620bf872b..87fdee495 100644
--- a/packages/ui/src/components/Table/TableHeadRow.tsx
+++ b/packages/ui/src/components/Table/TableHeadRow.tsx
@@ -4,21 +4,24 @@ import { forwardRef, type ComponentPropsWithRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import type { DeepPartial } from "../../types";
-import { useTableContext } from "./TableContext";
-import type { FlowbiteTableHeadTheme } from "./TableHead";
+import { useTableHeadContext } from "./TableHeadContext";
+
+export interface FlowbiteTableHeadRowTheme {
+  base: string;
+}
 
 export interface TableHeadRowProps extends ComponentPropsWithRef<"tr"> {
-  theme?: DeepPartial<FlowbiteTableHeadTheme>;
+  theme?: DeepPartial<FlowbiteTableHeadRowTheme>;
 }
 
 export const TableHeadRow = forwardRef<HTMLTableRowElement, TableHeadRowProps>(
   ({ children, className, theme: customTheme = {}, ...props }, ref) => {
-    const { theme: rootTheme } = useTableContext();
+    const { theme: headTheme } = useTableHeadContext();
 
-    const theme = mergeDeep(rootTheme.head, customTheme);
+    const theme = mergeDeep(headTheme.row, customTheme);
 
     return (
-      <tr className={twMerge(theme.row, className)} ref={ref} {...props}>
+      <tr className={twMerge(theme.base, className)} ref={ref} {...props}>
         {children}
       </tr>
     );
diff --git a/packages/ui/src/components/Table/theme.ts b/packages/ui/src/components/Table/theme.ts
index 2851b7919..be3c5857b 100644
--- a/packages/ui/src/components/Table/theme.ts
+++ b/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",
     },

From 4cd398122708ad2b1af3bdf49a088ac4089ec137 Mon Sep 17 00:00:00 2001
From: raky291 <raky291@gmail.com>
Date: Tue, 27 Aug 2024 22:31:19 -0700
Subject: [PATCH 3/3] chore: add changeset

---
 .changeset/stupid-guests-remain.md | 5 +++++
 .github/CONTRIBUTING.md            | 6 ++++++
 2 files changed, 11 insertions(+)
 create mode 100644 .changeset/stupid-guests-remain.md

diff --git a/.changeset/stupid-guests-remain.md b/.changeset/stupid-guests-remain.md
new file mode 100644
index 000000000..d3d3d8944
--- /dev/null
+++ b/.changeset/stupid-guests-remain.md
@@ -0,0 +1,5 @@
+---
+"flowbite-react": minor
+---
+
+Added a new TableHeadRow component for enhanced customization of table header rows.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index edd224e21..006da7ee8 100644
--- a/.github/CONTRIBUTING.md
+++ b/.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.