Spaces:
Build error
Build error
Upload components/ui/table.jsx with huggingface_hub
Browse files- components/ui/table.jsx +89 -0
components/ui/table.jsx
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import * as React from "react"
|
| 2 |
+
import { cn } from "@/lib/utils"
|
| 3 |
+
|
| 4 |
+
const Table = React.forwardRef(({ className, ...props }, ref) => (
|
| 5 |
+
<div className="relative w-full overflow-auto">
|
| 6 |
+
<table
|
| 7 |
+
ref={ref}
|
| 8 |
+
className={cn("w-full caption-bottom text-sm", className)}
|
| 9 |
+
{...props}
|
| 10 |
+
/>
|
| 11 |
+
</div>
|
| 12 |
+
))
|
| 13 |
+
Table.displayName = "Table"
|
| 14 |
+
|
| 15 |
+
const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
|
| 16 |
+
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
| 17 |
+
))
|
| 18 |
+
TableHeader.displayName = "TableHeader"
|
| 19 |
+
|
| 20 |
+
const TableBody = React.forwardRef(({ className, ...props }, ref) => (
|
| 21 |
+
<tbody
|
| 22 |
+
ref={ref}
|
| 23 |
+
className={cn("[&_tr:last-child]:border-0", className)}
|
| 24 |
+
{...props}
|
| 25 |
+
/>
|
| 26 |
+
))
|
| 27 |
+
TableBody.displayName = "TableBody"
|
| 28 |
+
|
| 29 |
+
const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
|
| 30 |
+
<tfoot
|
| 31 |
+
ref={ref}
|
| 32 |
+
className={cn("bg-primary font-medium text-primary-foreground", className)}
|
| 33 |
+
{...props}
|
| 34 |
+
/>
|
| 35 |
+
))
|
| 36 |
+
TableFooter.displayName = "TableFooter"
|
| 37 |
+
|
| 38 |
+
const TableRow = React.forwardRef(({ className, ...props }, ref) => (
|
| 39 |
+
<tr
|
| 40 |
+
ref={ref}
|
| 41 |
+
className={cn(
|
| 42 |
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
| 43 |
+
className
|
| 44 |
+
)}
|
| 45 |
+
{...props}
|
| 46 |
+
/>
|
| 47 |
+
))
|
| 48 |
+
TableRow.displayName = "TableRow"
|
| 49 |
+
|
| 50 |
+
const TableHead = React.forwardRef(({ className, ...props }, ref) => (
|
| 51 |
+
<th
|
| 52 |
+
ref={ref}
|
| 53 |
+
className={cn(
|
| 54 |
+
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
| 55 |
+
className
|
| 56 |
+
)}
|
| 57 |
+
{...props}
|
| 58 |
+
/>
|
| 59 |
+
))
|
| 60 |
+
TableHead.displayName = "TableHead"
|
| 61 |
+
|
| 62 |
+
const TableCell = React.forwardRef(({ className, ...props }, ref) => (
|
| 63 |
+
<td
|
| 64 |
+
ref={ref}
|
| 65 |
+
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
| 66 |
+
{...props}
|
| 67 |
+
/>
|
| 68 |
+
))
|
| 69 |
+
TableCell.displayName = "TableCell"
|
| 70 |
+
|
| 71 |
+
const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
|
| 72 |
+
<caption
|
| 73 |
+
ref={ref}
|
| 74 |
+
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
| 75 |
+
{...props}
|
| 76 |
+
/>
|
| 77 |
+
))
|
| 78 |
+
TableCaption.displayName = "TableCaption"
|
| 79 |
+
|
| 80 |
+
export {
|
| 81 |
+
Table,
|
| 82 |
+
TableHeader,
|
| 83 |
+
TableBody,
|
| 84 |
+
TableFooter,
|
| 85 |
+
TableHead,
|
| 86 |
+
TableRow,
|
| 87 |
+
TableCell,
|
| 88 |
+
TableCaption,
|
| 89 |
+
}
|