Merge pull request #270 from flatironinstitute/sticky-headers

Make headers sticky on tables
flatironinstitute · Feb 3, 2025 · 8ed1441 · 8ed1441
2 parents ccdaaac + 8a9fb7b
commit 8ed1441
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/DrawsTablePanel.tsx b/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/DrawsTablePanel.tsx
@@ -1,10 +1,12 @@
 import { Download } from "@mui/icons-material";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
+import TableRow from "@mui/material/TableRow";
 import {
   SuccessBorderedTableRow,
   SuccessColoredTableHead,
@@ -70,8 +72,8 @@ const DrawsTablePanel: FunctionComponent<DrawsTableProps> = ({
   }, [draws, paramNames, drawChainIds, samplingOpts]);
 
   return (
-    <>
-      <div>
+    <Box display="flex" height="100%" width="100%" flexDirection="column">
+      <Box flex="1" marginBottom="0.75rem">
         <IconButton size="small" title="Download" onClick={handleExportToCsv}>
           <Download fontSize="inherit" />
           &nbsp;Export to single .csv
@@ -85,18 +87,17 @@ const DrawsTablePanel: FunctionComponent<DrawsTableProps> = ({
           <Download fontSize="inherit" />
           &nbsp;Export to multiple .csv
         </IconButton>
-      </div>
-      <br />
-      <TableContainer>
-        <Table size="small" padding="none">
+      </Box>
+      <TableContainer sx={{ flex: "0 1 auto", overflow: "auto" }}>
+        <Table stickyHeader size="small" padding="none">
           <SuccessColoredTableHead>
-            <SuccessBorderedTableRow>
+            <TableRow>
               <TableCell key="chain">Chain</TableCell>
               <TableCell key="draw">Draw</TableCell>
               {paramNames.map((name, i) => (
                 <TableCell key={i}>{name}</TableCell>
               ))}
-            </SuccessBorderedTableRow>
+            </TableRow>
           </SuccessColoredTableHead>
           <TableBody>
             {formattedDraws[0].map((_, i) => (
@@ -123,7 +124,7 @@ const DrawsTablePanel: FunctionComponent<DrawsTableProps> = ({
             </div>
           )}
       </TableContainer>
-    </>
+    </Box>
   );
 };
 

diff --git a/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/SummaryPanel.tsx b/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/SummaryPanel.tsx
@@ -127,8 +127,8 @@ const SummaryPanel: FunctionComponent<SummaryProps> = ({
   }, [draws, paramNames, drawChainIds, computeTimeSec]);
 
   return (
-    <TableContainer>
-      <Table>
+    <TableContainer sx={{ maxHeight: "100%", overflow: "auto" }}>
+      <Table stickyHeader>
         <SecondaryColoredTableHead>
           <TableRow>
             <TableCell>Parameter</TableCell>

diff --git a/gui/src/app/components/StyledTables.tsx b/gui/src/app/components/StyledTables.tsx
@@ -12,6 +12,7 @@ export const SecondaryColoredTableHead = styled(TableHead)(({ theme }) => ({
   backgroundColor: theme.palette.secondary.light,
   th: {
     color: theme.palette.secondary.contrastText,
+    backgroundColor: theme.palette.secondary.light,
     whiteSpace: "nowrap",
     paddingRight: "0.5rem",
   },
@@ -20,9 +21,11 @@ export const SecondaryColoredTableHead = styled(TableHead)(({ theme }) => ({
 export const SuccessColoredTableHead = styled(TableHead)(({ theme }) => ({
   backgroundColor: theme.palette.success.light,
   th: {
+    backgroundColor: theme.palette.success.light,
     color: theme.palette.success.contrastText,
     whiteSpace: "nowrap",
     paddingRight: "0.5rem",
+    borderBottom: "2px solid " + theme.palette.success.main,
   },
 }));