style: fix data table style

fluidity-money · Aug 16, 2024 · 7a2c0cf · 7a2c0cf
1 parent 098f0da
commit 7a2c0cf
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/web/src/app/_DataTable/DataTable.tsx b/web/src/app/_DataTable/DataTable.tsx
@@ -38,8 +38,14 @@ export function DataTable<TData, TValue>({
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id} className="border-b-0">
               {headerGroup.headers.map((header) => {
+                if (!header.column.columnDef.header) return null;
+                console.log("ASDSAD", (header.column.columnDef as any).colSpan);
                 return (
-                  <TableHead key={header.id} className="text-sm text-black">
+                  <TableHead
+                    key={header.id}
+                    className="text-sm text-black"
+                    colSpan={(header.column.columnDef as any).colSpan}
+                  >
                     {header.isPlaceholder
                       ? null
                       : flexRender(

diff --git a/web/src/app/_DataTable/columns.tsx b/web/src/app/_DataTable/columns.tsx
@@ -25,20 +25,39 @@ const AmountHeader = () => {
   );
 };
 
-export const columns: ColumnDef<Transaction>[] = [
+export const columns: (ColumnDef<Transaction> & { colSpan?: number })[] = [
   {
     accessorKey: "value",
     header: "Value",
     cell: ({ row }) => usdFormat(row.original.value),
   },
   {
-    id: "amount",
+    id: "amountFrom",
     header: () => <AmountHeader />,
+    colSpan: 3,
     cell: ({ row }) => {
       return (
         <div className="flex flex-row items-center gap-2">
           <Token />
-          {row.original.amountFrom} {"->"} <Token size="small" />
+          {row.original.amountFrom}
+        </div>
+      );
+    },
+  },
+  {
+    id: "amountIcon",
+    header: undefined,
+    cell: () => {
+      return <span>{"->"}</span>;
+    },
+  },
+  {
+    id: "amountTo",
+    header: undefined,
+    cell: ({ row }) => {
+      return (
+        <div className="flex flex-row items-center gap-2">
+          <Token size="small" />
           {row.original.amountTo}
         </div>
       );

diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-12 pr-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}