Above is my code actually i have data in groups and i need to show each group in a accordion and can have only one header outside the table body when i try the above code then accordion rendered in first cell of table i don not know how i can fix this does anybody can help?
<div>
<TableContainer
sx={{ ...classes.tableRoot, ...(customStyleTableContainer || {}) } as SxProps<Theme>}
>
<Table stickyHeader>
<TableHead>
<TableRow>
{headers?.map((cell: TableHeaderCell, index: number) => (
<TableCell
key={`table-header-${index}`}
sx={{
...tableHeaderCellStyle,
backgroundColor: '#F4F6F8',
padding: '0px'
}}
align={cell.align ?? 'left'}
colSpan={4}
>
<Typography variant='subtitle1' color='#212B36' sx={classes.header}>
{cell.label}
</Typography>
</TableCell>
))}
</TableRow>
</TableHead>
{dummyData.map((group, index) => (
<Accordion
key={`accordion-${index}`}
expanded={expanded === `panel-${index}`}
onChange={toggleAccordion(`panel-${index}`)}
disableGutters={true}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`panel-${index}-content`}
id={`panel-${index}-header`}
sx={{ background: 'grey' }}
>
<Typography variant='subtitle1'>{group.groupName}</Typography>
</AccordionSummary>
<AccordionDetails>
<TableBody>
{group.data.map((row, rowIndex) => (
<TableRow key={`row-${rowIndex}`}>
{Object?.entries(row).map(
([key, value], index: number) =>
key !== 'id' && (
<TableCell
key={`table-cell-${index}`}
sx={{ padding: '0px' }}
colSpan={4}
>
{value}
</TableCell>
)
)}
</TableRow>
))}
</TableBody>
</AccordionDetails>
</Accordion>
))}
</Table>
</TableContainer>
</div>
);```