| 1 |
import * as React from "react"; |
| 2 |
|
| 3 |
const Table = React.forwardRef< |
| 4 |
HTMLTableElement, |
| 5 |
React.HTMLAttributes<HTMLTableElement> |
| 6 |
>(({ className = "", ...props }, ref) => ( |
| 7 |
<div className="relative w-full overflow-auto"> |
| 8 |
<table |
| 9 |
ref={ref} |
| 10 |
className={`w-full caption-bottom text-sm ${className}`} |
| 11 |
{...props} |
| 12 |
/> |
| 13 |
</div> |
| 14 |
)); |
| 15 |
Table.displayName = "Table"; |
| 16 |
|
| 17 |
const TableHeader = React.forwardRef< |
| 18 |
HTMLTableSectionElement, |
| 19 |
React.HTMLAttributes<HTMLTableSectionElement> |
| 20 |
>(({ className = "", ...props }, ref) => ( |
| 21 |
<thead ref={ref} className={`[&_tr]:border-b ${className}`} {...props} /> |
| 22 |
)); |
| 23 |
TableHeader.displayName = "TableHeader"; |
| 24 |
|
| 25 |
const TableBody = React.forwardRef< |
| 26 |
HTMLTableSectionElement, |
| 27 |
React.HTMLAttributes<HTMLTableSectionElement> |
| 28 |
>(({ className = "", ...props }, ref) => ( |
| 29 |
<tbody |
| 30 |
ref={ref} |
| 31 |
className={`[&_tr:last-child]:border-0 ${className}`} |
| 32 |
{...props} |
| 33 |
/> |
| 34 |
)); |
| 35 |
TableBody.displayName = "TableBody"; |
| 36 |
|
| 37 |
const TableRow = React.forwardRef< |
| 38 |
HTMLTableRowElement, |
| 39 |
React.HTMLAttributes<HTMLTableRowElement> |
| 40 |
>(({ className = "", ...props }, ref) => ( |
| 41 |
<tr |
| 42 |
ref={ref} |
| 43 |
className={`border-b transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50 data-[state=selected]:bg-gray-100 dark:data-[state=selected]:bg-gray-800 ${className}`} |
| 44 |
{...props} |
| 45 |
/> |
| 46 |
)); |
| 47 |
TableRow.displayName = "TableRow"; |
| 48 |
|
| 49 |
const TableHead = React.forwardRef< |
| 50 |
HTMLTableCellElement, |
| 51 |
React.ThHTMLAttributes<HTMLTableCellElement> |
| 52 |
>(({ className = "", ...props }, ref) => ( |
| 53 |
<th |
| 54 |
ref={ref} |
| 55 |
className={`h-12 px-4 text-left align-middle text-sm font-medium text-gray-500 dark:text-gray-400 [&:has([role=checkbox])]:pr-0 ${className}`} |
| 56 |
{...props} |
| 57 |
/> |
| 58 |
)); |
| 59 |
TableHead.displayName = "TableHead"; |
| 60 |
|
| 61 |
const TableCell = React.forwardRef< |
| 62 |
HTMLTableCellElement, |
| 63 |
React.TdHTMLAttributes<HTMLTableCellElement> |
| 64 |
>(({ className = "", ...props }, ref) => ( |
| 65 |
<td |
| 66 |
ref={ref} |
| 67 |
className={`p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0 ${className}`} |
| 68 |
{...props} |
| 69 |
/> |
| 70 |
)); |
| 71 |
TableCell.displayName = "TableCell"; |
| 72 |
|
| 73 |
export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell }; |
| 74 |
|
