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. 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 = (props) => ( - Product name - Color - Category - Price - - Edit - + + Product name + Color + Category + Price + + Edit + + 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..6ec6a0030 100644 --- a/packages/ui/src/components/Table/TableHead.tsx +++ b/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( return ( - {children} + {children} ); diff --git a/packages/ui/src/components/Table/TableHeadRow.tsx b/packages/ui/src/components/Table/TableHeadRow.tsx new file mode 100644 index 000000000..87fdee495 --- /dev/null +++ b/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; +} + +export const TableHeadRow = forwardRef( + ({ children, className, theme: customTheme = {}, ...props }, ref) => { + const { theme: headTheme } = useTableHeadContext(); + + const theme = mergeDeep(headTheme.row, customTheme); + + return ( + + {children} + + ); + }, +); + +TableHeadRow.displayName = "Table.HeadRow"; 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", },