Skip to content

Commit a7f0d37

Browse files
hotlonghotlong
committed
Refactor Table components and remove extra wrapper
Refactored the Table and related components to use React.forwardRef for better composability and consistency. Simplified the DataTableRenderer by removing an unnecessary div wrapper around the Table, aligning with the updated Table component structure and styling.
1 parent 895bce4 commit a7f0d37

File tree

2 files changed

+95
-100
lines changed

2 files changed

+95
-100
lines changed

‎packages/components/src/renderers/complex/data-table.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -386,8 +386,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
386386
</div>
387387

388388
{/* Table */}
389-
<div className="border rounded-lg">
390-
<Table>
389+
<Table>
391390
{caption && <TableCaption>{caption}</TableCaption>}
392391
<TableHeader>
393392
<TableRow>
@@ -511,7 +510,6 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
511510
)}
512511
</TableBody>
513512
</Table>
514-
</div>
515513

516514
{/* Pagination */}
517515
{pagination && sortedData.length > 0 && (

‎packages/components/src/ui/table.tsx‎

Lines changed: 94 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -2,111 +2,108 @@ import * as React from "react"
22

33
import { cn } from "../lib/utils"
44

5-
function Table({ className, ...props }: React.ComponentProps<"table">) {
6-
return (
7-
<div
8-
data-slot="table-container"
9-
className="relative w-full overflow-x-auto rounded-md border border-slate-800/60 bg-slate-950/40 backdrop-blur-sm shadow-[0_0_20px_-10px_rgba(6,182,212,0.1)]"
10-
>
11-
{/* Decorative lines */}
12-
<div className="absolute top-0 left-0 w-full h-[1px] bg-linear-to-r from-transparent via-cyan-500/50 to-transparent opacity-50" />
13-
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-linear-to-r from-transparent via-cyan-500/50 to-transparent opacity-50" />
14-
15-
<table
16-
data-slot="table"
17-
className={cn("w-full caption-bottom text-sm border-collapse", className)}
18-
{...props}
19-
/>
20-
</div>
21-
)
22-
}
23-
24-
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
25-
return (
26-
<thead
27-
data-slot="table-header"
28-
className={cn("[&_tr]:border-b [&_tr]:border-slate-800", className)}
5+
const Table = React.forwardRef<
6+
HTMLTableElement,
7+
React.HTMLAttributes<HTMLTableElement>
8+
>(({ className, ...props }, ref) => (
9+
<div className="relative w-full overflow-auto">
10+
<table
11+
ref={ref}
12+
className={cn("w-full caption-bottom text-sm", className)}
2913
{...props}
3014
/>
31-
)
32-
}
15+
</div>
16+
))
17+
Table.displayName = "Table"
3318

34-
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
35-
return (
36-
<tbody
37-
data-slot="table-body"
38-
className={cn("[&_tr:last-child]:border-0", className)}
39-
{...props}
40-
/>
41-
)
42-
}
19+
const TableHeader = React.forwardRef<
20+
HTMLTableSectionElement,
21+
React.HTMLAttributes<HTMLTableSectionElement>
22+
>(({ className, ...props }, ref) => (
23+
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
24+
))
25+
TableHeader.displayName = "TableHeader"
4326

44-
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
45-
return (
46-
<tfoot
47-
data-slot="table-footer"
48-
className={cn(
49-
"bg-slate-900/80 border-t border-slate-800 font-medium [&>tr]:last:border-b-0 text-cyan-200",
50-
className
51-
)}
52-
{...props}
53-
/>
54-
)
55-
}
27+
const TableBody = React.forwardRef<
28+
HTMLTableSectionElement,
29+
React.HTMLAttributes<HTMLTableSectionElement>
30+
>(({ className, ...props }, ref) => (
31+
<tbody
32+
ref={ref}
33+
className={cn("[&_tr:last-child]:border-0", className)}
34+
{...props}
35+
/>
36+
))
37+
TableBody.displayName = "TableBody"
5638

57-
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
58-
return (
59-
<tr
60-
data-slot="table-row"
61-
className={cn(
62-
"border-b border-slate-800/60 transition-colors duration-200",
63-
"hover:bg-cyan-950/20 hover:shadow-[inset_0_0_10px_-5px_cyan]",
64-
"data-[state=selected]:bg-cyan-950/40 data-[state=selected]:border-cyan-500/30",
65-
className
66-
)}
67-
{...props}
68-
/>
69-
)
70-
}
39+
const TableFooter = React.forwardRef<
40+
HTMLTableSectionElement,
41+
React.HTMLAttributes<HTMLTableSectionElement>
42+
>(({ className, ...props }, ref) => (
43+
<tfoot
44+
ref={ref}
45+
className={cn(
46+
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
47+
className
48+
)}
49+
{...props}
50+
/>
51+
))
52+
TableFooter.displayName = "TableFooter"
7153

72-
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
73-
return (
74-
<th
75-
data-slot="table-head"
76-
className={cn(
77-
"h-10 px-4 text-left align-middle font-mono text-xs font-bold uppercase tracking-widest text-cyan-500/80 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
78-
className
79-
)}
80-
{...props}
81-
/>
82-
)
83-
}
54+
const TableRow = React.forwardRef<
55+
HTMLTableRowElement,
56+
React.HTMLAttributes<HTMLTableRowElement>
57+
>(({ className, ...props }, ref) => (
58+
<tr
59+
ref={ref}
60+
className={cn(
61+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
62+
className
63+
)}
64+
{...props}
65+
/>
66+
))
67+
TableRow.displayName = "TableRow"
8468

85-
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
86-
return (
87-
<td
88-
data-slot="table-cell"
89-
className={cn(
90-
"p-4 align-middle whitespace-nowrap text-slate-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
91-
className
92-
)}
93-
{...props}
94-
/>
95-
)
96-
}
69+
const TableHead = React.forwardRef<
70+
HTMLTableCellElement,
71+
React.ThHTMLAttributes<HTMLTableCellElement>
72+
>(({ className, ...props }, ref) => (
73+
<th
74+
ref={ref}
75+
className={cn(
76+
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
77+
className
78+
)}
79+
{...props}
80+
/>
81+
))
82+
TableHead.displayName = "TableHead"
9783

98-
function TableCaption({
99-
className,
100-
...props
101-
}: React.ComponentProps<"caption">) {
102-
return (
103-
<caption
104-
data-slot="table-caption"
105-
className={cn("text-muted-foreground mt-4 text-sm", className)}
106-
{...props}
107-
/>
108-
)
109-
}
84+
const TableCell = React.forwardRef<
85+
HTMLTableCellElement,
86+
React.TdHTMLAttributes<HTMLTableCellElement>
87+
>(({ className, ...props }, ref) => (
88+
<td
89+
ref={ref}
90+
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
91+
{...props}
92+
/>
93+
))
94+
TableCell.displayName = "TableCell"
95+
96+
const TableCaption = React.forwardRef<
97+
HTMLTableCaptionElement,
98+
React.HTMLAttributes<HTMLTableCaptionElement>
99+
>(({ className, ...props }, ref) => (
100+
<caption
101+
ref={ref}
102+
className={cn("mt-4 text-sm text-muted-foreground", className)}
103+
{...props}
104+
/>
105+
))
106+
TableCaption.displayName = "TableCaption"
110107

111108
export {
112109
Table,

0 commit comments

Comments
 (0)