fixed up tables to use virtualized

apps/web-app/src/components/ui/DataTable/DataTable.tsx

@@ -11,6 +11,7 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { Fragment, useState } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
 
 interface DataTableProps<T> {
   data: T[];
@@ -19,6 +20,8 @@ interface DataTableProps<T> {
   className?: string;
   getRowCanExpand?: (row: Row<T>) => boolean;
   renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement;
+  onRowClick?: (row: T) => void;
+  height?: number;
 }
 
 export function DataTable<T>({
@@ -28,6 +31,8 @@ export function DataTable<T>({
   className = '',
   getRowCanExpand,
   renderSubComponent,
+  onRowClick,
+  height,
 }: DataTableProps<T>) {
   const [sorting, setSorting] = useState<SortingState>([]);
 
@@ -54,28 +59,87 @@ export function DataTable<T>({
     );
   }
 
+  const { rows } = table.getRowModel();
+
+  // For expanded rows, we need to create a flattened list
+  const flatRows = rows.reduce<Array<{ type: 'row' | 'expanded'; row: Row<T> }>>((acc, row) => {
+    acc.push({ type: 'row', row });
+    if (row.getIsExpanded() && renderSubComponent) {
+      acc.push({ type: 'expanded', row });
+    }
+    return acc;
+  }, []);
+
   return (
-    <div className={cn('border border-border rounded-lg overflow-auto', className)}>
+    <TableVirtuoso
-      <table className="w-full">
+      style={{ height: height ? `${height}px` : '100%' }}
-        <thead className="bg-surface border-b border-border">
+      className={cn('border border-border rounded-lg', className)}
-          {table.getHeaderGroups().map(headerGroup => (
+      totalCount={flatRows.length}
-            <tr key={headerGroup.id}>
+      components={{
+        Table: ({ style, ...props }) => (
+          <table
+            {...props}
+            style={{
+              ...style,
+              width: '100%',
+            }}
+            className="bg-background"
+          />
+        ),
+        TableRow: props => {
+          const index = props['data-index'] as number;
+          const item = flatRows[index];
+          
+          if (!item) return null;
+
+          if (item.type === 'expanded') {
+            return (
+              <tr {...props} className="bg-surface-secondary/50">
+                <td colSpan={item.row.getVisibleCells().length} className="p-0">
+                  {renderSubComponent?.({ row: item.row })}
+                </td>
+              </tr>
+            );
+          }
+
+          return (
+            <tr
+              {...props}
+              className="hover:bg-surface border-b border-border cursor-pointer"
+              onClick={() => onRowClick?.(item.row.original)}
+            >
+              {item.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>
+          );
+        },
+      }}
+      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="relative px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left"
+                className={cn(
+                  'relative px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left',
+                  header.column.getCanSort() && 'cursor-pointer select-none hover:text-text-primary'
+                )}
                 style={{ width: header.getSize() }}
+                onClick={header.column.getToggleSortingHandler()}
               >
                 {header.isPlaceholder ? null : (
                   <>
-                      <div
+                    <div className="flex items-center justify-between">
-                        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>
@@ -108,35 +172,8 @@ export function DataTable<T>({
               </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>
   );
 }

apps/web-app/src/features/exchanges/components/ExchangesTable.tsx

@@ -368,7 +368,6 @@ export function ExchangesTable() {
         data={exchanges || []}
         columns={columns}
         loading={loading}
-        className="max-h-[calc(100vh-300px)]"
         getRowCanExpand={() => true}
         renderSubComponent={renderSubComponent}
       />