Move TableHeader to its own component

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

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>
+        <TableHeader table={table}/>
-          {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>
         <tbody>
           {table.getRowModel().rows.map(row => (
             <tr key={row.id}>

src/renderer/components/table/table-header.module.scss

@@ -1,4 +1,3 @@
-
 .sortableColumn {
   cursor: pointer;
   user-select: none;

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>
+  )
+}