在 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

您需要在 AccordionDetails 中包含表格，并映射行。

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

Answer 2

我之前在此线程中回复过更详细的答案：我想在 Material UI 表体中显示两个手风琴

摘录：

这就是我要解决的方法。该解决方案在没有手风琴的情况下也适用。

https://codesandbox.io/p/sandbox/great-hopper-skft3s

基本上，您可以在主表中创建一个全新的表。

在单个 TableCell 中添加所有 Accordion/嵌套逻辑，并添加 colSpan 以匹配 TableHead 的项目长度。

然后在 Accordion 中创建一个新表格，并为每个 TableCell 匹配 TableHead 中的列宽度。

使用 padding: 0 来匹配 TableHead 和嵌套内容