brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed miscoloring of the data section of the table

Browse source
This commit is contained in:
Carter 2026-03-13 15:23:07 -06:00
parent e732cab837
commit caff4ce6fb
1 changed files with 43 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/common/ResponsiveTable.tsx
View file

@ -1,11 +1,11 @@
import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material"; import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
import { alpha } from "@mui/system/colorManipulator";
import { makeStyles } from "@mui/styles"; import { makeStyles } from "@mui/styles";
import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material" import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import React from "react"; import React from "react";
import { useMobile } from "hooks"; import { useMobile } from "hooks";
import classNames from "classnames"; import classNames from "classnames";
import { getThemeType } from "theme";
const useStyles = makeStyles((theme: Theme) => { const useStyles = makeStyles((theme: Theme) => {
//const isMobile = useMobile() //const isMobile = useMobile()
@ -58,10 +58,14 @@ const useStyles = makeStyles((theme: Theme) => {
}, },
stickyHeader: { stickyHeader: {
position: "sticky", position: "sticky",
backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(40, 40, 40)", backgroundColor: theme.palette.background.paper,
// Match Paper's elevation overlay so header matches search bar area
backgroundImage: theme.palette.mode === "dark"
? `linear-gradient(${alpha("#fff", 0.05)}, ${alpha("#fff", 0.05)})`
: undefined,
top: 0, top: 0,
zIndex: 300 //giving a really high z-index to make sure nothing is in front of it zIndex: 300 //giving a really high z-index to make sure nothing is in front of it
} },
})}, })},
); );
@ -549,30 +553,29 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
return ( return (
<Box className={classes.tableContainer} component={Paper}> <Box className={classes.tableContainer} component={Paper}>
<TableContainer sx={{ overflowX: "auto" }}> {(title || setSearchText) && (
<Table> <Box>
<TableHead className={stickyHeader ? classes.stickyHeader : undefined}> <Grid2 container justifyContent="space-between" alignItems="center" sx={{ padding: 1 }}>
<TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
<TableCell colSpan={10000} sx={{ border: "none" }}>
<Grid2 container justifyContent="space-between">
<Grid2> <Grid2>
<Box sx={{ marginTop: -1 }}> <Box sx={{ marginTop: -1 }}>
{renderTitle()} {renderTitle()}
{renderSubtitle()} {renderSubtitle()}
</Box> </Box>
</Grid2> </Grid2>
<Grid2> <Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end" }}>
<Grid2 container alignItems={"center"} spacing={1}> <Grid2 container alignItems="center" spacing={1} wrap="nowrap">
<Grid2> <Grid2>
{actions && actions} {actions && actions}
</Grid2> </Grid2>
<Grid2> <Grid2>
{endTitleElement} {endTitleElement}
</Grid2> </Grid2>
<Grid2> <Grid2 sx={{ minWidth: 200, maxWidth: 320 }}>
{setSearchText &&<Box className={classes.searchContainer}> {setSearchText && (
<Box className={classes.searchContainer} sx={{ width: "100%" }}>
{searchBar()} {searchBar()}
</Box>} </Box>
)}
</Grid2> </Grid2>
<Grid2> <Grid2>
{ columns && !hideKeys && { columns && !hideKeys &&
@ -584,9 +587,11 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
</Grid2> </Grid2>
</Grid2> </Grid2>
</Grid2> </Grid2>
</TableCell> </Box>
</TableRow> )}
<TableContainer sx={{ overflowX: "auto" }}>
<Table>
<TableHead className={stickyHeader ? classes.stickyHeader : undefined}>
{customElement && {customElement &&
<TableRow> <TableRow>
<TableCell colSpan={10000} sx={{ border: "none" }}> <TableCell colSpan={10000} sx={{ border: "none" }}>