Add first version of the new Table component

electron-react/src/components/table/Readme.md

@@ -0,0 +1,23 @@
+Single-Row Table:
+
+```jsx
+<Table 
+  header={["Total Chia Farmed", "XCH Farming Rewards", "XCH Feed Collected", "Last Height Farmed"]}
+  data={[10, 5120, "31.20", 2029]}
+/>
+```
+
+Multi-Row Table:
+
+```jsx
+<Table 
+  header={["Challenge Hash", "Height", "Number of Proofs", "Best Estimate"]}
+  data={[
+    ["Oxa6582dba...", 2029, 0, "309536343 seconds"],
+    ["Oxa6582dba...", 2029, 0, ""],
+    ["Oxa6582dba...", 2029, 0, ""],
+    ["Oxa6582dba...", 2029, 0, ""],
+    ["Oxa6582dba...", 2029, 0, ""],
+  ]}
+/>
+```

electron-react/src/components/table/Table.js

@@ -0,0 +1,94 @@
+import React from "react";
+import { withStyles, makeStyles } from "@material-ui/core/styles";
+import MUITable from "@material-ui/core/Table";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableBody from "@material-ui/core/TableBody";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import Paper from "@material-ui/core/Paper";
+
+const StyledTableCell = withStyles((theme) => ({
+  head: {
+    backgroundColor: theme.palette.grey[200],
+    padding: "20px",
+
+    fontWeight: 500,
+    fontSize: "24px",
+    lineHeight: "28px",
+    letterSpacing: "0.685741px",
+
+    color: "#111111",
+    whiteSpace: "nowrap",
+  },
+  body: {
+    fontWeight: "normal",
+    fontSize: "22px",
+    lineHeight: "26px",
+    textAlign: "center",
+    letterSpacing: "0.575px",
+
+    color: "#66666B",
+  },
+}))(TableCell);
+
+export const SingleRowTableCell = withStyles((theme) => ({
+  root: {
+    border: "1px solid",
+    borderColor: theme.palette.grey[200],
+  },
+}))(StyledTableCell);
+
+export const StyledTableRow = withStyles((theme) => ({
+  root: {
+    "&:nth-of-type(even)": {
+      backgroundColor: "#FAFAFA",
+    },
+  },
+}))(TableRow);
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 700,
+  },
+});
+
+/**
+ * General table component to display data in a tabular way.
+ */
+export default function Table(props) {
+  const { header, data } = props; // TODO prop checking
+
+  const isSingleRow = !Array.isArray(data[0]);
+
+  const rowData = isSingleRow ? [data] : data;
+
+  const TableCellComp = isSingleRow ? SingleRowTableCell : StyledTableCell;
+
+  const classes = useStyles();
+
+  return (
+    <TableContainer component={Paper}>
+      <MUITable className={classes.table}>
+        <TableHead>
+          <TableRow>
+            {header.map((h) => (
+              <StyledTableCell key={h} align="center">
+                {h}
+              </StyledTableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rowData.map((row) => (
+            <StyledTableRow>
+              {row.map((entry) => (
+                <TableCellComp align="center">{entry}</TableCellComp>
+              ))}
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </MUITable>
+    </TableContainer>
+  );
+}

electron-react/src/components/table/index.js

@@ -0,0 +1 @@
+export { default } from "./Table";