如何禁用 React material ui DataGrid cell/field 复选框选择？

Question

我在同一个 Material UI DataGrid table cell/field 中选择复选框和 link 时遇到问题。
问题是其中一个单元格应该有一个外部 link 并单击该单元格，重定向到另一个页面，复选框也被选中。
所以我的目标是禁用此特定 cell/field 上的复选框选择。
在 Mui 文档中有 disableSelectionOnClick api，它只允许从复选框中检查，而不是从单元格或行中检查。所以这不是我想要的。我仍然希望能够从具有 link 的单元格除外的行中进行检查。在下面提供的示例中，我的特定单元格名称（应该禁止检查）是 total marks。代码示例和 sandbox link

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
import Link from "@mui/material/Link";

const getTotal = (params) =>
  params.getValue(params.id, "maths") + params.getValue(params.id, "science");

const columns = [
  { field: "maths", headerName: "Maths", width: 130 },
  { field: "science", headerName: "Science", width: 130 },
  {
    field: "Total",
    headerName: "Total marks",
    width: 160,
    valueGetter: getTotal,
    editable: true,
    renderCell: (cellValues) => (
      <Link
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.google.com/"
        sx={{ cursor: "pointer" }}
      >
        {cellValues.value}
      </Link>
    )
  }
];

const rows = [
  { id: 1, maths: 75, science: 60 },
  { id: 2, maths: 80, science: 70 },
  { id: 3, maths: 50, science: 80 },
  { id: 4, maths: 80, science: 60 },
  { id: 5, maths: 100, science: 90 }
];

export default function ValueGetterGrid() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid rows={rows} columns={columns} checkboxSelection />
    </div>
  );
}

任何帮助将不胜感激

Answer 1

您可以使用 event.stopPropagation() 方法以及 field。分叉你的沙箱并更新它。

现场演示

如何禁用 React material ui DataGrid cell/field 复选框选择？

How to disable react material ui DataGrid cell/field checkbox selection?

datagrid

reactjs

material-ui