From efca0a745482a36b5008b53f05b57e1457f05759 Mon Sep 17 00:00:00 2001
From: Jonathan Fisher <jpfisher72@gmail.com>
Date: Wed, 27 Dec 2023 11:01:31 -0800
Subject: [PATCH] Remove theme from Datatable

---
 src/components/DataTable/datatable.tsx | 367 +++++++++++--------------
 1 file changed, 168 insertions(+), 199 deletions(-)

diff --git a/src/components/DataTable/datatable.tsx b/src/components/DataTable/datatable.tsx
index 3a1b897..ac739a7 100644
--- a/src/components/DataTable/datatable.tsx
+++ b/src/components/DataTable/datatable.tsx
@@ -29,36 +29,8 @@ import Modal from "@mui/material/Modal"
 import Toolbar from "@mui/material/Toolbar"
 import Tooltip from "@mui/material/Tooltip"
 import { styled, alpha } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
 import { Stack } from "@mui/material"
 
-const theme = createTheme({
-  palette: {
-    //For accessibility
-    contrastThreshold: 4.5,
-  },
-  typography: {
-    fontFamily: "inherit",
-  },
-  shape: {
-    borderRadius: 4,
-  },
-  components: {
-    MuiTableCell: {
-      styleOverrides: {
-        head: {
-          fontWeight: "normal",
-        },
-      },
-    },
-    MuiToolbar: {
-      styleOverrides: {
-
-      }
-    }
-  },
-})
-
 //Styling for Search component
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
@@ -117,7 +89,6 @@ const boxStyle = {
   p: 4,
 }
 
