From e604f47231d0f48f87ecbeea0b6e6bddef905852 Mon Sep 17 00:00:00 2001
From: Darin Kelkhoff <darin.kelkhoff@gmail.com>
Date: Fri, 26 Jul 2024 10:34:18 -0500
Subject: [PATCH] Fixes for data table css redo (a z-index on headers, and use
 background color (as sx prop) in body cells

---
 .../components/widgets/tables/cells/DataTableBodyCell.tsx | 8 +++++---
 .../components/widgets/tables/cells/DataTableHeadCell.tsx | 3 ++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx
index 2e13d22..7623de3 100644
--- a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx
+++ b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx
@@ -19,7 +19,7 @@
  * 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 colors from "qqq/assets/theme/base/colors";
 import {ReactNode} from "react";
@@ -30,9 +30,10 @@ interface Props
    children: ReactNode;
    noBorder?: boolean;
    align?: "left" | "right" | "center";
+   sx?: any;
 }
 
-function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
+function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element
 {
    return (
       <Box
@@ -54,7 +55,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
             },
             "&:last-child": {
                paddingRight: "1rem"
-            }
+            }, ...sx
          })}
       >
          <Box
@@ -72,6 +73,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
 DataTableBodyCell.defaultProps = {
    noBorder: false,
    align: "left",
+   sx: {}
 };
 
 export default DataTableBodyCell;
diff --git a/src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx b/src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx
index e12bba1..55d7f0d 100644
--- a/src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx
+++ b/src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx
@@ -50,7 +50,8 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
          px={1.5}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
             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