some more work on react-table

Signed-off-by: Sebastian Malton <sebastian@malton.name>

package.json

@@ -172,6 +172,7 @@
     "@hapi/call": "^8.0.0",
     "@hapi/subtext": "^7.0.3",
     "@kubernetes/client-node": "^0.12.0",
+    "@types/react-table": "^7.0.29",
     "abort-controller": "^3.0.0",
     "array-move": "^3.0.0",
     "await-lock": "^2.1.0",
@@ -213,6 +214,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
+    "react-table": "^7.7.0",
     "readable-stream": "^3.6.0",
     "request": "^2.88.2",
     "request-promise-native": "^1.0.8",

src/renderer/components/+cluster/cluster-issues.tsx

@@ -5,41 +5,41 @@ import { observer } from "mobx-react";
 import { computed } from "mobx";
 import { Icon } from "../icon";
 import { SubHeader } from "../layout/sub-header";
-import { Table, TableCell, TableHead, TableRow } from "../table";
 import { nodesStore } from "../+nodes/nodes.store";
 import { eventStore } from "../+events/event.store";
-import { autobind, cssNames, prevDefault } from "../../utils";
-import { ItemObject } from "../../item.store";
+import { cssNames } from "../../utils";
 import { Spinner } from "../spinner";
-import { ThemeStore } from "../../theme.store";
 import { lookupApiLink } from "../../api/kube-api";
-import { kubeSelectedUrlParam, showDetails } from "../kube-object";
+import { ReactiveTable } from "../reactive-table/reactive-table";
+import { Column } from "react-table";
 
 interface Props {
   className?: string;
 }
 
