MUI-Datatable: Expandable Row 内的 TableHead 不断重复 table 的每一行并且 table 不居中

Question

我该如何解决这个问题？ Table 标题只是不断重复 table 中的每一行，如下图所示。此外，table 始终位于右侧的远端。我怎样才能把这个也放在中心？

Codesandbox：https://codesandbox.io/s/xenodochial-fog-s984v0?file=/src/App.js

代码：

 const options = {
    filter: true,
    selectableRows: "none",
    responsive: "simple",
    expandableRows: true,
    renderExpandableRow: (rowData, rowMeta) => {
      console.log(rowData, "rowData");
      return Object.entries(rowData[3]).map(([key, value]) => {
        return (
          <TableContainer>
            <Table>
              <TableHead>
                <TableCell align="right">Name</TableCell>
                <TableCell align="right">Color</TableCell>
              </TableHead>
              <TableBody>
                <TableRow key={key}>
                  <TableCell component="th" scope="row">
                    {value.name}
                  </TableCell>

                  <TableCell align="right">{value.color}</TableCell>

                  {/* Product: {value.name} + {value.size} +{" "}
                  {value.color + value.quantity} */}
                </TableRow>
              </TableBody>
            </Table>
          </TableContainer>
        );
      });
    }
  };

Answer 1

像下面这样更改您的 options 对象，应该可以解决问题。

const options = {
    filter: true,
    selectableRows: "none",
    responsive: "scrollMaxHeight",
    expandableRows: true,
    renderExpandableRow: (rowData, rowMeta) => {
      console.log(rowData);
      return (
        <tr>
          <td colSpan={4}>
            <TableContainer>
              <Table style={{ margin: "0 auto" }}>
                <TableHead>
                  <TableCell align="right">Name</TableCell>
                  <TableCell align="right">Color</TableCell>
                </TableHead>
                <TableBody>
                  {rowData[3].map((row) => {
                    console.log(row);
                    return (
                      <TableRow key={row.id}>
                        <TableCell component="th" scope="row" align="right">
                          {row.name}
                        </TableCell>
                        <TableCell align="right">{row.color}</TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          </td>
        </tr>
      );
    }
  };

MUI-Datatable: Expandable Row 内的 TableHead 不断重复 table 的每一行并且 table 不居中

MUI-Datatable: TableHead inside Expandable Row keeps on repeating for every row of the table and table does not center

javascript

reactjs

material-ui

mui-datatable