Swap out table dep for already-installed Material

Replaces the ts-react-json-table dependency with material-ui, which is already installed and available.
crownheightsaid · Jul 18, 2020 · 2eb9153 · 2eb9153
1 parent ad309ea
commit 2eb9153
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/webapp/components/DeliveryTable.js b/src/webapp/components/DeliveryTable.js
@@ -1,32 +1,57 @@
 import React from "react";
-import JsonTable from "ts-react-json-table";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+  container: {
+    maxHeight: 440
+  }
+});
 
 const DeliveryTable = ({ rows }) => {
+  const classes = useStyles();
+
   return (
-    <JsonTable
-      rows={rows}
-      columns={[
-        "Code",
-        "Cross Street #1",
-        "Cross Street #2",
-        "First Name",
-        {
-          key: "slackPermalink",
-          label: "Slack Link",
-          cell(row) {
-            return (
-              <a
-                href={row.slackPermalink}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Slack
-              </a>
-            );
-          }
-        }
-      ]}
-    />
+    <TableContainer className={classes.container} component={Paper}>
+      <Table aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Code</TableCell>
+            <TableCell align="right">Cross Street #1</TableCell>
+            <TableCell align="right">Cross Street #2</TableCell>
+            <TableCell align="right">First Name</TableCell>
+            <TableCell align="right">Slack Link</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map(row => (
+            <TableRow key={row.Code}>
+              <TableCell component="th" scope="row">
+                {row.Code}
+              </TableCell>
+              <TableCell align="right">{row["Cross Street #1"]}</TableCell>
+              <TableCell align="right">{row["Cross Street #2"]}</TableCell>
+              <TableCell align="right">{row["First Name"]}</TableCell>
+              <TableCell align="right">
+                <a
+                  href={row.slackPermalink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Slack
+                </a>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 };