Table

1
import { cva, type VariantProps } from "class-variance-authority";
2
import type { ComponentProps } from "react";
3

4
import { cn } from "@/lib/utils";
5

6
const tableVariants = cva("relative w-full overflow-x-auto", {
7
  variants: {
8
    border: {
9
      solid: "pixel-border pixel-color-border p-[calc(var(--pixel-size)*2)]",
10
      none: "",
11
    },
12
  },
13
  defaultVariants: {
14
    border: "solid",
15
  },
16
});
17

18
function Table({
19
  border = "solid",
20
  className,
21
  ...props
22
}: Omit<ComponentProps<"table">, "border"> &
23
  VariantProps<typeof tableVariants>) {
24
  return (
25
    <div data-slot="table-container" className={tableVariants({ border })}>
26
      <table
27
        data-slot="table"
28
        className={cn("w-full caption-bottom text-xs", className)}
29
        {...props}
30
      />
31
    </div>
32
  );
33
}
34

35
function TableHeader({ className, ...props }: ComponentProps<"thead">) {
36
  return (
37
    <thead
38
      data-slot="table-header"
39
      className={cn(className)}
40
      {...props}
41
    />
42
  );
43
}
44

45
function TableBody({ className, ...props }: ComponentProps<"tbody">) {
46
  return (
47
    <tbody
48
      data-slot="table-body"
49
      className={cn("[&_tr:last-child]:pixel-color-[transparent]", className)}
50
      {...props}
51
    />
52
  );
53
}
54

55

56
const tableFooterVariants = cva(
57
  [
58
    "font-medium",
59
    "bg-muted/50",
60
    "[&>tr]:last:pixel-color-[transparent]"
61
  ],
62
  {
63
    variants: {
64
      border: {
65
        solid: [
66
          "pixel-color-border",
67
          "pixel-size-md",
68
          "[--dash-size:12px]",
69
          "[--dash-gap:0px]",
70
          "bg-[repeating-linear-gradient(to_right,var(--pixel-color)_0,var(--pixel-color)_var(--dash-size),transparent_var(--dash-size),transparent_calc(var(--dash-size)+var(--dash-gap)))]",
71
          "bg-size-[auto_var(--pixel-size)]",
72
          "bg-top",
73
          "bg-no-repeat",
74
        ],
75
        dashed: [
76
          "pixel-color-border",
77
          "pixel-size-md",
78
          "[--dash-size:12px]",
79
          "[--dash-gap:4px]",
80
          "bg-[repeating-linear-gradient(to_right,var(--pixel-color)_0,var(--pixel-color)_var(--dash-size),transparent_var(--dash-size),transparent_calc(var(--dash-size)+var(--dash-gap)))]",
81
          "bg-size-[auto_var(--pixel-size)]",
82
          "bg-top",
83
          "bg-no-repeat",
84
        ],
85
      },
86
    },
87
    defaultVariants: {
88
      border: "dashed",
89
    },
90
  },
91
);
92

93
function TableFooter({ className, border = "dashed", ...props }: ComponentProps<"tfoot"> & VariantProps<typeof tableFooterVariants>) {
94
  return (
95
    <tfoot
96
      data-slot="table-footer"
97
      className={cn(
98
        tableFooterVariants({ border }),
99
        className,
100
      )}
101
      {...props}
102
    />
103
  );
104
}
105

106
const tableRowVariants = cva(
107
  [
108
    "transition-colors",
109
    "hover:bg-muted/50",
110
    "has-aria-expanded:bg-muted/50",
111
    "data-[state=selected]:bg-muted",
112
  ],
113
  {
114
    variants: {
115
      border: {
116
        solid: [
117
          "pixel-color-border",
118
          "pixel-size-md",
119
          "[--dash-size:12px]",
120
          "[--dash-gap:0px]",
121
          "bg-[repeating-linear-gradient(to_right,var(--pixel-color)_0,var(--pixel-color)_var(--dash-size),transparent_var(--dash-size),transparent_calc(var(--dash-size)+var(--dash-gap)))]",
122
          "bg-size-[auto_var(--pixel-size)]",
123
          "bg-bottom",
124
          "bg-no-repeat",
125
        ],
126
        dashed: [
127
          "pixel-color-border",
128
          "pixel-size-md",
129
          "[--dash-size:12px]",
130
          "[--dash-gap:4px]",
131
          "bg-[repeating-linear-gradient(to_right,var(--pixel-color)_0,var(--pixel-color)_var(--dash-size),transparent_var(--dash-size),transparent_calc(var(--dash-size)+var(--dash-gap)))]",
132
          "bg-size-[auto_var(--pixel-size)]",
133
          "bg-bottom",
134
          "bg-no-repeat",
135
        ],
136
        none: ""
137
      },
138
    },
139
    defaultVariants: {
140
      border: "dashed",
141
    },
142
  },
143
);
144

145
function TableRow({ border = "dashed", className, ...props }: ComponentProps<"tr"> & VariantProps<typeof tableRowVariants>) {
146
  return (
147
    <tr
148
      data-slot="table-row"
149
      className={cn(
150
        tableRowVariants({ border }),
151
        className,
152
      )}
153
      {...props}
154
    />
155
  );
156
}
157

158
function TableHead({ className, ...props }: ComponentProps<"th">) {
159
  return (
160
    <th
161
      data-slot="table-head"
162
      className={cn(
163
        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground has-[[role=checkbox]]:pr-0",
164
        className,
165
      )}
166
      {...props}
167
    />
168
  );
169
}
170

171
function TableCell({ className, ...props }: ComponentProps<"td">) {
172
  return (
173
    <td
174
      data-slot="table-cell"
175
      className={cn(
176
        "p-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0",
177
        className,
178
      )}
179
      {...props}
180
    />
181
  );
182
}
183

184
function TableCaption({ className, ...props }: ComponentProps<"caption">) {
185
  return (
186
    <caption
187
      data-slot="table-caption"
188
      className={cn("mt-4 text-xs text-muted-foreground", className)}
189
      {...props}
190
    />
191
  );
192
}
193

194
export {
195
  Table,
196
  TableBody,
197
  TableCaption,
198
  TableCell,
199
  TableFooter,
200
  TableHead,
201
  TableHeader,
202
  TableRow,
203
};