team page added, uses data from previous page so that the team isn't loaded again if it's clicked from the team list

src/common/ResponsiveTable.tsx

@@ -22,6 +22,10 @@ const useStyles = makeStyles((theme: Theme) => {
     title: {
       padding: theme.spacing(1)
     },
+    subtitle: {
+      padding: theme.spacing(1),
+      marginTop: theme.spacing(-2),
+    },
     titleContainer: {
       border: "none",
     },
@@ -51,6 +55,7 @@ interface Props<T> {
   rows: T[],
   columns?: Column<T>[],
   title?: string | JSX.Element;
+  subtitle?: string | JSX.Element;
   total: number,
   pageSize: number,
   page: number,
@@ -75,6 +80,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     setPage, 
     handleRowsPerPageChange, 
     title, 
+    subtitle,
     renderGutter,
     setSearchText, 
     isLoading,
@@ -177,6 +183,20 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     return null
   }
 
+  const renderSubtitle = () => {
+    if (typeof(subtitle) === "string" ) return (
+      <Typography variant="body2" color="textSecondary" className={classes.subtitle}>
+        {subtitle}
+      </Typography>
+    )
+    if (subtitle) return (
+      <Box className={classes.subtitle}>
+        {subtitle} haha lol
+      </Box>
+    )
+    return null
+  }
+
   function capitalize(val: any) {
     return String(val).charAt(0).toUpperCase() + String(val).slice(1);
   }
@@ -231,6 +251,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     <Box>
       <Box className={classes.mobileTitleBox}>
         {renderTitle()}
+        {renderSubtitle()}
         {setSearchText && searchBar()}
       </Box>
       {rows.map((row, index) => {
@@ -290,15 +311,10 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
             <TableCell colSpan={10000} sx={{ border: "none" }}>
               <Grid2 container justifyContent="space-between">
                 <Grid2>
-                {typeof(title) === "string" ? 
-                  <Typography variant="h5" className={classes.title}>
-                    {title}
-                  </Typography>
-                :
-                  title && <Box className={classes.title}>
-                    {title}
+                  <Box sx={{ marginTop: -1 }}>
+                    {renderTitle()}
+                    {renderSubtitle()}
                   </Box>
-                }
                 </Grid2>
                 <Grid2>
                   {setSearchText &&<Box className={classes.searchContainer}>
@@ -308,7 +324,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
               </Grid2>
             </TableCell>
           </TableRow>
-          { !hideKeys && <TableRow>
+          <TableRow sx={ hideKeys ? { display: "none" } : undefined } >
             { renderGutter && <TableCell></TableCell>}
             { columns ?
               columns.map((column, index) => {
@@ -327,7 +343,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                 )
               })
             }
-          </TableRow>}
+          </TableRow>
         </TableHead>
         <TableBody>
           { isLoading ?