From 7f4a70309cd1b00a561f700492fae0706038579d Mon Sep 17 00:00:00 2001
From: Boki <boki@stare.gg>
Date: Wed, 18 Jun 2025 07:54:42 -0400
Subject: [PATCH] improved datatable

---
 .../src/components/ui/DataTable/DataTable.tsx | 181 +++++++++---------
 .../exchanges/components/ExchangesTable.tsx   | 131 +++++--------
 2 files changed, 137 insertions(+), 175 deletions(-)

diff --git a/apps/web-app/src/components/ui/DataTable/DataTable.tsx b/apps/web-app/src/components/ui/DataTable/DataTable.tsx
index 288f3a2..9aef247 100644
--- a/apps/web-app/src/components/ui/DataTable/DataTable.tsx
+++ b/apps/web-app/src/components/ui/DataTable/DataTable.tsx
@@ -4,29 +4,30 @@ import {
   ColumnDef,
   flexRender,
   getCoreRowModel,
+  getExpandedRowModel,
   getSortedRowModel,
+  Row,
   SortingState,
   useReactTable,
 } from '@tanstack/react-table';
-import { useState } from 'react';
-import { TableVirtuoso } from 'react-virtuoso';
+import { Fragment, useState } from 'react';
 
 interface DataTableProps<T> {
   data: T[];
   columns: ColumnDef<T>[];
-  height?: number;
   loading?: boolean;
-  onRowClick?: (row: T) => void;
   className?: string;
+  getRowCanExpand?: (row: Row<T>) => boolean;
+  renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement;
 }
 
 export function DataTable<T>({
   data,
   columns,
-  height,
   loading = false,
-  onRowClick,
   className = '',
+  getRowCanExpand,
+  renderSubComponent,
 }: DataTableProps<T>) {
   const [sorting, setSorting] = useState<SortingState>([]);
 
@@ -39,11 +40,12 @@ export function DataTable<T>({
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    enableSorting: true,
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand,
+    enableColumnResizing: true,
+    columnResizeMode: 'onChange',
   });
 
-  const { rows } = table.getRowModel();
-
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64 bg-background border border-border rounded-lg">
@@ -53,87 +55,88 @@ export function DataTable<T>({
   }
 
   return (
-    <TableVirtuoso
-      style={height ? { height: `${height}px` } : { height: '100%' }}
-      className={cn('border border-border rounded-lg', className)}
-      totalCount={rows.length}
-      components={{
-        Table: ({ style, ...props }) => (
-          <table
-            {...props}
-            {...{
-              style: {
-                ...style,
-                width: table.getCenterTotalSize(),
-                minWidth: '100%',
-              },
-            }}
-            className="bg-background"
-          />
-        ),
-        TableRow: props => {
-          const index = props['data-index'] as number;
-          const row = rows[index];
-
-          return (
-            <tr
-              {...props}
-              className="hover:bg-surface cursor-pointer border-b border-border"
-              onClick={() => onRowClick?.(row.original)}
-            >
-              {row.getVisibleCells().map(cell => (
-                <td
-                  key={cell.id}
-                  className="px-3 py-2 text-sm text-text-primary border-r border-border"
-                  style={{ width: cell.column.getSize() }}
+    <div className={cn('border border-border rounded-lg overflow-auto', className)}>
+      <table className="w-full">
+        <thead className="bg-surface border-b border-border">
+          {table.getHeaderGroups().map(headerGroup => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map(header => (
+                <th
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  className="relative px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left"
+                  style={{ width: header.getSize() }}
                 >
-                  <div className="truncate">
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </div>
-                </td>
-              ))}
-            </tr>
-          );
-        },
-      }}
-      fixedHeaderContent={() =>
-        table.getHeaderGroups().map(headerGroup => (
-          <tr key={headerGroup.id} className="bg-surface border-b border-border">
-            {headerGroup.headers.map(header => (
-              <th
-                key={header.id}
-                colSpan={header.colSpan}
-                className={cn(
-                  'px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left border-r border-border',
-                  header.column.getCanSort() &&
-                    'cursor-pointer select-none hover:bg-surface-secondary'
-                )}
-                style={{ width: header.getSize() }}
-                onClick={header.column.getToggleSortingHandler()}
-              >
-                {header.isPlaceholder ? null : (
-                  <div className="flex items-center justify-between">
-                    <span className="truncate">
-                      {flexRender(header.column.columnDef.header, header.getContext())}
-                    </span>
-                    {header.column.getCanSort() && (
-                      <div className="ml-2 flex-shrink-0">
-                        {header.column.getIsSorted() === 'asc' ? (
-                          <ChevronUpIcon className="h-4 w-4 text-primary-400" />
-                        ) : header.column.getIsSorted() === 'desc' ? (
-                          <ChevronDownIcon className="h-4 w-4 text-primary-400" />
-                        ) : (
-                          <div className="h-4 w-4" />
+                  {header.isPlaceholder ? null : (
+                    <>
+                      <div
+                        className={cn(
+                          'flex items-center justify-between',
+                          header.column.getCanSort() && 'cursor-pointer select-none hover:text-text-primary'
+                        )}
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        <span className="truncate">
+                          {flexRender(header.column.columnDef.header, header.getContext())}
+                        </span>
+                        {header.column.getCanSort() && (
+                          <div className="ml-2 flex-shrink-0">
+                            {header.column.getIsSorted() === 'asc' ? (
+                              <ChevronUpIcon className="h-4 w-4 text-primary-400" />
+                            ) : header.column.getIsSorted() === 'desc' ? (
+                              <ChevronDownIcon className="h-4 w-4 text-primary-400" />
+                            ) : (
+                              <div className="h-4 w-4" />
+                            )}
+                          </div>
                         )}
                       </div>
-                    )}
-                  </div>
-                )}
-              </th>
-            ))}
-          </tr>
-        ))
-      }
-    />
+                      {/* Column resizer */}
+                      {header.column.getCanResize() && (
+                        <div
+                          onMouseDown={header.getResizeHandler()}
+                          onTouchStart={header.getResizeHandler()}
+                          className={cn(
+                            'absolute right-0 top-0 h-full w-1 cursor-col-resize user-select-none touch-none',
+                            'hover:bg-primary-500 hover:opacity-100',
+                            header.column.getIsResizing() ? 'bg-primary-500 opacity-100' : 'bg-border opacity-0'
+                          )}
+                        />
+                      )}
+                    </>
+                  )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map(row => (
+            <Fragment key={row.id}>
+              <tr className="hover:bg-surface border-b border-border">
+                {row.getVisibleCells().map(cell => (
+                  <td
+                    key={cell.id}
+                    className="px-3 py-2 text-sm text-text-primary"
+                    style={{ width: cell.column.getSize() }}
+                  >
+                    <div className="truncate">
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </div>
+                  </td>
+                ))}
+              </tr>
+              {row.getIsExpanded() && renderSubComponent && (
+                <tr className="bg-surface-secondary/50">
+                  <td colSpan={row.getVisibleCells().length} className="p-0">
+                    {renderSubComponent({ row })}
+                  </td>
+                </tr>
+              )}
+            </Fragment>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx b/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
index f19cdec..3ea3245 100644
--- a/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
+++ b/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
@@ -13,20 +13,17 @@ export function ExchangesTable() {
     error, 
     updateExchange, 
     fetchExchangeDetails,
-    fetchProviderMappings,
     updateProviderMapping,
     createProviderMapping,
     refetch 
   } = useExchanges();
 
-  console.log('ExchangesTable render:', { exchanges, loading, error });
   const [editingCell, setEditingCell] = useState<{ id: string; field: string } | null>(null);
   const [editValue, setEditValue] = useState('');
   const [addProviderDialog, setAddProviderDialog] = useState<{
     exchangeId: string;
     exchangeName: string;
   } | null>(null);
-  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
   const [expandedRowData, setExpandedRowData] = useState<Record<string, ProviderMapping[]>>({});
 
   const handleCellEdit = useCallback(
@@ -61,59 +58,50 @@ export function ExchangesTable() {
     [updateProviderMapping, refetch]
   );
 
-  const handleToggleExpandRow = useCallback(async (rowId: string) => {
-    setExpandedRows(prev => {
-      const next = new Set(prev);
-      if (next.has(rowId)) {
-        next.delete(rowId);
-      } else {
-        next.add(rowId);
-        // Load provider mappings for this exchange
-        if (!expandedRowData[rowId]) {
-          fetchExchangeDetails(rowId).then(details => {
-            if (details) {
-              setExpandedRowData(prev => ({
-                ...prev,
-                [rowId]: details.provider_mappings
-              }));
-            }
-          });
+  const handleRowExpand = useCallback(
+    async (row: any) => {
+      const exchangeId = row.original.id;
+      if (!expandedRowData[exchangeId]) {
+        const details = await fetchExchangeDetails(exchangeId);
+        if (details) {
+          setExpandedRowData(prev => ({
+            ...prev,
+            [exchangeId]: details.provider_mappings
+          }));
         }
       }
-      return next;
-    });
-  }, [fetchExchangeDetails, expandedRowData]);
+    },
+    [fetchExchangeDetails]
+  );
 
   const columns = useMemo<ColumnDef<Exchange>[]>(() => {
     return [
       {
-        id: 'expand',
+        id: 'expander',
         header: '',
-        size: 30,
-        enableResizing: false,
         cell: ({ row }) => {
-          const isExpanded = expandedRows.has(row.original.id);
-          return (
+          return row.getCanExpand() ? (
             <button
-              onClick={() => handleToggleExpandRow(row.original.id)}
-              className="text-text-secondary hover:text-text-primary transition-colors"
+              onClick={() => {
+                row.getToggleExpandedHandler()();
+                handleRowExpand(row);
+              }}
+              className="text-text-secondary hover:text-text-primary transition-colors w-6 h-6 flex items-center justify-center"
             >
-              {isExpanded ? '▼' : '▶'}
+              {row.getIsExpanded() ? '▼' : '▶'}
             </button>
-          );
+          ) : null;
         },
+        size: 40,
+        enableResizing: false,
       },
       {
         id: 'id',
         header: 'ID',
         accessorKey: 'id',
-        size: 50,
-        enableResizing: false,
-        cell: ({ getValue, cell }) => (
-          <span
-            className="font-mono text-primary-400 text-xs"
-            style={{ width: cell.column.getSize() }}
-          >
+        size: 80,
+        cell: ({ getValue }) => (
+          <span className="font-mono text-primary-400 text-xs">
             {getValue() as string}
           </span>
         ),
@@ -122,13 +110,9 @@ export function ExchangesTable() {
         id: 'code',
         header: 'Code',
         accessorKey: 'code',
-        size: 80,
-        enableResizing: false,
-        cell: ({ getValue, cell }) => (
-          <span
-            className="font-mono text-text-primary text-sm font-medium"
-            style={{ width: cell.column.getSize() }}
-          >
+        size: 100,
+        cell: ({ getValue }) => (
+          <span className="font-mono text-text-primary text-sm font-medium">
             {getValue() as string}
           </span>
         ),
@@ -137,9 +121,7 @@ export function ExchangesTable() {
         id: 'name',
         header: 'Name',
         accessorKey: 'name',
-        size: 200,
-        maxSize: 300,
-        enableResizing: true,
+        size: 250,
         cell: ({ getValue, row, cell }) => {
           const isEditing =
             editingCell?.id === row.original.id && editingCell?.field === 'name';
@@ -184,7 +166,6 @@ export function ExchangesTable() {
         header: 'Country',
         accessorKey: 'country',
         size: 80,
-        maxSize: 80,
         cell: ({ getValue }) => (
           <span className="text-text-secondary text-sm">{getValue() as string}</span>
         ),
@@ -193,7 +174,7 @@ export function ExchangesTable() {
         id: 'currency',
         header: 'Currency',
         accessorKey: 'currency',
-        size: 70,
+        size: 80,
         cell: ({ getValue, cell }) => (
           <span
             className="font-mono text-text-secondary text-sm"
@@ -208,7 +189,6 @@ export function ExchangesTable() {
         header: 'Active',
         accessorKey: 'active',
         size: 80,
-        maxSize: 80,
         cell: ({ getValue, row, cell }) => {
           const isActive = getValue() as boolean;
           return (
@@ -231,7 +211,7 @@ export function ExchangesTable() {
         id: 'provider_mappings',
         header: 'Provider Mappings',
         accessorKey: 'provider_mapping_count',
-        size: 150,
+        size: 180,
         cell: ({ getValue, row }) => {
           const totalMappings = parseInt(getValue() as string) || 0;
           const activeMappings = parseInt(row.original.active_mapping_count) || 0;
@@ -265,7 +245,7 @@ export function ExchangesTable() {
       {
         id: 'actions',
         header: 'Actions',
-        size: 100,
+        size: 120,
         cell: ({ row }) => (
           <button
             onClick={() => handleAddProviderMapping(row.original.id, row.original.name)}
@@ -282,7 +262,6 @@ export function ExchangesTable() {
         header: 'Last Updated',
         accessorKey: 'updated_at',
         size: 120,
-        maxSize: 120,
         cell: ({ getValue }) => (
           <span className="text-xs text-text-muted">
             {new Date(getValue() as string).toLocaleDateString()}
@@ -293,11 +272,10 @@ export function ExchangesTable() {
   }, [
     editingCell,
     editValue,
-    expandedRows,
     handleCellEdit,
     handleToggleActive,
     handleAddProviderMapping,
-    handleToggleExpandRow,
+    handleRowExpand,
   ]);
 
   if (error) {
@@ -312,7 +290,8 @@ export function ExchangesTable() {
     );
   }
 
-  const renderExpandedRow = (exchange: Exchange) => {
+  const renderSubComponent = ({ row }: { row: any }) => {
+    const exchange = row.original as Exchange;
     const mappings = expandedRowData[exchange.id] || [];
     
     if (mappings.length === 0) {
@@ -383,36 +362,16 @@ export function ExchangesTable() {
     );
   };
 
-  console.log('About to render DataTable with:', {
-    dataLength: (exchanges || []).length,
-    columnsLength: columns.length,
-    loading,
-    error
-  });
-
   return (
     <>
-      <div className="space-y-0">
-        <DataTable
-          data={exchanges || []}
-          columns={columns}
-          loading={loading}
-          height={600}
-          className="rounded-lg border border-border"
-        />
-        
-        {/* Expanded rows */}
-        {Array.from(expandedRows).map(exchangeId => {
-          const exchange = exchanges?.find(e => e.id === exchangeId);
-          if (!exchange) return null;
-          
-          return (
-            <div key={`expanded-${exchangeId}`} className="border-l border-r border-b border-border rounded-b-lg -mt-1">
-              {renderExpandedRow(exchange)}
-            </div>
-          );
-        })}
-      </div>
+      <DataTable
+        data={exchanges || []}
+        columns={columns}
+        loading={loading}
+        className="max-h-[calc(100vh-300px)]"
+        getRowCanExpand={() => true}
+        renderSubComponent={renderSubComponent}
+      />
 
       {addProviderDialog && (
         <AddProviderMappingDialog