table

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import "./table.css"
6 
7/* ------------------------------------------------------------------ */
8/*  CVA                                                                */
9/* ------------------------------------------------------------------ */
10 
11const tableVariants = cva("table-base w-full caption-bottom")
12 
13const tableHeaderVariants = cva("table-header")
14 
15const tableBodyVariants = cva("table-body")
16 
17const tableFooterVariants = cva("table-footer")
18 
19const tableRowVariants = cva("table-row")
20 
21const tableHeadVariants = cva(
22  "table-head text-content-caption font-accent text-left"
23)
24 
25const tableCellVariants = cva("table-cell text-content-note text-left")
26 
27const tableCaptionVariants = cva(
28  "table-caption text-content-caption"
29)
30 
31/* ------------------------------------------------------------------ */
32/*  Table                                                              */
33/* ------------------------------------------------------------------ */
34 
35function Table({
36  className,
37  wrapperClassName,
38  variant = "default",
39  compact = false,
40  children,
41  ...props
42}: React.ComponentProps<"table"> & {
43  wrapperClassName?: string
44  variant?: "default" | "striped"
45  compact?: boolean
46}) {
47  const wrapperRef = React.useRef<HTMLDivElement>(null)
48  const [overflows, setOverflows] = React.useState(false)
49 
50  React.useEffect(() => {
51    const el = wrapperRef.current
52    if (!el) return
53 
54    function check() {
55      if (el) setOverflows(el.scrollWidth > el.clientWidth)
56    }
57 
58    check()
59 
60    const ro = new ResizeObserver(check)
61    ro.observe(el)
62    return () => ro.disconnect()
63  }, [])
64 
65  return (
66    <div
67      ref={wrapperRef}
68      data-slot="table-wrapper"
69      role={overflows ? "region" : undefined}
70      aria-label={overflows ? "Scrollable table" : undefined}
71      tabIndex={overflows ? 0 : undefined}
72      className={cn("table-wrapper w-full", wrapperClassName)}
73    >
74      <table
75        data-slot="table"
76        data-variant={variant}
77        data-compact={compact || undefined}
78        className={cn(tableVariants(), className)}
79        {...props}
80      >
81        {children}
82      </table>
83    </div>
84  )
85}
86 
87/* ------------------------------------------------------------------ */
88/*  TableHeader                                                        */
89/* ------------------------------------------------------------------ */
90 
91// … truncated