feat(table): Wrap table components with forwardRef (#1239)

* feat(table): wrap table components with forwardRef

* fix(table): use ComponentPropsWithRef instead of ComponentProps

Author: nigellima

src/components/Table/Table.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { getTheme } from '../../theme-store';
@@ -25,40 +25,30 @@ export interface FlowbiteTableRootTheme {
   wrapper: string;
 }
 
-export interface TableProps extends ComponentProps<'table'> {
+export interface TableProps extends ComponentPropsWithRef<'table'> {
   striped?: boolean;
   hoverable?: boolean;
   theme?: DeepPartial<FlowbiteTableTheme>;
 }
 
-const TableComponent: FC<TableProps> = ({
-  children,
-  className,
-  striped,
-  hoverable,
-  theme: customTheme = {},
-  ...props
-}) => {
-  const theme = mergeDeep(getTheme().table, customTheme);
-
-  return (
-    <div data-testid="table-element" className={twMerge(theme.root.wrapper)}>
-      <TableContext.Provider value={{ theme, striped, hoverable }}>
-        <div className={twMerge(theme.root.shadow, className)}></div>
-        <table className={twMerge(theme.root.base, className)} {...props}>
-          {children}
-        </table>
-      </TableContext.Provider>
-    </div>
-  );
-};
+const TableComponent = forwardRef<HTMLTableElement, TableProps>(
+  ({ children, className, striped, hoverable, theme: customTheme = {}, ...props }, ref) => {
+    const theme = mergeDeep(getTheme().table, customTheme);
+
+    return (
+      <div data-testid="table-element" className={twMerge(theme.root.wrapper)}>
+        <TableContext.Provider value={{ theme, striped, hoverable }}>
+          <div className={twMerge(theme.root.shadow, className)}></div>
+          <table className={twMerge(theme.root.base, className)} {...props} ref={ref}>
+            {children}
+          </table>
+        </TableContext.Provider>
+      </div>
+    );
+  },
+);
 
 TableComponent.displayName = 'Table';
-TableHead.displayName = 'Table.Head';
-TableBody.displayName = 'Table.Body';
-TableRow.displayName = 'Table.Row';
-TableCell.displayName = 'Table.Cell';
-TableHeadCell.displayName = 'Table.HeadCell';
 
 export const Table = Object.assign(TableComponent, {
   Head: TableHead,

src/components/Table/TableBody.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -13,20 +13,23 @@ export interface FlowbiteTableBodyTheme {
   cell: FlowbiteTableCellTheme;
 }
 
-export interface TableBodyProps extends ComponentProps<'tbody'> {
+export interface TableBodyProps extends ComponentPropsWithRef<'tbody'> {
   theme?: DeepPartial<FlowbiteTableBodyTheme>;
 }
 
-export const TableBody: FC<TableBodyProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const { theme: rootTheme } = useTableContext();
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: rootTheme } = useTableContext();
 
-  const theme = mergeDeep(rootTheme.body, customTheme);
+    const theme = mergeDeep(rootTheme.body, customTheme);
 
-  return (
-    <TableBodyContext.Provider value={{ theme }}>
-      <tbody className={twMerge(theme.base, className)} {...props}>
-        {children}
-      </tbody>
-    </TableBodyContext.Provider>
-  );
-};
+    return (
+      <TableBodyContext.Provider value={{ theme }}>
+        <tbody className={twMerge(theme.base, className)} ref={ref} {...props}>
+          {children}
+        </tbody>
+      </TableBodyContext.Provider>
+    );
+  },
+);
+TableBody.displayName = 'Table.Body';

src/components/Table/TableCell.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -10,18 +10,21 @@ export interface FlowbiteTableCellTheme {
   base: string;
 }
 
-export interface TableCellProps extends ComponentProps<'td'> {
+export interface TableCellProps extends ComponentPropsWithRef<'td'> {
   theme?: DeepPartial<FlowbiteTableCellTheme>;
 }
 
-export const TableCell: FC<TableCellProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const { theme: bodyTheme } = useTableBodyContext();
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: bodyTheme } = useTableBodyContext();
 
-  const theme = mergeDeep(bodyTheme.cell, customTheme);
+    const theme = mergeDeep(bodyTheme.cell, customTheme);
 
-  return (
-    <td className={twMerge(theme.base, className)} {...props}>
-      {children}
-    </td>
-  );
-};
+    return (
+      <td className={twMerge(theme.base, className)} ref={ref} {...props}>
+        {children}
+      </td>
+    );
+  },
+);
+TableCell.displayName = 'Table.Cell';

