Move gradient to table cell instead of table row

benvinegar · Feb 15, 2024 · cf74fc0 · cf74fc0
1 parent 64fb75a
commit cf74fc0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git 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
@@ -54,23 +54,14 @@ TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
     HTMLTableRowElement,
-    React.HTMLAttributes<HTMLTableRowElement> & {
-        width?: string;
-    }
+    React.HTMLAttributes<HTMLTableRowElement>
 >(({ className, ...props }, ref) => (
     <tr
         ref={ref}
         className={cn(
             "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,
 };