在材料表详细信息面板下显示子表

Question

我正在尝试在dense table下添加material-table detail panel，但无法做到这一点。

我想在主表上显示 id ， project_name 和链接，当您单击项目行时，应该显示项目< strong>功能数组作为子表。

这是我尝试执行的操作，但当前它显示每一行的每个功能。 预先感谢。

https://repl.it/@CagatayCanK/Create-React-App

Answer 1

在detailPanel内，而不是循环遍历所有数据，您只需要循环遍历当前行的features：

  detailPanel={(rowData) => {
    return (
      <div id="project-features">
        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Features</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {rowData.features.map((feature) => (
                <TableRow>
                  <TableCell component="th" scope="row">
                    {feature}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </div>
    );
  }}