Spaces:
Paused
Paused
import * as React from "react" | |
import { cn } from "@/lib/utils" | |
const Table = React.forwardRef< | |
HTMLTableElement, | |
React.HTMLAttributes<HTMLTableElement> | |
>(({ className, ...props }, ref) => ( | |
<div className="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} /> | |
)) | |
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} | |
/> | |
)) | |
TableBody.displayName = "TableBody" | |
const TableFooter = React.forwardRef< | |
HTMLTableSectionElement, | |
React.HTMLAttributes<HTMLTableSectionElement> | |
>(({ className, ...props }, ref) => ( | |
<tfoot | |
ref={ref} | |
className={cn("bg-stone-900 font-medium text-stone-50 dark:bg-stone-50 dark:text-stone-900", 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 hover:bg-stone-100/50 data-[state=selected]:bg-stone-100 dark:hover:bg-stone-800/50 dark:data-[state=selected]:bg-stone-800", | |
className | |
)} | |
{...props} | |
/> | |
)) | |
TableRow.displayName = "TableRow" | |
const TableHead = React.forwardRef< | |
HTMLTableCellElement, | |
React.ThHTMLAttributes<HTMLTableCellElement> | |
>(({ className, ...props }, ref) => ( | |
<th | |
ref={ref} | |
className={cn( | |
"h-12 px-4 text-left align-middle font-medium text-stone-500 [&:has([role=checkbox])]:pr-0 dark:text-stone-400", | |
className | |
)} | |
{...props} | |
/> | |
)) | |
TableHead.displayName = "TableHead" | |
const TableCell = React.forwardRef< | |
HTMLTableCellElement, | |
React.TdHTMLAttributes<HTMLTableCellElement> | |
>(({ className, ...props }, ref) => ( | |
<td | |
ref={ref} | |
className={cn("p-4 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-stone-500 dark:text-stone-400", className)} | |
{...props} | |
/> | |
)) | |
TableCaption.displayName = "TableCaption" | |
export { | |
Table, | |
TableHeader, | |
TableBody, | |
TableFooter, | |
TableHead, | |
TableRow, | |
TableCell, | |
TableCaption, | |
} | |