table.jsx 2.1 KB

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