MUI DataGrid：如何添加可按行单独控制的Checkbox？

一、动态控制TextField变体 #

在rows数组中添加自定义字段（比如textFieldVariant）标记每行TextField的变体类型，然后在renderCell中读取该字段动态设置variant属性。

二、受控方式管理Checkbox状态 #

不要使用defaultChecked（不受控模式），改用受控模式：通过useState维护每行的选中状态，结合checked和onChange属性实现精准控制。

完整修改代码 #

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
import { Box, Checkbox, TextField } from "@mui/material";

export default function Table() {
  // 用state维护每行Checkbox的选中状态，键为row.id
  const [checkboxStates, setCheckboxStates] = React.useState({
    1: false, // 初始第一行未选中
    2: true,  // 初始第二行选中
    3: false
  });

  const columns = [
    { field: "id", headerName: "ID", width: 30 },
    { field: "col1", headerName: "Column 1", width: 150 },
    { field: "col2", headerName: "Column 2", width: 150 },
    { 
      field: "col3", 
      headerName: "Checkbox列", 
      width: 150, 
      renderCell: (params) => (
        <Checkbox
          checked={checkboxStates[params.row.id]}
          onChange={(e) => {
            setCheckboxStates(prev => ({
              ...prev,
              [params.row.id]: e.target.checked
            }));
          }}
        />
      )
    },
    { 
      field: "col4", 
      headerName: "TextField列", 
      width: 200, 
      renderCell: (params) => (
        <TextField
          variant={params.row.textFieldVariant}
          placeholder="输入内容"
          size="small"
        />
      )
    }
  ];

  const rows = [
    { id: 1, col1: "Example", col2: "Content", textFieldVariant: "filled" },
    { id: 2, col1: "Example", col2: "Content", textFieldVariant: "outlined" },
    { id: 3, col1: "Example", col2: "Content", textFieldVariant: "standard" }
  ];

  return (
    <Box sx={{ height: 400, width: "100%" }}>
      <DataGrid rows={rows} columns={columns} />
    </Box>
  );
}

关键说明 #

• TextField变体控制：通过rows中的自定义字段textFieldVariant，renderCell里直接读取params.row.textFieldVariant赋值给TextField的variant属性，实现每行样式独立。
• Checkbox状态管理：用对象checkboxStates存储每行选中状态，键对应行ID，确保状态隔离。onChange触发时仅更新当前行的状态，不会影响其他行。
• 解决defaultChecked失效问题：defaultChecked仅作为初始化值，后续状态变化无法同步，必须用受控模式（checked+onChange）才能实现行级精准控制。

内容的提问来源于stack exchange，提问作者Javdev22