From c3c81529f6dc4f38c0c334c8ed3ea1f6dbfa2b80 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 4 Aug 2022 10:52:21 +0300
Subject: [PATCH] Initial sketch of new react table component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/list/table-theme.module.scss   |  45 ++++++
 .../components/table/react-table.module.scss  |  45 +-----
 src/renderer/components/table/react-table.tsx | 149 +++++++-----------
 3 files changed, 109 insertions(+), 130 deletions(-)
 create mode 100644 src/renderer/components/list/table-theme.module.scss

diff --git a/src/renderer/components/list/table-theme.module.scss b/src/renderer/components/list/table-theme.module.scss
new file mode 100644
index 0000000000..e6acc554cb
--- /dev/null
+++ b/src/renderer/components/list/table-theme.module.scss
@@ -0,0 +1,45 @@
+.tableTheme {
+  table {
+    border-spacing: 0;
+    border-top: thin solid var(--hrColor);
+  }
+  
+  thead {
+    border-bottom: thin solid var(--hrColor);
+    color: var(--textColorAccent);
+    padding-top: 7px;
+    height: 33px;
+  }
+  
+  thead tr {
+    margin: 0 var(--margin);
+  }
+  
+  tr {
+    margin: calc(var(--margin) * 1.6) var(--margin);
+  }
+  
+  th {
+    white-space: nowrap;
+    text-align: left;
+    padding: 0 var(--padding);
+    font-weight: 500;
+  }
+  
+  .headIcon {
+    font-weight: normal;
+    color: var(--textColorAccent);
+  }
+  
+  .disabledArrow {
+    opacity: 0.3;
+  }
+  
+  td {
+    padding: 0 var(--padding);
+  }
+  
+  .actions {
+    @apply justify-end;
+  }  
+}
diff --git a/src/renderer/components/table/react-table.module.scss b/src/renderer/components/table/react-table.module.scss
index a0059d6837..babd6fa393 100644
--- a/src/renderer/components/table/react-table.module.scss
+++ b/src/renderer/components/table/react-table.module.scss
@@ -1,44 +1,5 @@
-.table {
-  border-spacing: 0;
-  border-top: thin solid var(--hrColor);
-}
 
-.thead {
-  @apply overflow-hidden font-bold;
-  border-bottom: thin solid var(--hrColor);
-  color: var(--textColorAccent);
-  padding-top: 7px;
-  height: 33px;
-}
-
-.thead .tr {
-  margin: 0 var(--margin);
-}
-
-.tr {
-  @apply flex;
-  margin: calc(var(--margin) * 1.6) var(--margin);
-}
-
-.th {
-  @apply relative whitespace-nowrap;
-  padding: 0 var(--padding);
-}
-
-.headIcon {
-  font-weight: normal;
-  color: var(--textColorAccent);
-}
-
-.disabledArrow {
-  opacity: 0.3;
-}
-
-.td {
-  @apply flex items-center;
-  padding: 0 var(--padding);
-}
-
-.actions {
-  @apply justify-end;
+.sortableColumn {
+  cursor: pointer;
+  user-select: none;
 }
diff --git a/src/renderer/components/table/react-table.tsx b/src/renderer/components/table/react-table.tsx
index e1dcc59ab9..25f4610118 100644
--- a/src/renderer/components/table/react-table.tsx
+++ b/src/renderer/components/table/react-table.tsx
@@ -4,103 +4,76 @@
  */
 
 import styles from "./react-table.module.scss";
-import React, { useCallback, useMemo } from "react";
-import type { Row, UseTableOptions } from "react-table";
-import { useFlexLayout, useSortBy, useTable } from "react-table";
-import { Icon } from "../icon";
-import { cssNames } from "../../utils";
+import React from "react";
+import {
+  flexRender,
+  useReactTable,
+  getSortedRowModel,
+} from '@tanstack/react-table'
+import type { TableOptions, Table, SortingState } from "@tanstack/react-table";
 
-export interface ReactTableProps<Data extends object> extends UseTableOptions<Data> {
-  headless?: boolean;
+interface TableProps<T> extends TableOptions<T> {
+  className?: string;
 }
 
-export function ReactTable<Data extends object>({ columns, data, headless }: ReactTableProps<Data>) {
-  const defaultColumn = useMemo(
-    () => ({
-      minWidth: 20,
-      width: 100,
-    }),
-    [],
-  );
+export function Table<Data>({ columns, data, getCoreRowModel, className }: TableProps<Data>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
 
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    rows,
-    prepareRow,
-  } = useTable(
-    {
-      columns,
-      data,
-      defaultColumn,
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel,
+    state: {
+      sorting,
     },
-    useFlexLayout,
-    useSortBy,
-  );
-
-  const renderRow = useCallback(
-    (row: Row<Data>) => {
-      prepareRow(row);
-
-      return (
-        <div className={styles.tr} key={row.id}>
-          {row.cells.map((cell, index) => (
-            <div
-              {...cell.getCellProps()}
-              key={cell.getCellProps().key}
-              className={cssNames(styles.td, columns[index].accessor)}
-            >
-              {cell.render("Cell")}
-            </div>
-          ))}
-        </div>
-      );
-    },
-    [columns, prepareRow],
-  );
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+  });
 
   return (
-    <div {...getTableProps()} className={styles.table}>
-      {!headless && (
-        <div className={styles.thead}>
-          {headerGroups.map(headerGroup => (
-            <div
-              {...headerGroup.getHeaderGroupProps()}
-              key={headerGroup.getHeaderGroupProps().key}
-              className={styles.tr}
-            >
-              {headerGroup.headers.map(column => (
-                <div
-                  {...column.getHeaderProps(column.getSortByToggleProps())}
-                  key={column.getHeaderProps().key}
-                  className={styles.th}
-                >
-                  {column.render("Header")}
-                  {/* Sort direction indicator */}
-                  <span>
-                    {column.isSorted
-                      ? column.isSortedDesc
-                        ? <Icon material="arrow_drop_down" small/>
-                        : <Icon material="arrow_drop_up" small/>
-                      : !column.disableSortBy && (
-                        <Icon
-                          material="arrow_drop_down"
-                          small
-                          className={styles.disabledArrow}
-                        />
+    <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()
                       )}
-                  </span>
-                </div>
+                      {{
+                        asc: ' 🔼',
+                        desc: ' 🔽',
+                      }[header.column.getIsSorted() as string] ?? null}
+                    </div>
+                  )}
+                </th>
               ))}
-            </div>
+            </tr>
           ))}
-        </div>
-      )}
-
-      <div {...getTableBodyProps()}>
-        {rows.map(renderRow)}
-      </div>
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map(row => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map(cell => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
-  );
+  )
 }