Reactjs 如何将 MUI X 数据网格单元格方向更改为行级而不是列级

通过自定义单元格呈现，您可以实现这种行级单元格与MUI X数据网格的关联.这允许您定义将为网格中的每个单元格呈现的自定义组件.

为此，您需要向每一行传递一些额外的数据，例如单元格组件的第type和color.例如，您可以有不同类型的单元格组件，如button、input、select或text.您还可以 for each 单元格组件使用不同的 colored颜色 ，例如primary、secondary或default.

然后，您需要创建一个定制单元格组件，该组件将根据行数据的类型和 colored颜色 呈现不同的元素.例如，您可以使用Button、TextField、Select或Typography等MUI组件.您还可以使用诸如value和field之类的props 来访问单元格值和字段名称.

最后，您需要将自定义单元格组件传递给网格中每列的renderCellprops .这将覆盖单元格的默认呈现，并使用您的自定义组件.

例如:

const CustomCell = ({ row: { type, color }, value, field, ...rest }) => {
  if (field === "id") {
    return <Typography justifyContent="center">{value}</Typography>;
  } else if (type === "button") {
    return (
      <Button fullWidth variant="contained" color={color}>
        {value}
      </Button>
    );
  } else if (type === "input") {
    return (
      <TextField fullWidth color={color} size="small" defaultValue={value} />
    );
  } else if (type === "select") {
    return (
      <Select fullWidth color={color} size="small" defaultValue={value}>
        <MenuItem value=""></MenuItem>
        <MenuItem value={0}>0</MenuItem>
        <MenuItem value={1}>1</MenuItem>
        <MenuItem value={2}>2</MenuItem>
      </Select>
    );
  } else {
    return <Typography color={color}>{value}</Typography>;
  }
};

const rows = [
  {
    id: 1,
    type: "button",
    color: "primary",
    firstName: "a",
    lastName: "a",
    gender: "a"
  },
  {
    id: 2,
    type: "input",
    color: "primary",
    firstName: "a",
    lastName: "a",
    gender: "a"
  }
]

return (
  <DataGrid
    rows={rows}
    columns={columns.map((column) => ({
      ...column,
      renderCell: (props) => <CustomCell {...props} />
    }))}
  />
);

您可以在这里看到整个示例:codesandbox.io