Table

1'use client'
2 
3import {
4  forwardRef,
5  type HTMLAttributes,
6  type TdHTMLAttributes,
7  type ThHTMLAttributes,
8} from 'react'
9import { cn } from '@/lib/utils'
10 
11export type TableProps = HTMLAttributes<HTMLTableElement>
12 
13export const Table = forwardRef<HTMLTableElement, TableProps>(({ className, ...props }, ref) => (
14  <div className="relative w-full overflow-x-auto">
15    <table ref={ref} className={cn('w-full text-[13px] border-collapse', className)} {...props} />
16  </div>
17))
18Table.displayName = 'Table'
19 
20export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>
21 
22export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(
23  ({ className, ...props }, ref) => <thead ref={ref} className={cn(className)} {...props} />,
24)
25TableHeader.displayName = 'TableHeader'
26 
27export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>
28 
29export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
30  ({ className, ...props }, ref) => <tbody ref={ref} className={cn(className)} {...props} />,
31)
32TableBody.displayName = 'TableBody'
33 
34export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
35  isBodyRow?: boolean
36}
37 
38export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
39  ({ isBodyRow, className, ...props }, ref) => (
40    <tr
41      ref={ref}
42      className={cn(
43        'group/row border-b border-border/60 transition-colors duration-(--motion-dur-fast) motion-reduce:transition-none',
44        isBodyRow && 'hover:bg-muted',
45        className,
46      )}
47      {...props}
48    />
49  ),
50)
51TableRow.displayName = 'TableRow'
52 
53export type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement>
54 
55export const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(
56  ({ className, ...props }, ref) => (
57    <th
58      ref={ref}
59      scope="col"
60      className={cn('px-3 py-2 text-start font-semibold text-foreground', className)}
61      {...props}
62    />
63  ),
64)
65TableHead.displayName = 'TableHead'
66 
67export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>
68 
69export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
70  ({ className, ...props }, ref) => (
71    <td
72      ref={ref}
73      className={cn(
74        'px-3 py-2 text-start text-muted-foreground transition-colors duration-(--motion-dur-fast) motion-reduce:transition-none group-hover/row:text-foreground',
75        className,
76      )}
77      {...props}
78    />
79  ),
80)
81TableCell.displayName = 'TableCell'
82 
83// … truncated