如何使用 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

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

您可以在 RenderCell 中放入任何您喜欢的内容。为了使其与上面的屏幕截图类似，我添加了一个开关组件和日期选择器，我的字段现在称为

details

，如下所示：

{
    field: "details",
    headerName: "Details",
    width: 500,
    editable: false,
    renderCell: ({ row }) => {
      return (
        <Grid container rowSpacing={3}>
          <Grid item xs={12}>
            <Typography variant="h5">{row.details.productNo}</Typography>
          </Grid>
          <Grid item xs={12}>
            <Typography>{row.details.description1}</Typography>
          </Grid>
          <Grid container alignItems="center">
            <Grid item xs={6}>
              <Typography>{row.details.description2}</Typography>
            </Grid>
            <Grid item xs={6}>
              <DatePickerOpenTo />
            </Grid>
          </Grid>
          <Grid container alignItems="center">
            <Grid item xs>
              <Typography>{row.details.toggleText}</Typography>
            </Grid>
            <Grid item>
              <Switch />
            </Grid>
          </Grid>
        </Grid>
      );
    }
  },

这给出了这样的列：

我还将代码放在 CodeSandbox 上，以便您可以看到它的样子并使用它。这是链接