brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Carter 2024-11-25 19:17:59 -06:00
parent 8265914627
commit 39f5f6d452
1 changed files with 27 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/common/ResponsiveTable.tsx
View file

@ -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>