fix chain list that uses the wrong virtualized table

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.5.1] - 2024-10-17
+
+### Fixed
+
+- Fixed chain list that uses the wrong virtualized table
+
 ## [0.5.0] - 2024-10-14
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "raar",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "raar"
-version = "0.5.0"
+version = "0.5.1"
 description = "RaaR"
 authors = ["daoleno"]
 edition = "2021"

src/components/ChainList.tsx

@@ -1,4 +1,4 @@
-import { VirtualizedDataTable } from '@/components/VirtualizedDataTable'
+import { VirtualizedChainList } from '@/components/VirtualizedChainList'
 import { VirtualizedList } from '@/components/VirtualizedList'
 import { Input } from '@/components/ui/input'
 import { type Chain, chains } from '@/config/chains'
@@ -379,7 +379,7 @@ const ChainList: React.FC = () => {
         onChange={(e) => setSearchTerm(e.target.value)}
       />
       <div className="flex-grow overflow-hidden">
-        <VirtualizedDataTable columns={columns} data={filteredChains} />
+        <VirtualizedChainList columns={columns} data={filteredChains} />
       </div>
       <Toaster />
     </div>

src/components/VirtualizedChainList.tsx

@@ -0,0 +1,115 @@
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import * as React from 'react'
+
+interface VirtualizedChainListProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  className?: string
+}
+
+export function VirtualizedChainList<TData, TValue>({
+  columns,
+  data,
+  className,
+}: VirtualizedChainListProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  const { rows } = table.getRowModel()
+
+  const parentRef = React.useRef<HTMLDivElement>(null)
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: React.useCallback(() => 35, []),
+    overscan: 20, // Increased overscan for better performance
+  })
+
+  const virtualRows = virtualizer.getVirtualItems()
+
+  const totalSize = columns.reduce(
+    (acc, column) => acc + ((column as { size?: number }).size || 0),
+    0,
+  )
+
+  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0
+  const paddingBottom =
+    virtualRows.length > 0
+      ? virtualizer.getTotalSize() -
+        (virtualRows?.[virtualRows.length - 1]?.end || 0)
+      : 0
+
+  return (
+    <div ref={parentRef} className={`overflow-auto h-full ${className}`}>
+      <table
+        className="w-full border-collapse"
+        style={{ minWidth: `${totalSize}px` }}
+      >
+        <colgroup>
+          {columns.map((column, index) => (
+            <col
+              key={index}
+              style={{ width: (column as { size?: number }).size }}
+            />
+          ))}
+        </colgroup>
+        <thead className="sticky top-0 bg-background z-10">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id} className="border-b">
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className="h-10 px-2 text-left align-middle font-medium text-muted-foreground overflow-hidden text-ellipsis whitespace-nowrap"
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {paddingTop > 0 && (
+            <tr>
+              <td style={{ height: `${paddingTop}px` }} />
+            </tr>
+          )}
+          {virtualRows.map((virtualRow) => {
+            const row = rows[virtualRow.index]
+            return (
+              <tr key={row.id} className="even:bg-muted/50">
+                {row.getVisibleCells().map((cell) => (
+                  <td
+                    key={cell.id}
+                    className="p-2 align-middle overflow-hidden text-ellipsis whitespace-nowrap"
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            )
+          })}
+          {paddingBottom > 0 && (
+            <tr>
+              <td style={{ height: `${paddingBottom}px` }} />
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}