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