-interface IWarning extends ItemObject {
+interface IWarning {
   kind: string;
+  id: string;
+  name: string;
   message: string;
   selfLink: string;
   age: string | number;
   timeDiffFromNow: number;
 }
 
-enum sortBy {
-  type = "type",
-  object = "object",
-  age = "age",
-}
+// enum sortBy {
+//   type = "type",
+//   object = "object",
+//   age = "age",
+// }
 
 @observer
 export class ClusterIssues extends React.Component<Props> {
-  private sortCallbacks = {
-    [sortBy.type]: (warning: IWarning) => warning.kind,
-    [sortBy.object]: (warning: IWarning) => warning.getName(),
-    [sortBy.age]: (warning: IWarning) => warning.timeDiffFromNow,
-  };
+  // private sortCallbacks = {
+  //   [sortBy.type]: (warning: IWarning) => warning.kind,
+  //   [sortBy.object]: (warning: IWarning) => warning.getName(),
+  //   [sortBy.age]: (warning: IWarning) => warning.timeDiffFromNow,
+  // };
 
   @computed get warnings() {
     const warnings: IWarning[] = [];
@@ -51,8 +51,8 @@ export class ClusterIssues extends React.Component<Props> {
       node.getWarningConditions().forEach(({ message }) => {
         warnings.push({
           age: getAge(),
-          getId,
-          getName,
+          id: getId(),
+          name: getName(),
           timeDiffFromNow: getTimeDiffFromNow(),
           kind,
           message,
@@ -69,8 +69,8 @@ export class ClusterIssues extends React.Component<Props> {
       const { uid, name, kind } = involvedObject;
 
       warnings.push({
-        getId: () => uid,
-        getName: () => name,
+        id: uid,
+        name,
         timeDiffFromNow: getTimeDiffFromNow(),
         age: getAge(),
         message,
@@ -82,34 +82,57 @@ export class ClusterIssues extends React.Component<Props> {
     return warnings;
   }
 
-  @autobind()
-  getTableRow(uid: string) {
-    const { warnings } = this;
-    const warning = warnings.find(warn => warn.getId() == uid);
-    const { getId, getName, message, kind, selfLink, age } = warning;
-
-    return (
-      <TableRow
-        key={getId()}
-        sortItem={warning}
-        selected={selfLink === kubeSelectedUrlParam.get()}
-        onClick={prevDefault(() => showDetails(selfLink))}
-      >
-        <TableCell className="message">
-          {message}
-        </TableCell>
-        <TableCell className="object">
-          {getName()}
-        </TableCell>
-        <TableCell className="kind">
-          {kind}
-        </TableCell>
-        <TableCell className="age">
-          {age}
-        </TableCell>
-      </TableRow>
-    );
-  }
+  columns: Column<IWarning>[] = [
+    {
+      id: "message",
+      Header: "Message",
+      accessor: "message",
+    },
+    {
+      id: "name",
+      Header: "Object Name",
+      accessor: "name",
+    },
+    {
+      id: "kind",
+      Header: "Kind",
+      accessor: "kind",
+    },
+    {
+      id: "age",
+      Header: "Age",
+      accessor: "age",
+    },
+  ];
+
+  // @autobind()
+  // getTableRow(uid: string) {
+  //   const { warnings } = this;
+  //   const warning = warnings.find(warn => warn.getId() == uid);
+  //   const { getId, getName, message, kind, selfLink, age } = warning;
+
+  //   return (
+  //     <TableRow
+  //       key={getId()}
+  //       sortItem={warning}
+  //       selected={selfLink === kubeSelectedUrlParam.get()}
+  //       onClick={prevDefault(() => showDetails(selfLink))}
+  //     >
+  //       <TableCell className="message">
+  //         {message}
+  //       </TableCell>
+  //       <TableCell className="object">
+  //         {getName()}
+  //       </TableCell>
+  //       <TableCell className="kind">
+  //         {kind}
+  //       </TableCell>
+  //       <TableCell className="age">
+  //         {age}
+  //       </TableCell>
+  //     </TableRow>
+  //   );
+  // }
 
   renderContent() {
     const { warnings } = this;
@@ -136,7 +159,11 @@ export class ClusterIssues extends React.Component<Props> {
           <Icon material="error_outline"/>{" "}
           <>Warnings: {warnings.length}</>
         </SubHeader>
-        <Table
+        <ReactiveTable
+          columns={this.columns}
+          data={this.warnings}
+        />
+        {/* <Table
           tableId="cluster_issues"
           items={warnings}
           virtual
@@ -153,7 +180,7 @@ export class ClusterIssues extends React.Component<Props> {
             <TableCell className="kind" sortBy={sortBy.type}>Type</TableCell>
             <TableCell className="timestamp" sortBy={sortBy.age}>Age</TableCell>
           </TableHead>
-        </Table>
+        </Table> */}
       </>
     );
   }

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

+import React from "react";
+import { useTable, useBlockLayout, useResizeColumns, Column, HeaderGroup, UseResizeColumnsColumnProps } from "react-table";
+
+export interface TableProps<T extends object> {
+  columns: Column<T>[];
+  data: T[];
+}
+
+export function ReactiveTable<T extends object>({ columns, data }: TableProps<T>) {
+  const defaultColumn = React.useMemo(
+    () => ({
+      minWidth: 30,
+      width: 150,
+      maxWidth: 400,
+    }),
+    []
+  );
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state,
+  } = useTable<T>(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useBlockLayout,
+    useResizeColumns
+  );
+
+  return (
+    <>
+      <div>
+        <div {...getTableProps()} className="table">
+          <div>
+            {headerGroups.map(headerGroup => {
+              const { key, ...headerProps } = headerGroup.getHeaderGroupProps();
+
+              return (
+                <div key={key} {...headerProps} className="tr">
+                  {headerGroup.headers.map(c => {
+                    const column = c as HeaderGroup<T> & UseResizeColumnsColumnProps<T>; // needed until react table v8 is done
+                    const { key, ...columnProps } = column.getHeaderProps();
+
+                    return (
+                      <div key={key} {...columnProps} className="th">
+                        {column.render("Header")}
+                        <div
+                          {...column.getResizerProps()}
+                          className={`resizer ${column.isResizing ? "isResizing" : ""}`}
+                        />
+                      </div>
+                    );
+                  })}
+                </div>
+              );
+            })}
+          </div>
+
+          <div {...getTableBodyProps()}>
+            {rows.map(row => {
+              prepareRow(row);
+              const { key, ...rowProps } = row.getRowProps();
+
+              return (
+                <div key={key} {...rowProps} className="tr">
+                  {row.cells.map(cell => {
+                    const { key, ...cellProps } = cell.getCellProps();
+
+                    return (
+                      <div key={key} {...cellProps} className="td">
+                        {cell.render("Cell")}
+                      </div>
+                    );
+                  })}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <pre>
+        <code>{JSON.stringify(state, null, 2)}</code>
+      </pre>
+    </>
+  );
+}

yarn.lock

@@ -1618,6 +1618,13 @@
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"
+"@types/react-table@^7.0.29":
+  version "7.0.29"
+  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.0.29.tgz#af2c82f2d6a39be5bc0f191b30501309a8db0949"
+  integrity sha512-RCGVKGlTDv3jbj37WJ5HhN3sPb0W/2rqlvyGUtvawnnyrxgI2BGgASvU93rq2jwanVp5J9l1NYAeiGlNhdaBGw==
+  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"
@@ -11565,6 +11572,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"