Introducing react-table

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

package.json

@@ -280,6 +280,7 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-select": "^3.0.13",
+    "@types/react-table": "^7.7.0",
     "@types/react-window": "^1.8.2",
     "@types/readable-stream": "^2.3.9",
     "@types/request": "^2.48.5",
@@ -347,6 +348,7 @@
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
     "react-select-event": "^5.1.0",
+    "react-table": "^7.7.0",
     "react-window": "^1.8.5",
     "sass-loader": "^8.0.2",
     "sharp": "^0.26.1",

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

@@ -0,0 +1,38 @@
+.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);
+  height: 33px;
+}
+
+.tr:last-child {
+  border-bottom: thin solid var(--hrColor);
+}
+
+.th {
+  @apply relative whitespace-nowrap;
+  padding: var(--padding);
+}
+
+.headIcon {
+  font-weight: normal;
+  color: var(--textColorAccent);
+}
+
+.disabledArrow {
+  color: #909ba666;
+}
+
+.td {
+  @apply flex items-center;
+  padding: var(--padding);
+}
+
+.actions {
+  @apply justify-end;
+}

src/renderer/components/table/react-table.tsx

@@ -0,0 +1,94 @@
+import styles from "./react-table.module.css";
+import React from "react";
+import { useCallback, useMemo } from "react";
+import { useFlexLayout, useSortBy, useTable, UseTableOptions } from "react-table";
+import { FixedSizeList } from "react-window";
+import { cssNames } from "../../utils";
+
+interface Props extends UseTableOptions<any> {
+  virtual?: boolean;
+  headless?: boolean;
+}
+
+export function Table({ columns, data, virtual, headless }: Props) {
+  const defaultColumn = useMemo(
+    () => ({
+      minWidth: 20,
+      width: 100,
+    }),
+    []
+  );
+
+  // const scrollBarSize = React.useMemo(() => scrollbarWidth(), [])
+  const scrollBarSize = 10;
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    totalColumnsWidth,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useFlexLayout,
+    useSortBy,
+  );
+
+  const RenderRow = useCallback(
+    ({ index, style }) => {
+      const row = rows[index];
+
+      prepareRow(row);
+
+      return (
+        <div
+          {...row.getRowProps({
+            style,
+          })}
+          className="tr"
+        >
+          {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, rows]
+  );
+
+  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 key={column.getHeaderProps().key} className={styles.tr}>
+                {column.render("Header")}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>}
+
+      <div {...getTableBodyProps()}>
+        {virtual ? (
+          <FixedSizeList
+            height={400}
+            itemCount={rows.length}
+            itemSize={35}
+            width={totalColumnsWidth+scrollBarSize}
+          >
+            {RenderRow}
+          </FixedSizeList>
+        ) : rows.map((row, index) => RenderRow({index}))}
+      </div>
+    </div>
+  );
+}

yarn.lock

@@ -1633,6 +1633,13 @@
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"
 
+"@types/react-table@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.0.tgz#cb441a03af7303efd570b816b5ed0ea4d35ce705"
+  integrity sha512-xx2PJO9a0FEY7s96KWmadrhWNGxkNZgMnoKbXKPepqzz4FHKVds1tPDqWOU7NpP+dAsRli/wn0ysZ4MxWZI4Nw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@*", "@types/react-transition-group@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
@@ -12067,6 +12074,11 @@ react-select@^3.1.0:
     react-input-autosize "^2.2.2"
     react-transition-group "^4.3.0"
 
+react-table@^7.7.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912"
+  integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==
+
 react-transition-group@^4.3.0, react-transition-group@^4.4.0:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"