responsive container automatically generates cells based on object keys and values if no column data is provided

src/common/ResponsiveTable.tsx

@@ -49,7 +49,7 @@ interface Props<T> {
   multiGutter?: boolean;
 }
 
-export default function ResponsiveTable<T>(props: Props<T>) {
+export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   const { 
     rows, 
     total, 
@@ -61,7 +61,8 @@ export default function ResponsiveTable<T>(props: Props<T>) {
     renderGutter,
     setSearchText, 
     isLoading,
-    multiGutter
+    multiGutter,
+    columns
   } = props
   const classes = useStyles();
 
@@ -135,7 +136,17 @@ export default function ResponsiveTable<T>(props: Props<T>) {
           </TableRow>
           <TableRow>
             { renderGutter && <TableCell></TableCell>}
-            <TableCell>Profile</TableCell>
+            { columns ?
+              null
+            : rows.length > 0 &&
+              Object.keys(rows[0]).map((value, index) => {
+                return(
+                  <TableCell key={"header-cell-"+index}>
+                    {value.toString()}
+                  </TableCell>
+                )
+              })
+            }
           </TableRow>
         </TableHead>
         <TableBody>
@@ -150,7 +161,7 @@ export default function ResponsiveTable<T>(props: Props<T>) {
           :
             rows.map((row, index) => {
               return (
-                <React.Fragment key={"user-row-"+index}>
+                <React.Fragment key={"row-"+index}>
                   <TableRow>
                     {renderGutter && 
                       <TableCell width={1}>
@@ -164,10 +175,21 @@ export default function ResponsiveTable<T>(props: Props<T>) {
                         </IconButton>
                       </TableCell>
                     }
+                    {columns ? 
+                      null
+                    :
+                      Object.values(row).map((value, j) => {
+                        return (
+                          <TableCell key={"row-"+index+"cell-"+j}>
+                            {value.toString()}
+                          </TableCell>
+                        )
+                      })
+                    }
                   </TableRow>
                   {renderGutter && 
                     <TableRow className={classes.gutter}>
-                      <TableCell colSpan={6} style={{padding:0, margin: 0, border: "none"}}>
+                      <TableCell colSpan={6} sx={{padding:0, margin: 0, border: "none"}}>
                         <Collapse in={openGutters.includes(index)} timeout="auto" unmountOnExit>
                           {renderGutter(row)}
                         </Collapse>