如何在MUI DataGrid中禁用年龄大于30的整行？

现有配置代码 #

列配置（columns） #

const columns: GridColDef[] = [
  {
    field: "firstName",
    headerName: "First name",
    width: 150,
    editable: true,
  },
  {
    field: "lastName",
    headerName: "Last name",
    width: 150,
    editable: true,
  },
  {
    field: "age",
    headerName: "Age",
    type: "number",
    width: 110,
    editable: true,
  },
  {
    field: "fullName",
    headerName: "Full name",
    description: "This column has a value getter and is not sortable.",
    sortable: false,
    width: 160,
    valueGetter: (params: GridValueGetterParams) =>
      `${params.row.firstName || ""} ${params.row.lastName || ""}`,
  },
];

行数据（rows） #

const rows = [
  { id: 1, lastName: "Snow", firstName: "Jon", age: 14 },
  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 31 },
  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 31 },
  { id: 4, lastName: "Stark", firstName: "Arya", age: 11 },
  { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: 25 },
  { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
  { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
  { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
  { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
];

需求 #

当行数据中的age > 30时，禁用该行，表现为：

• 行样式变灰，视觉区分禁用状态
• 该行所有单元格不可编辑
• 点击该行不触发后续操作

实现方案 #

通过DataGrid的三个核心属性实现：

1. getRowClassName：为符合条件的行添加自定义样式
2. isCellEditable：控制单元格是否可编辑，过滤age>30的行
3. onRowClick：在点击事件中判断行数据，跳过禁用行的后续逻辑

修改后的完整代码 #

import * as React from "react";
import { DataGrid, GridColDef, GridValueGetterParams, GridCellParams } from "@mui/x-data-grid";

const columns: GridColDef[] = [
  {
    field: "firstName",
    headerName: "First name",
    width: 150,
    editable: true,
  },
  {
    field: "lastName",
    headerName: "Last name",
    width: 150,
    editable: true,
  },
  {
    field: "age",
    headerName: "Age",
    type: "number",
    width: 110,
    editable: true,
  },
  {
    field: "fullName",
    headerName: "Full name",
    description: "This column has a value getter and is not sortable.",
    sortable: false,
    width: 160,
    valueGetter: (params: GridValueGetterParams) =>
      `${params.row.firstName || ""} ${params.row.lastName || ""}`,
  },
];

const rows = [
  { id: 1, lastName: "Snow", firstName: "Jon", age: 14 },
  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 31 },
  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 31 },
  { id: 4, lastName: "Stark", firstName: "Arya", age: 11 },
  { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: 25 },
  { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
  { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
  { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
  { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
];

export default function Demo() {
  // 判断是否为禁用行
  const isRowDisabled = (row: typeof rows[0]) => row.age > 30;

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: { page: 0, pageSize: 5 },
          },
        }}
        pageSizeOptions={[5, 10]}
        checkboxSelection
        // 为禁用行添加灰色样式
        getRowClassName={(params) => isRowDisabled(params.row) ? "disabled-row" : ""}
        // 禁用单元格编辑
        isCellEditable={(params: GridCellParams) => !isRowDisabled(params.row)}
        // 处理行点击，跳过禁用行
        onRowClick={(params) => {
          if (isRowDisabled(params.row)) return;
          // 原有的行点击逻辑放在这里
          console.log("点击了可操作行:", params.row);
        }}
      />
    </div>
  );
}

样式补充 #

在全局样式或组件样式中添加禁用行的样式：

.disabled-row {
  background-color: #f5f5f5;
  opacity: 0.7;
  pointer-events: none; /* 可选，彻底阻止鼠标事件 */
}

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