Table

1'use client';
2 
3import type * as React from 'react';
4 
5import { cn } from '@/lib/utils';
6 
7function Table({ className, ...props }: React.ComponentProps<'table'>) {
8  return (
9    <div
10      data-slot="table-container"
11      className="relative w-full overflow-x-auto">
12      <table
13        data-slot="table"
14        className={cn('w-full caption-bottom', className)}
15        {...props}
16      />
17    </div>
18  );
19}
20 
21function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
22  return (
23    <thead data-slot="table-header" className={cn(className)} {...props} />
24  );
25}
26 
27function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
28  return <tbody data-slot="table-body" className={cn(className)} {...props} />;
29}
30 
31function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
32  return (
33    <tfoot
34      data-slot="table-footer"
35      className={cn('border-t font-medium [&>tr]:last:border-b-0', className)}
36      {...props}
37    />
38  );
39}
40 
41interface TableRowProps extends React.ComponentProps<'tr'> {
42  selected?: boolean;
43}
44 
45function TableRow({ className, selected = false, ...props }: TableRowProps) {
46  return (
47    <tr
48      data-slot="table-row"
49      data-state={selected ? 'selected' : undefined}
50      className={cn('group', className)}
51      {...props}
52    />
53  );
54}
55 
56interface TableHeadProps extends React.ComponentProps<'th'> {
57  size?: 'small' | 'default';
58  selected?: boolean;
59}
60 
61function TableHead({
62  className,
63  size = 'default',
64  selected = false,
65  ...props
66}: TableHeadProps) {
67  return (
68    <th
69      data-slot="table-head"
70      data-state={selected ? 'selected' : undefined}
71      className={cn(
72        'border-stroke-tertiary border-b bg-transparent text-left align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[1px]',
73        'text-fg-secondary hover:border-stroke-tertiary-hover',
74        'transition-colors duration-200',
75        'data-[state=selected]:text-fg-primary data-[state=selected]:border-stroke-active',
76        'label-regular-primary',
77        'pt-3 pb-4',
78        {
79          'px-3': size === 'small',
80          'px-4': size === 'default',
81        },
82        className,
83      )}
84      {...props}
85    />
86  );
87}
88 
89interface TableCellProps extends React.ComponentProps<'td'> {
90  size?: 'small' | 'default';
91}
92 
93function TableCell({ className, size = 'default', ...props }: TableCellProps) {
94  return (
95    <td
96      data-slot="table-cell"
97      className={cn(
98// … truncated