From cf74fc03e88f6b361361ce70feb2edc298df16c0 Mon Sep 17 00:00:00 2001
From: Anurag Roy <anurag@2pirad.com>
Date: Mon, 12 Feb 2024 23:18:44 +0530
Subject: [PATCH] Move gradient to table cell instead of table row

---
 app/components/TableCard.tsx |  1 -
 app/components/ui/table.tsx  | 28 +++++++++++++---------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/app/components/TableCard.tsx b/app/components/TableCard.tsx
index dd95c87c..9255b2dc 100644
--- a/app/components/TableCard.tsx
+++ b/app/components/TableCard.tsx
@@ -54,7 +54,6 @@ export default function TableCard({
                         <TableRow
                             key={item[0]}
                             className="group [&_td]:last:rounded-b-md"
-                            width={barChartPercentages[key]}
                         >
                             <TableCell
                                 className="font-medium w-3/4"
diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
index 9dd2317e..3d158035 100644
--- a/app/components/ui/table.tsx
+++ b/app/components/ui/table.tsx
@@ -54,9 +54,7 @@ TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
     HTMLTableRowElement,
-    React.HTMLAttributes<HTMLTableRowElement> & {
-        width?: string;
-    }
+    React.HTMLAttributes<HTMLTableRowElement>
 >(({ className, ...props }, ref) => (
     <tr
         ref={ref}
@@ -64,13 +62,6 @@ const TableRow = React.forwardRef<
             "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
             className,
         )}
-        style={
-            props.width !== undefined
-                ? {
-                      background: `linear-gradient(90deg, #F7BA70 ${props.width}, transparent ${props.width})`,
-                  }
-                : {}
-        }
         {...props}
     />
 ));
@@ -93,14 +84,21 @@ TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
     HTMLTableCellElement,
-    React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+    React.TdHTMLAttributes<HTMLTableCellElement> & { width?: string }
+>(({ className, width, ...props }, ref) => (
     <td
         ref={ref}
         className={cn(
             "p-4 align-middle [&:has([role=checkbox])]:pr-0",
             className,
         )}
+        style={
+            width !== undefined
+                ? {
+                      background: `linear-gradient(90deg, #F7BA70 ${width}, transparent ${width})`,
+                  }
+                : {}
+        }
         {...props}
     />
 ));
@@ -120,11 +118,11 @@ TableCaption.displayName = "TableCaption";
 
 export {
     Table,
-    TableHeader,
     TableBody,
+    TableCaption,
+    TableCell,
     TableFooter,
     TableHead,
+    TableHeader,
     TableRow,
-    TableCell,
-    TableCaption,
 };