json - 有没有办法在 React 中创建嵌套数据表？

Question

我试图创建一个这样的 表：我想要的表

但是当我按照本教程https://codesandbox.io/s/material-ui-table-demo-with-row-span-dq1w6?file=/demo.js并以多种方式尝试时，结果不正确.

这是我的结果：https ://codesandbox.io/s/material-ui-table-demo-with-row-span-1hhvv?file=/demo.js

谢谢您的帮助

标签： jsonreactjs

Answer 1

这个解决方案需要整理，但概念就在那里。

这里的技巧是让第一列的rowspan行数等于最后一列的行数。为此，您必须累积details每个datas.

这是一个工作示例：

export default function SpanningTable() {
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>ROOT</TableCell>
            <TableCell>DATA</TableCell>
            <TableCell>DETAIL</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {sample.map(root => (
            <Fragment>
              <TableRow>
                <TableCell rowSpan={root.datas.reduce((length, data) => length + data.details.length + 1, 0) + 1}>
                  {root.name}
                </TableCell>
              </TableRow>
              {root.datas.map(data => (
                <Fragment>
                  <TableRow  >
                    <TableCell rowSpan={data.details.length + 1}>{data.name}</TableCell>
                  </TableRow>
                  {data.details.map(detail => (
                      <TableRow>
                        <TableCell>{detail.name}</TableCell>
                      </TableRow>
                  ))}
                </Fragment>
              ))}
            </Fragment>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}