From 587fc0f228458b8c0a1537f5eea6d0f1ce31a320 Mon Sep 17 00:00:00 2001
From: Boki <boki@stare.gg>
Date: Wed, 18 Jun 2025 08:17:00 -0400
Subject: [PATCH] fixed up tables to use virtualized

---
 .../src/components/ui/DataTable/DataTable.tsx | 195 +++++++++++-------
 .../exchanges/components/ExchangesTable.tsx   |   1 -
 2 files changed, 116 insertions(+), 80 deletions(-)

diff --git a/apps/web-app/src/components/ui/DataTable/DataTable.tsx b/apps/web-app/src/components/ui/DataTable/DataTable.tsx
index 9aef247..6e91197 100644
--- a/apps/web-app/src/components/ui/DataTable/DataTable.tsx
+++ b/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,89 +59,121 @@ 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)}>
-      <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() }}
+    <TableVirtuoso
+      style={{ height: height ? `${height}px` : '100%' }}
+      className={cn('border border-border rounded-lg', className)}
+      totalCount={flatRows.length}
+      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() }}
                 >
-                  {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>
-                      {/* 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>
+                  <div className="truncate">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </div>
+                </td>
               ))}
             </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())}
+          );
+        },
+      }}
+      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(
+                  '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 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" />
+                          )}
+                        </div>
+                      )}
                     </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>
+                    {/* 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>
+        ))
+      }
+    />
   );
 }
\ 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 3ea3245..1380f79 100644
--- a/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
+++ b/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}
       />