Add Material UI demo (#173)

Adds working example with Material UI
2023-03-10 21:01:46 +01:00
parent 7fd979aed8
commit f9a1d02588
11 changed files with 1032 additions and 138 deletions
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; 
+
+type sheetRow = {
+  sheetName: string;
+  goToButton: React.ReactNode;
+  deleteButton: React.ReactNode;
+};
+
+export default function SheetTable({ rows }: { rows: Array<sheetRow> }) {
+  return (
+    <TableContainer>
+      <Table aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Sheet Name</TableCell>
+            <TableCell align="center">Go To</TableCell>
+            <TableCell align="center">Delete</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row: sheetRow) => (
+            <TableRow
+              key={row.sheetName}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell component="th" scope="row">
+                {row.sheetName}
+              </TableCell>
+              <TableCell align="center">{row.goToButton}</TableCell>
+              <TableCell align="center">{row.deleteButton}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}