src/components/Table/TableHead.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -13,20 +13,23 @@ export interface FlowbiteTableHeadTheme {
   cell: FlowbiteTableHeadCellTheme;
 }
 
-export interface TableHeadProps extends ComponentProps<'thead'> {
+export interface TableHeadProps extends ComponentPropsWithRef<'thead'> {
   theme?: DeepPartial<FlowbiteTableHeadTheme>;
 }
 
-export const TableHead: FC<TableHeadProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const { theme: rootTheme } = useTableContext();
+export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: rootTheme } = useTableContext();
 
-  const theme = mergeDeep(rootTheme.head, customTheme);
+    const theme = mergeDeep(rootTheme.head, customTheme);
 
-  return (
-    <TableHeadContext.Provider value={{ theme }}>
-      <thead className={twMerge(theme.base, className)} {...props}>
-        <tr>{children}</tr>
-      </thead>
-    </TableHeadContext.Provider>
-  );
-};
+    return (
+      <TableHeadContext.Provider value={{ theme }}>
+        <thead className={twMerge(theme.base, className)} ref={ref} {...props}>
+          <tr>{children}</tr>
+        </thead>
+      </TableHeadContext.Provider>
+    );
+  },
+);
+TableHead.displayName = 'Table.Head';

src/components/Table/TableHeadCell.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -10,18 +10,21 @@ export interface FlowbiteTableHeadCellTheme {
   base: string;
 }
 
-export interface TableHeadCellProps extends ComponentProps<'th'> {
+export interface TableHeadCellProps extends ComponentPropsWithRef<'th'> {
   theme?: DeepPartial<FlowbiteTableHeadCellTheme>;
 }
 
-export const TableHeadCell: FC<TableHeadCellProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const { theme: headTheme } = useTableHeadContext();
+export const TableHeadCell = forwardRef<HTMLTableCellElement, TableHeadCellProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: headTheme } = useTableHeadContext();
 
-  const theme = mergeDeep(headTheme.cell, customTheme);
+    const theme = mergeDeep(headTheme.cell, customTheme);
 
-  return (
-    <th className={twMerge(theme.base, className)} {...props}>
-      {children}
-    </th>
-  );
-};
+    return (
+      <th className={twMerge(theme.base, className)} ref={ref} {...props}>
+        {children}
+      </th>
+    );
+  },
+);
+TableHeadCell.displayName = 'Table.HeadCell';

src/components/Table/TableRow.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -12,22 +12,26 @@ export interface FlowbiteTableRowTheme {
   striped: string;
 }
 
-export interface TableRowProps extends ComponentProps<'tr'> {
+export interface TableRowProps extends ComponentPropsWithRef<'tr'> {
   theme?: DeepPartial<FlowbiteTableRowTheme>;
 }
 
-export const TableRow: FC<TableRowProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const { theme: rootTheme, hoverable, striped } = useTableContext();
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: rootTheme, hoverable, striped } = useTableContext();
 
-  const theme = mergeDeep(rootTheme.row, customTheme);
+    const theme = mergeDeep(rootTheme.row, customTheme);
 
-  return (
-    <tr
-      data-testid="table-row-element"
-      className={twMerge(theme.base, striped && theme.striped, hoverable && theme.hovered, className)}
-      {...props}
-    >
-      {children}
-    </tr>
-  );
-};
+    return (
+      <tr
+        ref={ref}
+        data-testid="table-row-element"
+        className={twMerge(theme.base, striped && theme.striped, hoverable && theme.hovered, className)}
+        {...props}
+      >
+        {children}
+      </tr>
+    );
+  },
+);
+TableRow.displayName = 'Table.Row';