QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes for data table css redo (a z-index on headers, and use background color (as sx prop) in body cells

Browse Source
This commit is contained in:
darin.kelkhoff
2024-07-26 10:34:18 -05:00
parent 3fa017e8b9
commit e604f47231
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx
View File

@ -19,7 +19,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import Box from "@mui/material/Box"; import {Box} from "@mui/material";
import {Theme} from "@mui/material/styles"; import {Theme} from "@mui/material/styles";
import colors from "qqq/assets/theme/base/colors"; import colors from "qqq/assets/theme/base/colors";
import {ReactNode} from "react"; import {ReactNode} from "react";
@ -30,9 +30,10 @@ interface Props
children: ReactNode; children: ReactNode;
noBorder?: boolean; noBorder?: boolean;
align?: "left" | "right" | "center"; align?: "left" | "right" | "center";
sx?: any;
} }
function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element
{ {
return ( return (
<Box <Box
@ -54,7 +55,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
}, },
"&:last-child": { "&:last-child": {
paddingRight: "1rem" paddingRight: "1rem"
} }, ...sx
})} })}
> >
<Box <Box
@ -72,6 +73,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
DataTableBodyCell.defaultProps = { DataTableBodyCell.defaultProps = {
noBorder: false, noBorder: false,
align: "left", align: "left",
sx: {}
}; };
export default DataTableBodyCell; export default DataTableBodyCell;

3
src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx
View File

@ -50,7 +50,8 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
px={1.5} px={1.5}
sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({ sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`, borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
position: "sticky", top: 0, background: "white" position: "sticky", top: 0, background: "white",
zIndex: 1 // so if body rows scroll behind it, they don't show through
})} })}
> >
<Box <Box