From 9add00cf5cc1774c32a15bf3348383b642308b25 Mon Sep 17 00:00:00 2001
From: dekzter <kappa118@gmail.com>
Date: Sun, 9 Mar 2025 09:31:49 -0400
Subject: [PATCH] built back in virtualized tables, just with a top limit of
 10k for now

---
 .../src/components/tables/StreamsTable.js     | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/tables/StreamsTable.js b/frontend/src/components/tables/StreamsTable.js
index 88a9393b..febb459a 100644
--- a/frontend/src/components/tables/StreamsTable.js
+++ b/frontend/src/components/tables/StreamsTable.js
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useCallback, useState } from 'react';
+import { useEffect, useMemo, useCallback, useState, useRef } from 'react';
 import {
   MaterialReactTable,
   useMaterialReactTable,
@@ -72,9 +72,9 @@ const StreamsTable = ({}) => {
 
   const isMoreActionsOpen = Boolean(moreActionsAnchorEl);
 
-  /**
-   * useMemos
-   */
+  // Access the row virtualizer instance (optional)
+  const rowVirtualizerInstanceRef = useRef(null);
+
   /**
    * useMemo
    */
@@ -361,6 +361,9 @@ const StreamsTable = ({}) => {
     data,
     enablePagination: true,
     manualPagination: true,
+    enableRowVirtualization: true,
+    rowVirtualizerInstanceRef,
+    rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
     manualSorting: true,
     enableBottomToolbar: true,
     enableStickyHeader: true,
@@ -441,7 +444,7 @@ const StreamsTable = ({}) => {
     ),
     muiPaginationProps: {
       size: 'small',
-      rowsPerPageOptions: [25, 50, 100, 250, 500],
+      rowsPerPageOptions: [25, 50, 100, 250, 500, 1000, 10000],
       labelRowsPerPage: 'Rows per page',
     },
     muiTableContainerProps: {
@@ -523,6 +526,15 @@ const StreamsTable = ({}) => {
     }
   }, []);
 
+  useEffect(() => {
+    // Scroll to the top of the table when sorting changes
+    try {
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [sorting]);
+
   return (
     <Box>
       <MaterialReactTable table={table} />