table.tsx raw

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