如何使用 MUI DataGrid React JS 将多个子行添加到第一个主列中

Question

如何使用 Materil UI DataGrid 创建表格来构造图像中显示的列和行？

我可以使用 datagrib 创建普通表，但无法使用第一列创建多个子行。

非常感谢您的帮助。

Answer 1

您可以使用 DataGrid 列对象中的

renderCell

属性来选择您希望如何呈现每列的数据。

renderCell

是一种允许您自定义如何呈现数据的方法。因此，想象一下我有一个包含与国家/地区相关的信息的

DataGrid

。如果我有一个名为“季节性温度”的列，并且我想为每个季节渲染一个子行，我可以在传递给

columns

的

DataGrid

数组中执行类似的操作。请注意，我使用 MUI

Grid

来制作每个子行，但您可以使用其他方式并将您想要的任何组件添加到子行中（按钮、图标、输入等...）：

    const columns = [
    {
      field: "seasonalTemperatures",
      headerName: "Seasonal Temperatures",
      renderCell: ({ row }) => {
        return (
          <Grid container>
            <Grid item xs={12}>
              <Typography>{row.seasonalTemperatures.summer}</Typography>
            </Grid>
            <Grid item xs={12}>
              <Typography>{row.seasonalTemperatures.winter}</Typography>
            </Grid>
            <Grid item xs={12}>
              <Typography>{row.seasonalTemperatures.spring}</Typography>
            </Grid>
            <Grid item xs={12}>
              <Typography>{row.seasonalTemperatures.autumn}</Typography>
            </Grid>
          </Grid>
        );
      },
    },
    // more columns
]

还记得通过

DataGrid

属性相应地调整

rowHeight

的行高，因为默认高度可能不足以容纳多个子行。