Introduce VirtualTable component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/table-list/table-list.tsx

@@ -1,13 +1,12 @@
 import type { TableOptions, SortingState, Table as TableType } from "@tanstack/react-table";
 import { useReactTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table";
 import React, { HTMLProps, useMemo } from "react";
-import { Table } from "../table/react-table";
 import { createColumnHelper } from "@tanstack/react-table";
 import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import getRandomIdInjectable from "../../../common/utils/get-random-id.injectable";
-
+import { VirtualTable } from "../table/virtual-table";
 
 interface TableProps<T> extends TableOptions<T> {
   className?: string;
@@ -76,7 +75,7 @@ export function TableList<Data>({
   });
 
   return (
-    <Table table={table} className={className} />
+    <VirtualTable table={table} className={className} />
   )
 }
 

src/renderer/components/table/virtual-table.tsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+ import React from "react";
+ import { flexRender, Row } from '@tanstack/react-table'
+ import type { Table } from "@tanstack/react-table";
+ import { TableHeader } from "./table-header";
+ import { useVirtual } from 'react-virtual'
+ 
+ interface TableProps<T> {
+   table: Table<T>;
+   className?: string;
+ }
+ 
+ export function VirtualTable<Data>({ className, table }: TableProps<Data>) {
+  const tableContainerRef = React.useRef<HTMLDivElement>(null)
+  
+  const { rows } = table.getRowModel()
+  const rowVirtualizer = useVirtual({
+    parentRef: tableContainerRef,
+    size: rows.length,
+    overscan: 10,
+  })
+  const { virtualItems: virtualRows } = rowVirtualizer;
+
+  return (
+    <div className={className} ref={tableContainerRef}>
+      <table>
+        <TableHeader table={table}/>
+        <tbody>
+          {virtualRows.map(virtualRow => {
+            const row = rows[virtualRow.index] as Row<Data>
+            return (
+              <tr key={row.id}>
+                {row.getVisibleCells().map(cell => {
+                  return (
+                    <td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </td>
+                  )
+                })}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+