MUI-Datatable：可扩展行内的 TableHead 不断重复表格的每一行，表格不居中

Question

How do I solve this? Table headings just keep on repeating for every row in the table as seen in the picture below. Also, the table is always at the far end of the right side. How can I make this at the center as well?

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

codes:

 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

Changing your options object like below, shoud resolve issue.

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>
      );
    }
  };