From 0629ff3123e2b652a219bb8e1e7ee5b529d8f3e5 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 23 Aug 2022 16:10:33 +0300
Subject: [PATCH] Make separate VirtualTableHeader

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/list/table-theme.module.scss  |  4 ++--
 src/renderer/components/table/table-header.tsx        |  7 ++++---
 .../components/table/virtual-table-header.module.scss | 11 +++++++++++
 .../components/table/virtual-table-header.tsx         |  9 +++++++++
 src/renderer/components/table/virtual-table.tsx       |  4 ++--
 5 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 src/renderer/components/table/virtual-table-header.module.scss
 create mode 100644 src/renderer/components/table/virtual-table-header.tsx

diff --git a/src/renderer/components/list/table-theme.module.scss b/src/renderer/components/list/table-theme.module.scss
index b9ad2f5120..673b75d46f 100644
--- a/src/renderer/components/list/table-theme.module.scss
+++ b/src/renderer/components/list/table-theme.module.scss
@@ -11,12 +11,12 @@
     border-bottom: thin solid var(--hrColor);
     color: var(--textColorAccent);
     height: 33px;
-    position: sticky;
+    // position: sticky;
     top: 0;
   }
   
   thead tr {
-    margin: 0 var(--margin);
+    // margin: 0 var(--margin);
   }
   
   tr {
diff --git a/src/renderer/components/table/table-header.tsx b/src/renderer/components/table/table-header.tsx
index f1e1990b49..309af91336 100644
--- a/src/renderer/components/table/table-header.tsx
+++ b/src/renderer/components/table/table-header.tsx
@@ -4,13 +4,14 @@ import type { Table } from "@tanstack/react-table";
 import { flexRender } from '@tanstack/react-table';
 import { cssNames } from "../../utils";
 
-interface TableHeaderProps<Data> {
+export interface TableHeaderProps<Data> {
   table: Table<Data>;
+  className?: string;
 }
 
-export function TableHeader<Data>({ table }: TableHeaderProps<Data>) {
+export function TableHeader<Data>({ table, className }: TableHeaderProps<Data>) {
   return (
-    <thead>
+    <thead className={className}>
       {table.getHeaderGroups().map(headerGroup => (
         <tr key={headerGroup.id}>
           {headerGroup.headers.map(header => (
diff --git a/src/renderer/components/table/virtual-table-header.module.scss b/src/renderer/components/table/virtual-table-header.module.scss
new file mode 100644
index 0000000000..590a421d27
--- /dev/null
+++ b/src/renderer/components/table/virtual-table-header.module.scss
@@ -0,0 +1,11 @@
+.header {
+  display: block;
+
+  tr {
+    display: flex;
+  }
+
+  th {
+    flex: 1 0;
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/components/table/virtual-table-header.tsx b/src/renderer/components/table/virtual-table-header.tsx
new file mode 100644
index 0000000000..21abaabfc8
--- /dev/null
+++ b/src/renderer/components/table/virtual-table-header.tsx
@@ -0,0 +1,9 @@
+import styles from "./virtual-table-header.module.scss";
+import React from "react";
+import { TableHeader, TableHeaderProps } from "./table-header";
+
+export function VirtualTableHeader<Data>(props: TableHeaderProps<Data>) {
+  return (
+    <TableHeader {...props} className={styles.header}/>
+  )
+}
\ No newline at end of file
diff --git a/src/renderer/components/table/virtual-table.tsx b/src/renderer/components/table/virtual-table.tsx
index 4da8687af4..bbd662c139 100644
--- a/src/renderer/components/table/virtual-table.tsx
+++ b/src/renderer/components/table/virtual-table.tsx
@@ -6,8 +6,8 @@
  import React from "react";
  import { flexRender, Row } from "@tanstack/react-table"
  import type { Table, Cell } from "@tanstack/react-table";
- import { TableHeader } from "./table-header";
  import { useVirtualizer } from "@tanstack/react-virtual";
+import { VirtualTableHeader } from "./virtual-table-header";
  
  interface TableProps<T> {
    table: Table<T>;
@@ -34,7 +34,7 @@
           width: '100%',
           position: 'relative',
         }}>
-          <TableHeader table={table}/>
+          <VirtualTableHeader table={table}/>
           <tbody>
             {rowVirtualizer.getVirtualItems().map(virtualRow => {
               const row = rows[virtualRow.index] as Row<Data>