Initial sketch of new react table component

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

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

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

@@ -1,44 +1,5 @@
-.table {
-  border-spacing: 0;
-  border-top: thin solid var(--hrColor);
-}
 
-.thead {
+.sortableColumn {
-  @apply overflow-hidden font-bold;
+  cursor: pointer;
-  border-bottom: thin solid var(--hrColor);
+  user-select: none;
-  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;
 }

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 React from "react";
-import type { Row, UseTableOptions } from "react-table";
+import {
-import { useFlexLayout, useSortBy, useTable } from "react-table";
+  flexRender,
-import { Icon } from "../icon";
+  useReactTable,
-import { cssNames } from "../../utils";
+  getSortedRowModel,
+} from '@tanstack/react-table'
+import type { TableOptions, Table, SortingState } from "@tanstack/react-table";
 
-export interface ReactTableProps<Data extends object> extends UseTableOptions<Data> {
+interface TableProps<T> extends TableOptions<T> {
-  headless?: boolean;
+  className?: string;
 }
 
-export function ReactTable<Data extends object>({ columns, data, headless }: ReactTableProps<Data>) {
+export function Table<Data>({ columns, data, getCoreRowModel, className }: TableProps<Data>) {
-  const defaultColumn = useMemo(
+  const [sorting, setSorting] = React.useState<SortingState>([])
-    () => ({
-      minWidth: 20,
-      width: 100,
-    }),
-    [],
-  );
 
-  const {
+  const table = useReactTable({
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    rows,
-    prepareRow,
-  } = useTable(
-    {
-      columns,
     data,
-      defaultColumn,
+    columns,
+    getCoreRowModel,
+    state: {
+      sorting,
     },
-    useFlexLayout,
+    onSortingChange: setSorting,
-    useSortBy,
+    getSortedRowModel: getSortedRowModel(),
-  );
+  });
-
-  const renderRow = useCallback(
-    (row: Row<Data>) => {
-      prepareRow(row);
 
   return (
-        <div className={styles.tr} key={row.id}>
+    <div className={className}>
-          {row.cells.map((cell, index) => (
+      <table>
+        <thead>
+          {table.getHeaderGroups().map(headerGroup => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map(header => (
+                <th key={header.id}>
+                  {header.isPlaceholder ? null : (
                     <div
-              {...cell.getCellProps()}
+                      {...{
-              key={cell.getCellProps().key}
+                        className: header.column.getCanSort()
-              className={cssNames(styles.td, columns[index].accessor)}
+                          ? styles.sortableColumn
+                          : '',
+                        onClick: header.column.getToggleSortingHandler(),
+                      }}
                     >
-              {cell.render("Cell")}
+                      {flexRender(
-            </div>
+                        header.column.columnDef.header,
-          ))}
+                        header.getContext()
-        </div>
-      );
-    },
-    [columns, prepareRow],
-  );
-
-  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}
-                        />
                       )}
-                  </span>
+                      {{
-                </div>
+                        asc: ' 🔼',
-              ))}
+                        desc: ' 🔽',
-            </div>
+                      }[header.column.getIsSorted() as string] ?? null}
-          ))}
                     </div>
                   )}
-
+                </th>
-      <div {...getTableBodyProps()}>
+              ))}
-        {rows.map(renderRow)}
+            </tr>
+          ))}
+        </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>
-    </div>
+  )
-  );
 }