Skip to content

Commit ed63b40

Browse files
lalitdotdevlalitdotdev
committed
refactor: Added React components for flexible table structure (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption) with responsive design and improved styling for streamlined tabular data presentation.
1 parent 2879efb commit ed63b40

File tree

1 file changed

+62
-104
lines changed

1 file changed

+62
-104
lines changed

‎components/ui/table.tsx

Lines changed: 62 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,72 @@
1-
import * as React from "react"
1+
import * as React from 'react';
22

3-
import { cn } from "@/lib/utils"
3+
import { cn } from '@/lib/utils';
44

5-
const Table = React.forwardRef<
6-
HTMLTableElement,
7-
React.HTMLAttributes<HTMLTableElement>
8-
>(({ className, ...props }, ref) => (
9-
<div className="w-full overflow-auto">
10-
<table
11-
ref={ref}
12-
className={cn("w-full caption-bottom text-sm", className)}
13-
{...props}
14-
/>
15-
</div>
16-
))
17-
Table.displayName = "Table"
5+
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
6+
({ className, ...props }, ref) => (
7+
<div className="w-full overflow-auto">
8+
<table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
9+
</div>
10+
),
11+
);
12+
Table.displayName = 'Table';
1813

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"
14+
const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
15+
({ className, ...props }, ref) => <thead ref={ref} className={cn('[&_tr]:border-b ', className)} {...props} />,
16+
);
17+
TableHeader.displayName = 'TableHeader';
2618

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"
19+
const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
20+
({ className, ...props }, ref) => (
21+
<tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
22+
),
23+
);
24+
TableBody.displayName = 'TableBody';
3825

39-
const TableFooter = React.forwardRef<
40-
HTMLTableSectionElement,
41-
React.HTMLAttributes<HTMLTableSectionElement>
42-
>(({ className, ...props }, ref) => (
43-
<tfoot
44-
ref={ref}
45-
className={cn("bg-primary font-medium text-primary-foreground", className)}
46-
{...props}
47-
/>
48-
))
49-
TableFooter.displayName = "TableFooter"
26+
const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
27+
({ className, ...props }, ref) => (
28+
<tfoot ref={ref} className={cn('bg-primary font-medium text-primary-foreground', className)} {...props} />
29+
),
30+
);
31+
TableFooter.displayName = 'TableFooter';
5032

51-
const TableRow = React.forwardRef<
52-
HTMLTableRowElement,
53-
React.HTMLAttributes<HTMLTableRowElement>
54-
>(({ className, ...props }, ref) => (
55-
<tr
56-
ref={ref}
57-
className={cn(
58-
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
59-
className
60-
)}
61-
{...props}
62-
/>
63-
))
64-
TableRow.displayName = "TableRow"
33+
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
34+
({ className, ...props }, ref) => (
35+
<tr
36+
ref={ref}
37+
className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
38+
{...props}
39+
/>
40+
),
41+
);
42+
TableRow.displayName = 'TableRow';
6543

66-
const TableHead = React.forwardRef<
67-
HTMLTableCellElement,
68-
React.ThHTMLAttributes<HTMLTableCellElement>
69-
>(({ className, ...props }, ref) => (
70-
<th
71-
ref={ref}
72-
className={cn(
73-
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
74-
className
75-
)}
76-
{...props}
77-
/>
78-
))
79-
TableHead.displayName = "TableHead"
44+
const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
45+
({ className, ...props }, ref) => (
46+
<th
47+
ref={ref}
48+
className={cn(
49+
'h-12 px-4 text-left align-middle font-medium text-muted-foreground dark:text-zinc-900 [&:has([role=checkbox])]:pr-0',
50+
className,
51+
)}
52+
{...props}
53+
/>
54+
),
55+
);
56+
TableHead.displayName = 'TableHead';
8057

81-
const TableCell = React.forwardRef<
82-
HTMLTableCellElement,
83-
React.TdHTMLAttributes<HTMLTableCellElement>
84-
>(({ className, ...props }, ref) => (
85-
<td
86-
ref={ref}
87-
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
88-
{...props}
89-
/>
90-
))
91-
TableCell.displayName = "TableCell"
58+
const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
59+
({ className, ...props }, ref) => (
60+
<td ref={ref} className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
61+
),
62+
);
63+
TableCell.displayName = 'TableCell';
9264

93-
const TableCaption = React.forwardRef<
94-
HTMLTableCaptionElement,
95-
React.HTMLAttributes<HTMLTableCaptionElement>
96-
>(({ className, ...props }, ref) => (
97-
<caption
98-
ref={ref}
99-
className={cn("mt-4 text-sm text-muted-foreground", className)}
100-
{...props}
101-
/>
102-
))
103-
TableCaption.displayName = "TableCaption"
65+
const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
66+
({ className, ...props }, ref) => (
67+
<caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
68+
),
69+
);
70+
TableCaption.displayName = 'TableCaption';
10471

105-
export {
106-
Table,
107-
TableHeader,
108-
TableBody,
109-
TableFooter,
110-
TableHead,
111-
TableRow,
112-
TableCell,
113-
TableCaption,
114-
}
72+
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

0 commit comments

Comments
 (0)