remove forward ref

src/components/ui/table.tsx

@@ -6,107 +6,131 @@ export function TableContainer({ children }: { children: React.ReactNode }) {
     return <div className="border rounded-lg bg-card">{children}</div>
 }
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
+const Table = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableElement> & {
+    ref: React.RefObject<HTMLTableElement>;
+  }
+) => (<div className="relative w-full overflow-auto">
+  <table
+    ref={ref}
+    className={cn("w-full caption-bottom text-sm", className)}
+    {...props}
+  />
+</div>)
 Table.displayName = "Table"
 
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
+const TableHeader = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref: React.RefObject<HTMLTableSectionElement>;
+  }
+) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />)
 TableHeader.displayName = "TableHeader"
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
+const TableBody = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref: React.RefObject<HTMLTableSectionElement>;
+  }
+) => (<tbody
+  ref={ref}
+  className={cn("[&_tr:last-child]:border-0", className)}
+  {...props}
+/>)
 TableBody.displayName = "TableBody"
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
+const TableFooter = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref: React.RefObject<HTMLTableSectionElement>;
+  }
+) => (<tfoot
+  ref={ref}
+  className={cn(
+    "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
+    className
+  )}
+  {...props}
+/>)
 TableFooter.displayName = "TableFooter"
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
+const TableRow = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableRowElement> & {
+    ref: React.RefObject<HTMLTableRowElement>;
+  }
+) => (<tr
+  ref={ref}
+  className={cn(
+    "border-b transition-colors data-[state=selected]:bg-muted",
+    className
+  )}
+  {...props}
+/>)
 TableRow.displayName = "TableRow"
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
+const TableHead = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ThHTMLAttributes<HTMLTableCellElement> & {
+    ref: React.RefObject<HTMLTableCellElement>;
+  }
+) => (<th
+  ref={ref}
+  className={cn(
+    "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+    className
+  )}
+  {...props}
+/>)
 TableHead.displayName = "TableHead"
 
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
+const TableCell = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.TdHTMLAttributes<HTMLTableCellElement> & {
+    ref: React.RefObject<HTMLTableCellElement>;
+  }
+) => (<td
+  ref={ref}
+  className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
+  {...props}
+/>)
 TableCell.displayName = "TableCell"
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
+const TableCaption = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableCaptionElement> & {
+    ref: React.RefObject<HTMLTableCaptionElement>;
+  }
+) => (<caption
+  ref={ref}
+  className={cn("mt-4 text-sm text-muted-foreground", className)}
+  {...props}
+/>)
 TableCaption.displayName = "TableCaption"
 
 export {