made a sticky header for the table

src/common/ResponsiveTable.tsx

@@ -56,6 +56,11 @@ const useStyles = makeStyles((theme: Theme) => {
         backgroundColor: "rgba(150, 150, 150, 0.15)",
       }
     },
+    stickyHeader: {
+      position: "sticky",
+      top: 0,
+      zIndex: 300 //giving a really high z-index to make sure nothing is in front of it
+    }
   })},
 );
 
@@ -100,6 +105,7 @@ interface Props<T> {
   setOrder?: React.Dispatch<React.SetStateAction<"asc" | "desc">>;
   endTitleElement?: string | JSX.Element | (() => string | JSX.Element);
   loadMore?: () => void
+  stickyHeader?: boolean
 }
 
 export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@@ -133,7 +139,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     setOrderBy,
     order, 
     setOrder,
-    loadMore
+    loadMore,
+    stickyHeader
   } = props
   const classes = useStyles();
   const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
@@ -432,9 +439,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   }
 
   return (
-    <TableContainer className={classes.tableContainer} component={Paper}>
+    <Box className={classes.tableContainer} component={Paper}>
       <Table>
-        <TableHead>
+        <TableHead className={stickyHeader ? classes.stickyHeader : undefined}>
           <TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
             <TableCell colSpan={10000} sx={{ border: "none" }}>
               <Grid2 container justifyContent="space-between">
@@ -629,6 +636,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
             )
           })}
       </Menu>
-    </TableContainer>
+    </Box>
   )
 }

src/pages/Devices.tsx

@@ -735,6 +735,7 @@ export default function Devices() {
       <ResponsiveTable<Device>
         title={<SmartBreadcrumb prependPaths={getGroup() && ["groups", getGroup().id().toString()]} groupName={getGroup() && getGroup().name()} paddingBottom={1}/>}
         subtitle={subtitle}
+        stickyHeader
         rows={devices}
         renderGutter={ isMobile ? gutter : undefined }
         columns={columns}