draupnir4all-web

git clone git://archive.git.mtrnord.blog/MTRNord/draupnir4all-web.git
Log | Files | Refs | README | LICENSE

table.tsx (2725B)

      1 
      2 import { cn } from "@/lib/utils"
      3 import { forwardRef, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react"
      4 
      5 const Table = forwardRef<
      6   HTMLTableElement,
      7   HTMLAttributes<HTMLTableElement>
      8 >(({ className, ...props }, ref) => (
      9   <div className="relative w-full overflow-auto">
     10     <table
     11       ref={ref}
     12       className={cn("w-full caption-bottom text-sm", className)}
     13       {...props}
     14     />
     15   </div>
     16 ))
     17 Table.displayName = "Table"
     18 
     19 const TableHeader = forwardRef<
     20   HTMLTableSectionElement,
     21   HTMLAttributes<HTMLTableSectionElement>
     22 >(({ className, ...props }, ref) => (
     23   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
     24 ))
     25 TableHeader.displayName = "TableHeader"
     26 
     27 const TableBody = forwardRef<
     28   HTMLTableSectionElement,
     29   HTMLAttributes<HTMLTableSectionElement>
     30 >(({ className, ...props }, ref) => (
     31   <tbody
     32     ref={ref}
     33     className={cn("[&_tr:last-child]:border-0", className)}
     34     {...props}
     35   />
     36 ))
     37 TableBody.displayName = "TableBody"
     38 
     39 const TableFooter = forwardRef<
     40   HTMLTableSectionElement,
     41   HTMLAttributes<HTMLTableSectionElement>
     42 >(({ className, ...props }, ref) => (
     43   <tfoot
     44     ref={ref}
     45     className={cn(
     46       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
     47       className
     48     )}
     49     {...props}
     50   />
     51 ))
     52 TableFooter.displayName = "TableFooter"
     53 
     54 const TableRow = forwardRef<
     55   HTMLTableRowElement,
     56   HTMLAttributes<HTMLTableRowElement>
     57 >(({ className, ...props }, ref) => (
     58   <tr
     59     ref={ref}
     60     className={cn(
     61       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
     62       className
     63     )}
     64     {...props}
     65   />
     66 ))
     67 TableRow.displayName = "TableRow"
     68 
     69 const TableHead = forwardRef<
     70   HTMLTableCellElement,
     71   ThHTMLAttributes<HTMLTableCellElement>
     72 >(({ className, ...props }, ref) => (
     73   <th
     74     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       className
     78     )}
     79     {...props}
     80   />
     81 ))
     82 TableHead.displayName = "TableHead"
     83 
     84 const TableCell = forwardRef<
     85   HTMLTableCellElement,
     86   TdHTMLAttributes<HTMLTableCellElement>
     87 >(({ className, ...props }, ref) => (
     88   <td
     89     ref={ref}
     90     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     91     {...props}
     92   />
     93 ))
     94 TableCell.displayName = "TableCell"
     95 
     96 const TableCaption = forwardRef<
     97   HTMLTableCaptionElement,
     98   HTMLAttributes<HTMLTableCaptionElement>
     99 >(({ className, ...props }, ref) => (
    100   <caption
    101     ref={ref}
    102     className={cn("mt-4 text-sm text-muted-foreground", className)}
    103     {...props}
    104   />
    105 ))
    106 TableCaption.displayName = "TableCaption"
    107 
    108 export {
    109   Table,
    110   TableHeader,
    111   TableBody,
    112   TableFooter,
    113   TableHead,
    114   TableRow,
    115   TableCell,
    116   TableCaption,
    117 }