konnosDashboard
Table.tsx108 lines · main
1import { ComponentPropsWithRef, forwardRef } from 'react'
2import { cn } from 'ui'
3import {
4 Table as ShadcnTable,
5 TableBody as ShadcnTableBody,
6 TableCaption as ShadcnTableCaption,
7 TableCell as ShadcnTableCell,
8 TableFooter as ShadcnTableFooter,
9 TableHead as ShadcnTableHead,
10 TableHeader as ShadcnTableHeader,
11 TableRow as ShadcnTableRow,
12} from 'ui/src/components/shadcn/ui/table'
13
14// Only create a custom component for Table with the added props
15export const Table = forwardRef<HTMLTableElement, ComponentPropsWithRef<typeof ShadcnTable>>(
16 ({ className, onScroll, ...props }, ref) => (
17 <ShadcnTable
18 ref={ref}
19 {...props}
20 className={cn(className)}
21 containerProps={{
22 onScroll,
23 className: 'h-full w-full overflow-auto caption-bottom text-sm [&>table]:table-fixed',
24 }}
25 />
26 )
27)
28Table.displayName = 'Table'
29
30export const TableHeader = forwardRef<
31 HTMLTableSectionElement,
32 ComponentPropsWithRef<typeof ShadcnTableHeader>
33>(({ className, ...props }, ref) => (
34 <ShadcnTableHeader ref={ref} className={cn('sticky top-0 z-1', className)} {...props} />
35))
36TableHeader.displayName = 'TableHeader'
37
38export const TableBody = forwardRef<
39 HTMLTableSectionElement,
40 ComponentPropsWithRef<typeof ShadcnTableBody>
41>(({ className, ...props }, ref) => (
42 <ShadcnTableBody
43 ref={ref}
44 {...props}
45 className={cn(
46 'transition-colors outline-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary',
47 className
48 )}
49 />
50))
51TableBody.displayName = 'TableBody'
52
53export const TableFooter = forwardRef<
54 HTMLTableSectionElement,
55 ComponentPropsWithRef<typeof ShadcnTableFooter>
56>(({ className, ...props }, ref) => (
57 <ShadcnTableFooter ref={ref} className={cn('text-primary-foreground', className)} {...props} />
58))
59TableFooter.displayName = 'TableFooter'
60
61export const TableRow = forwardRef<
62 HTMLTableRowElement,
63 ComponentPropsWithRef<typeof ShadcnTableRow>
64>(({ className, ...props }, ref) => (
65 <ShadcnTableRow
66 ref={ref}
67 className={cn('bg-background hover:bg-surface-100 border-b-0', className)}
68 {...props}
69 />
70))
71TableRow.displayName = 'TableRow'
72
73export const TableHead = forwardRef<
74 HTMLTableCellElement,
75 ComponentPropsWithRef<typeof ShadcnTableHead>
76>(({ className, ...props }, ref) => (
77 <ShadcnTableHead
78 ref={ref}
79 className={cn(
80 'text-xs! font-normal! text-foreground-lighter font-mono',
81 'relative select-none truncate [&>.cursor-col-resize]:last:opacity-0',
82 'text-muted-foreground h-9 px-2 text-left align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
83 className
84 )}
85 {...props}
86 />
87))
88TableHead.displayName = 'TableHead'
89
90export const TableCell = forwardRef<
91 HTMLTableCellElement,
92 ComponentPropsWithRef<typeof ShadcnTableCell>
93>(({ className, ...props }, ref) => (
94 <ShadcnTableCell
95 ref={ref}
96 className={cn('text-xs py-1! p-2 *:[[role=checkbox]]:translate-y-[2px] truncate', className)}
97 {...props}
98 />
99))
100TableCell.displayName = 'TableCell'
101
102export const TableCaption = forwardRef<
103 HTMLTableCaptionElement,
104 ComponentPropsWithRef<typeof ShadcnTableCaption>
105>(({ className, ...props }, ref) => (
106 <ShadcnTableCaption ref={ref} className={cn('text-sm', className)} {...props} />
107))
108TableCaption.displayName = 'TableCaption'