在 Material-UI Accordion 中添加表格行数据

Question

我必须使用 Material-UI 中的 reactjs 创建一个表，其中包含两个带有模拟数据的手风琴，一个带有来自数据库的数据的手风琴。 我创建了一个包含表格数据的手风琴。 我只想要手风琴中的表格数据而不是标题。 我在手风琴部分获取表格数据时遇到问题。

<Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
             <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
         </TableHead>
         <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <Typography className={classes.heading}>OutStanding</Typography>
      </AccordionSummary>
      <AccordionDetails>
         <TableBody>
        {rows.map(row => (
            <ExpandingRow row={row} />
          ))}
          </TableBody>
         </AccordionDetails>
    </Accordion>
    </Table>
    </Paper>

屏幕看起来像这个当前屏幕

我如何实现它？ 任何帮助将不胜感激，谢谢！

Answer 1

您将需要在手风琴详细信息中包含表，并映射行。

我刚刚创建的有点相似，请检查： https : //codesandbox.io/s/mui-table-accordion-inside-qc7sq