From f759cf62303b8abd01fd2bbbb7289fe6b574ffc0 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 8 Aug 2022 09:39:05 +0300
Subject: [PATCH] Introduce VirtualTable component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/table-list/table-list.tsx      |  5 +-
 .../components/table/virtual-table.tsx        | 55 +++++++++++++++++++
 2 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/components/table/virtual-table.tsx

diff --git a/src/renderer/components/table-list/table-list.tsx b/src/renderer/components/table-list/table-list.tsx
index b29ae973e4..8c867066b0 100644
--- a/src/renderer/components/table-list/table-list.tsx
+++ b/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} />
   )
 }
 
diff --git a/src/renderer/components/table/virtual-table.tsx b/src/renderer/components/table/virtual-table.tsx
new file mode 100644
index 0000000000..f216a63d05
--- /dev/null
+++ b/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>
+  )
+}
+ 
\ No newline at end of file