CoolFace
Apppublic

huggingface/ai-deadlines

sourceHugging Faceupdated 3d agoView on Hugging Face
781likes
table.tsx118 linesDownload Raw Back to ui
1import * as React from "react"2 3import { cn } from "@/lib/utils"4 5const Table = React.forwardRef<6  HTMLTableElement,7  React.HTMLAttributes<HTMLTableElement>8>(({ className, ...props }, ref) => (9  <div className="relative w-full overflow-auto">10    <table11      ref={ref}12      className={cn("w-full caption-bottom text-sm", className)}13      {...props}14    />15  </div>16))17Table.displayName = "Table"18 19const TableHeader = React.forwardRef<20  HTMLTableSectionElement,21  React.HTMLAttributes<HTMLTableSectionElement>22>(({ className, ...props }, ref) => (23  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />24))25TableHeader.displayName = "TableHeader"26 27const TableBody = React.forwardRef<28  HTMLTableSectionElement,29  React.HTMLAttributes<HTMLTableSectionElement>30>(({ className, ...props }, ref) => (31  <tbody32    ref={ref}33    className={cn("[&_tr:last-child]:border-0", className)}34    {...props}35  />36))37TableBody.displayName = "TableBody"38 39const TableFooter = React.forwardRef<40  HTMLTableSectionElement,41  React.HTMLAttributes<HTMLTableSectionElement>42>(({ className, ...props }, ref) => (43  <tfoot44    ref={ref}45    className={cn(46      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",47      className48    )}49    {...props}50  />51))52TableFooter.displayName = "TableFooter"53 54const TableRow = React.forwardRef<55  HTMLTableRowElement,56  React.HTMLAttributes<HTMLTableRowElement>57>(({ className, ...props }, ref) => (58  <tr59    ref={ref}60    className={cn(61      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",62      className63    )}64    {...props}65  />66))67TableRow.displayName = "TableRow"68 69const TableHead = React.forwardRef<70  HTMLTableCellElement,71  React.ThHTMLAttributes<HTMLTableCellElement>72>(({ className, ...props }, ref) => (73  <th74    ref={ref}75    className={cn(76      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",77      className78    )}79    {...props}80  />81))82TableHead.displayName = "TableHead"83 84const TableCell = React.forwardRef<85  HTMLTableCellElement,86  React.TdHTMLAttributes<HTMLTableCellElement>87>(({ className, ...props }, ref) => (88  <td89    ref={ref}90    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}91    {...props}92  />93))94TableCell.displayName = "TableCell"95 96const TableCaption = React.forwardRef<97  HTMLTableCaptionElement,98  React.HTMLAttributes<HTMLTableCaptionElement>99>(({ className, ...props }, ref) => (100  <caption101    ref={ref}102    className={cn("mt-4 text-sm text-muted-foreground", className)}103    {...props}104  />105))106TableCaption.displayName = "TableCaption"107 108export {109  Table,110  TableHeader,111  TableBody,112  TableFooter,113  TableHead,114  TableRow,115  TableCell,116  TableCaption,117}118