FEAT: add headless react table

bisohns · Nov 7, 2022 · 9110b13 · 9110b13
1 parent 6cce782
commit 9110b13
Show file tree

Hide file tree

Showing 15 changed files with 605 additions and 6 deletions.
diff --git a/web/package.json b/web/package.json
@@ -14,10 +14,13 @@
     "@types/node": "^16.18.3",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
+    "@types/react-table": "^7.7.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "react-table": "^7.8.0",
+    "react-table-sticky": "^1.1.3",
     "react-use-websocket": "^4.2.0",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"

diff --git a/web/public/index.html b/web/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Saido</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/web/src/AppHeader.tsx b/web/src/AppHeader.tsx
@@ -6,7 +6,6 @@ import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import InputBase from "@mui/material/InputBase";
 import SearchIcon from "@mui/icons-material/Search";
-import { Link } from "react-router-dom";
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",

diff --git a/web/src/ThemeConfig.tsx b/web/src/ThemeConfig.tsx
@@ -18,6 +18,7 @@ export const theme: any = customizeComponents({
     },
     secondary: {
       light: "#74CAFF",
+      // main: "#1890FF",
       main: "#1890FF",
       dark: "#0C53B7",
       contrastText: "#FFFFFF",

diff --git a/web/src/common/DynamicTable.tsx b/web/src/common/DynamicTable.tsx
@@ -0,0 +1,37 @@
+import StandardTable from "./StandardTable";
+
+/**
+ * @template {'auto' | 'grid' | 'standard' | 'tree'} V
+ * @param {DynamicTableProps<V>} props
+ */
+function DynamicTable(props: {
+  view: "auto" | "grid" | "standard" | "tree";
+  instance: any;
+}) {
+  const { view } = props;
+
+  if (!props.instance) return null;
+
+  if (view === "grid") {
+    return;
+  }
+
+  if (view === "tree") {
+    return null;
+  }
+
+  return <StandardTable {...props} />;
+}
+
+DynamicTable.defaultProps = {
+  view: "standard",
+};
+
+export default DynamicTable;
+
+/**
+ * @template V
+ * @typedef {{
+ *  view: V
+ * } & (V extends 'grid' ? import("./GridTable").GridTableProps : V extends 'tree' ? {} : import("./StandardTable").StandardTableProps)} DynamicTableProps<V>
+ */
diff --git a/web/src/common/LoadingContent.tsx b/web/src/common/LoadingContent.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useEffect } from "react";
+import { ReactNode, useEffect } from "react";
 import useDataRef from "hooks/useDataRef";
 import LoadingIndicator from "./LoadingIndicator";
 import ErrorContent from "common/ErrorContent";

diff --git a/web/src/common/StandardTable.css b/web/src/common/StandardTable.css
@@ -0,0 +1,81 @@
+/* .StandardTable [data-sticky-td] {
+    position: sticky;
+  } */
+
+.StandardTable {
+  max-height: calc(100vh - 280px);
+  overflow: auto;
+  position: relative;
+  width: 100%;
+  background-color: inherit;
+}
+
+.StandardTable__row {
+  @apply border-b border-solid border-gray-200;
+  /* width: 100%; */
+}
+
+.StandardTable__row:last-child {
+  border-bottom: 0;
+}
+
+.StandardTable__row:last-child .StandardTable__cell {
+  /* border-bottom: 0; */
+}
+
+.StandardTable__cell {
+  @apply px-2 py-2 overflow-hidden flex items-center;
+  /* border-bottom: 1px solid theme("colors.primary.main"); */
+  min-width: 0;
+}
+
+.StandardTable__cell:first-child {
+  @apply pl-4;
+}
+
+.StandardTable__cell:last-child {
+  @apply pr-4;
+}
+
+[data-sticky-td] {
+  /* @apply bg-primary-shade4; */
+}
+
+.StandardTable__header {
+  @apply rounded-xl font-bold;
+  position: sticky;
+  top: 0;
+  z-index: 4;
+}
+
+.StandardTable__header__row {
+  @apply bg-secondary-light text-secondary-contrastText h-12;
+}
+
+.StandardTable__header__row__cell {
+}
+
+.StandardTable__body {
+}
+
+.StandardTable__body__row {
+}
+
+.StandardTable__body__row__cell {
+}
+
+.StandardTable__pagination {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 4;
+  display: flex;
+  justify-content: flex-end;
+  background-color: inherit;
+}
+
+.StandardTable__pagination__item {
+  background-color: inherit;
+  /* border-top: 1px solid theme("colors.secondary.main"); */
+}