Skip to content

Commit

Permalink
Remove theme from Datatable
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpfisher72
jpfisher72 committed Dec 27, 2023
1 parent dfcefa6 commit efca0a7
Showing 1 changed file with 168 additions and 199 deletions.
367 changes: 168 additions & 199 deletions src/components/DataTable/datatable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

0 comments on commit efca0a7

Please sign in to comment.