From 3df4c306e5046dc76d90aad98d68d37b0db1d369 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 8 Aug 2022 09:38:35 +0300
Subject: [PATCH] Move TableHeader to its own component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/table/react-table.tsx | 32 +-------------
 ...e.module.scss => table-header.module.scss} |  3 +-
 .../components/table/table-header.tsx         | 42 +++++++++++++++++++
 3 files changed, 45 insertions(+), 32 deletions(-)
 rename src/renderer/components/table/{react-table.module.scss => table-header.module.scss} (95%)
 create mode 100644 src/renderer/components/table/table-header.tsx

diff --git a/src/renderer/components/table/react-table.tsx b/src/renderer/components/table/react-table.tsx
index 7d3320e0cb..8245c227f9 100644
--- a/src/renderer/components/table/react-table.tsx
+++ b/src/renderer/components/table/react-table.tsx
@@ -3,10 +3,10 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import styles from "./react-table.module.scss";
 import React from "react";
 import { flexRender } from '@tanstack/react-table'
 import type { Table } from "@tanstack/react-table";
+import { TableHeader } from "./table-header";
 
 interface TableProps<T> {
   table: Table<T>;
@@ -17,35 +17,7 @@ export function Table<Data>({ className, table }: TableProps<Data>) {
   return (
     <div className={className}>
       <table>
-        <thead>
-          {table.getHeaderGroups().map(headerGroup => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => (
-                <th key={header.id}>
-                  {header.isPlaceholder ? null : (
-                    <div
-                      {...{
-                        className: header.column.getCanSort()
-                          ? styles.sortableColumn
-                          : '',
-                        onClick: header.column.getToggleSortingHandler(),
-                      }}
-                    >
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                      {{
-                        asc: ' 🔼',
-                        desc: ' 🔽',
-                      }[header.column.getIsSorted() as string] ?? null}
-                    </div>
-                  )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
+        <TableHeader table={table}/>
         <tbody>
           {table.getRowModel().rows.map(row => (
             <tr key={row.id}>
diff --git a/src/renderer/components/table/react-table.module.scss b/src/renderer/components/table/table-header.module.scss
similarity index 95%
rename from src/renderer/components/table/react-table.module.scss
rename to src/renderer/components/table/table-header.module.scss
index babd6fa393..7e4950f879 100644
--- a/src/renderer/components/table/react-table.module.scss
+++ b/src/renderer/components/table/table-header.module.scss
@@ -1,5 +1,4 @@
-
 .sortableColumn {
   cursor: pointer;
   user-select: none;
-}
+}
\ No newline at end of file
diff --git a/src/renderer/components/table/table-header.tsx b/src/renderer/components/table/table-header.tsx
new file mode 100644
index 0000000000..b06e705282
--- /dev/null
+++ b/src/renderer/components/table/table-header.tsx
@@ -0,0 +1,42 @@
+import styles from "./table-header.module.scss";
+import React from "react";
+import type { Table } from "@tanstack/react-table";
+import { flexRender } from '@tanstack/react-table';
+
+interface TableHeaderProps<Data> {
+  table: Table<Data>;
+}
+
+export function TableHeader<Data>({ table }: TableHeaderProps<Data>) {
+  return (
+    <thead>
+      {table.getHeaderGroups().map(headerGroup => (
+        <tr key={headerGroup.id}>
+          {headerGroup.headers.map(header => (
+            <th key={header.id}>
+              {header.isPlaceholder ? null : (
+                <div
+                  {...{
+                    className: header.column.getCanSort()
+                      ? styles.sortableColumn
+                      : '',
+                    onClick: header.column.getToggleSortingHandler(),
+                  }}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                  {{
+                    asc: ' 🔼',
+                    desc: ' 🔽',
+                  }[header.column.getIsSorted() as string] ?? null}
+                </div>
+              )}
+            </th>
+          ))}
+        </tr>
+      ))}
+    </thead>
+  )
+}