-//const RangeSlider: React.FC<SliderProps> = (props: SliderProps) =>
 // function DataTable<T>(props: DataTableProps<T>): React.ReactElement<DataTableProps<T>> {
 const DataTable: React.FC<DataTableProps<any>> = (props: DataTableProps<any>) => {
   // Sets default rows to display at 5 if unspecified
@@ -239,182 +210,180 @@ const DataTable: React.FC<DataTableProps<any>> = (props: DataTableProps<any>) =>
   }, [state.columns, displayedRows])
 
   return (
-    <ThemeProvider theme={theme}>
-      <Paper elevation={3}>
-        <TableContainer
-          // For alignment of the title. Padding scales in multiples of the theme's spacing scaling factor (8px default)
-          sx={{ maxHeight: props.maxHeight ? props.maxHeight : 'none', "& .MuiToolbar-root": { pl: 2 } }}>
-          <Toolbar sx={{ backgroundColor: `${props.headerColor ? props.headerColor.backgroundColor : "transparent"}`, borderTopLeftRadius: theme.shape.borderRadius, borderTopRightRadius: theme.shape.borderRadius }}>
-            <Typography
-              variant="h5"
-              noWrap
-              component="div"
-              sx={{ flexGrow: 1, display: { xs: "none", sm: "block" }, fontWeight: "normal", color: `${props.headerColor ? props.headerColor.textColor : "inherit"}` }}
+    <Paper elevation={3}>
+      <TableContainer
+        // For alignment of the title. Padding scales in multiples of the theme's spacing scaling factor (8px default)
+        sx={{ maxHeight: props.maxHeight ? props.maxHeight : 'none', "& .MuiToolbar-root": { pl: 2 } }}>
+        <Toolbar sx={{ backgroundColor: `${props.headerColor ? props.headerColor.backgroundColor : "transparent"}`, borderTopLeftRadius: 4, borderTopRightRadius: 4 }}>
+          <Typography
+            variant="h5"
+            noWrap
+            component="div"
+            sx={{ flexGrow: 1, display: { xs: "none", sm: "block" }, fontWeight: "normal", color: `${props.headerColor ? props.headerColor.textColor : "inherit"}` }}
+          >
+            {props.tableTitle}
+            {props.titleHoverInfo && (
+              <Tooltip title={props.titleHoverInfo} color="primary" sx={{ ml: 1 }} placement="right-start">
+                <InfoIcon />
+              </Tooltip>
+            )}
+          </Typography>
+          {props.showMoreColumns && props.columns.length > (props.noOfDefaultColumns || 5) && (
+            <Button
+              variant="outlined"
+              size="small"
+              color="primary"
+              onClick={() =>
+                dispatch({
+                  type: "modalChanged",
+                  showAddColumnsModal: true,
+                })
+              }
             >
-              {props.tableTitle}
-              {props.titleHoverInfo && (
-                <Tooltip title={props.titleHoverInfo} color="primary" sx={{ ml: 1 }} placement="right-start">
-                  <InfoIcon />
-                </Tooltip>
-              )}
-            </Typography>
-            {props.showMoreColumns && props.columns.length > (props.noOfDefaultColumns || 5) && (
-              <Button
-                variant="outlined"
-                size="small"
-                color="primary"
-                onClick={() =>
+              <AddIcon />
+              Manage Columns
+            </Button>
+          )}
+          {props.searchable && (
+            <Search>
+              <SearchIconWrapper>
+                <SearchIcon />
+              </SearchIconWrapper>
+              <StyledInputBase
+                id="table-search"
+                placeholder="Filter Items"
+                inputProps={{ "aria-label": "search" }}
+                onChange={(e) => {
                   dispatch({
-                    type: "modalChanged",
-                    showAddColumnsModal: true,
-                  })
+                    type: "searchChanged",
+                    value: e.target.value,
+                  });
+                  setPage(0);
                 }
-              >
-                <AddIcon />
-                Manage Columns
-              </Button>
-            )}
-            {props.searchable && (
-              <Search>
-                <SearchIconWrapper>
-                  <SearchIcon />
-                </SearchIconWrapper>
-                <StyledInputBase
-                  id="table-search"
-                  placeholder="Filter Items"
-                  inputProps={{ "aria-label": "search" }}
-                  onChange={(e) => {
-                    dispatch({
-                      type: "searchChanged",
-                      value: e.target.value,
-                    });
+                }
+              />
+            </Search>
+          )}
+          <IconButton onClick={download}>
+            <DownloadIcon htmlColor={`${props.headerColor?.textColor || 'inherit'}`} />
+          </IconButton>
+        </Toolbar>
+        <Table stickyHeader aria-label="sticky table" padding={props.dense ? "checkbox" : "normal"}>
+          {!props.hideHeader && (
+            <TableHead>
+              <TableRow>
+                {state.columns.map((column, i) => (
+                  <TableCell key={`${column.header}${i}`} onClick={() => {
+                    !column.unsortable && dispatch({ type: "sortChanged", sortColumn: i });
                     setPage(0);
-                  }
-                  }
-                />
-              </Search>
-            )}
-            <IconButton onClick={download}>
-              <DownloadIcon htmlColor={`${props.headerColor?.textColor || 'inherit'}`} />
-            </IconButton>
-          </Toolbar>
-          <Table stickyHeader aria-label="sticky table" padding={props.dense ? "checkbox" : "normal"}>
-            {!props.hideHeader && (
-              <TableHead>
-                <TableRow>
-                  {state.columns.map((column, i) => (
-                    <TableCell key={`${column.header}${i}`} onClick={() => {
-                      !column.unsortable && dispatch({ type: "sortChanged", sortColumn: i });
-                      setPage(0);
-                      }}>
-                      <TableSortLabel active={i === state.sort.column} direction={state.sort.asc ? "asc" : "desc"}>
-                        {column.HeaderRender ? <column.HeaderRender /> : column.header}
-                        
-                      </TableSortLabel>
-                    </TableCell>
-                  ))}
+                  }}>
+                    <TableSortLabel active={i === state.sort.column} direction={state.sort.asc ? "asc" : "desc"}>
+                      {column.HeaderRender ? <column.HeaderRender /> : column.header}
+
+                    </TableSortLabel>
+                  </TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+          )}
+          <TableBody>
+            {props.rows.length === 0 ? (
+              <TableRow>
+                <TableCell>{props.emptyText || "No data available."}</TableCell>
+                {/* Render needed number of empty cells to fill row */}
+                {handleEmptyTable(props.columns.length)}
+              </TableRow>
+            ) : (
+              displayedRows.slice(page * rowsPerPage, (page + 1) * rowsPerPage).map((row, i) => (
+                <TableRow
+                  // Check that there's a row to select, it's the right one, and either none have been highlighted or it's the correct one
+                  selected={props.highlighted ? highlightCheck(row) : false}
+                  hover
+                  key={"row" + i}
+                  onClick={() => props.onRowClick && props.onRowClick(row, i + page * rowsPerPage)}
+                  sx={{ cursor: props.onRowClick ? "pointer" : "auto" }}
+                  onMouseEnter={() => props.onRowMouseEnter && props.onRowMouseEnter(row, i + page * rowsPerPage)}
+                  onMouseLeave={() => props.onRowMouseLeave && props.onRowMouseLeave()}
+                >
+                  {state.columns.map((column, j) => {
+                    return (
+                      <TableCell
+                        // sx={{pl: 1}}
+                        key={column.header + "Row" + i + "Column" + j}
+                        onMouseEnter={() => props.onCellMouseEnter && props.onCellMouseEnter(column.value(row), i, j)}
+                        onMouseLeave={() => props.onCellMouseLeave && props.onCellMouseLeave()}
+                      >
+                        {column.FunctionalRender ? (<column.FunctionalRender {...row} />) : column.render ? (
+                          column.render(row)
+                        ) : (
+                          column.value(row)
+                        )}
+                      </TableCell>
+                    )
+                  })}
                 </TableRow>
-              </TableHead>
+              ))
             )}
-            <TableBody>
-              {props.rows.length === 0 ? (
-                <TableRow>
-                  <TableCell>{props.emptyText || "No data available."}</TableCell>
-                  {/* Render needed number of empty cells to fill row */}
-                  {handleEmptyTable(props.columns.length)}
-                </TableRow>
-              ) : (
-                displayedRows.slice(page * rowsPerPage, (page + 1) * rowsPerPage).map((row, i) => (
-                  <TableRow
-                    // Check that there's a row to select, it's the right one, and either none have been highlighted or it's the correct one
-                    selected={props.highlighted ? highlightCheck(row) : false}
-                    hover
-                    key={"row" + i}
-                    onClick={() => props.onRowClick && props.onRowClick(row, i + page * rowsPerPage)}
-                    sx={{cursor: props.onRowClick ? "pointer" : "auto"}}
-                    onMouseEnter={() => props.onRowMouseEnter && props.onRowMouseEnter(row, i + page * rowsPerPage)}
-                    onMouseLeave={() => props.onRowMouseLeave && props.onRowMouseLeave()}
-                  >
-                    {state.columns.map((column, j) => {
-                      return (
-                        <TableCell
-                          // sx={{pl: 1}}
-                          key={column.header + "Row" + i + "Column" + j}
-                          onMouseEnter={() => props.onCellMouseEnter && props.onCellMouseEnter(column.value(row), i, j)}
-                          onMouseLeave={() => props.onCellMouseLeave && props.onCellMouseLeave()}
-                        >
-                          {column.FunctionalRender ? (<column.FunctionalRender {...row} />) : column.render ? (
-                            column.render(row)
-                          ) : (
-                            column.value(row)
-                          )}
-                        </TableCell>
-                      )
-                    })}
-                  </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
-        </TableContainer>
-        {!props.hidePageMenu && (
-          <Stack direction="column" useFlexGap justifyContent="space-between">
-            <Typography pl={props.dense ? '4px' : 2} sx={{ mt: 'auto', mb: 'auto' }}>
-              {displayedRows.length !== props.rows.length && `Showing ${displayedRows.length} matching rows of ${props.rows.length} total.`}
-            </Typography>
-            <TablePagination
-              rowsPerPageOptions={[itemsPerPage, 10, 25, 100]}
-              component="div"
-              count={displayedRows.length}
-              rowsPerPage={rowsPerPage}
-              page={page}
-              onPageChange={handleChangePage}
-              onRowsPerPageChange={handleChangeRowsPerPage}
-              showFirstButton={props.dense ? false : true}
-              showLastButton={props.dense ? false : true}
-              labelRowsPerPage={props.dense ? "Rows:" : undefined}
-              sx={props.dense ? { "& .MuiTablePagination-toolbar": {pl: "6px"}, "& .css-h0cf5v-MuiInputBase-root-MuiTablePagination-select": {mr: "6px", ml: "0px"}, "& .MuiTablePagination-actions": {ml: "4px !important"} } : undefined}
-            />
-          </Stack>
-        )}
-        {/* Add columns modal */}
-        <Modal open={state.showAddColumnsModal} onClose={() => dispatch({ type: "modalChanged", showAddColumnsModal: false })}>
-          <Box sx={boxStyle}>
-            <Typography variant="h4">Add Columns</Typography>
-            {(props.defaultColumnsToShow
-              ? props.columns.filter((c) => !props.defaultColumnsToShow?.includes(c.header))
-              //Why is this "or 5" here? Kinda makes no sense?
-              : props.columns.slice(props.noOfDefaultColumns || 5, props.columns.length)
-            ).map((col, i) => (
-              <Fragment key={i}>
-                <FormControlLabel
-                  control={
-                    <Checkbox
-                      checked={state.columns.find((c) => c.header === col.header) !== undefined}
-                      onChange={(event) => {
-                        if (event.target.checked && props.columns.find((c) => c.header === col.header))
-                          dispatch({
-                            type: "columnsChanged",
-                            columns: [...state.columns, col],
-                          })
-                        else
-                          dispatch({
-                            type: "columnsChanged",
-                            columns: state.columns.filter((u) => u.header !== col.header),
-                          })
-                      }}
-                    />
-                  }
-                  label={col.header}
-                />
-                <br />
-              </Fragment>
-            ))}
-            <Button onClick={() => dispatch({ type: "modalChanged", showAddColumnsModal: false })}>Cancel</Button>
-          </Box>
-        </Modal>
-      </Paper>
-    </ThemeProvider>
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {!props.hidePageMenu && (
+        <Stack direction="column" useFlexGap justifyContent="space-between">
+          <Typography pl={props.dense ? '4px' : 2} sx={{ mt: 'auto', mb: 'auto' }}>
+            {displayedRows.length !== props.rows.length && `Showing ${displayedRows.length} matching rows of ${props.rows.length} total.`}
+          </Typography>
+          <TablePagination
+            rowsPerPageOptions={[itemsPerPage, 10, 25, 100]}
+            component="div"
+            count={displayedRows.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            showFirstButton={props.dense ? false : true}
+            showLastButton={props.dense ? false : true}
+            labelRowsPerPage={props.dense ? "Rows:" : undefined}
+            sx={props.dense ? { "& .MuiTablePagination-toolbar": { pl: "6px" }, "& .css-h0cf5v-MuiInputBase-root-MuiTablePagination-select": { mr: "6px", ml: "0px" }, "& .MuiTablePagination-actions": { ml: "4px !important" } } : undefined}
+          />
+        </Stack>
+      )}
+      {/* Add columns modal */}
+      <Modal open={state.showAddColumnsModal} onClose={() => dispatch({ type: "modalChanged", showAddColumnsModal: false })}>
+        <Box sx={boxStyle}>
+          <Typography variant="h4">Add Columns</Typography>
+          {(props.defaultColumnsToShow
+            ? props.columns.filter((c) => !props.defaultColumnsToShow?.includes(c.header))
+            //Why is this "or 5" here? Kinda makes no sense?
+            : props.columns.slice(props.noOfDefaultColumns || 5, props.columns.length)
+          ).map((col, i) => (
+            <Fragment key={i}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={state.columns.find((c) => c.header === col.header) !== undefined}
+                    onChange={(event) => {
+                      if (event.target.checked && props.columns.find((c) => c.header === col.header))
+                        dispatch({
+                          type: "columnsChanged",
+                          columns: [...state.columns, col],
+                        })
+                      else
+                        dispatch({
+                          type: "columnsChanged",
+                          columns: state.columns.filter((u) => u.header !== col.header),
+                        })
+                    }}
+                  />
+                }
+                label={col.header}
+              />
+              <br />
+            </Fragment>
+          ))}
+          <Button onClick={() => dispatch({ type: "modalChanged", showAddColumnsModal: false })}>Cancel</Button>
+        </Box>
+      </Modal>
+    </Paper>
   )
 }
 export default DataTable