I have a problem having a checkbox selection and link in the same Material UI DataGrid table cell/field.
The problem is that one of the cells should have an external link and clicking to that cell, which redirects to another page, checkbox is also being selected.
So my goal is to disable checkbox selection on this particular cell/field.
In Mui docs there is disableSelectionOnClick
api, which allows to check only from checkbox, but not from cell or row. So this not what I want. I still want to have the ability to check from rows except the cell that has a link. In my example provided below, my particular cell name,that should be disable from checking, is total marks
.
Code example and 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>
);
}
Any help will be appreciated
you can use the event.stopPropagation()
method, along with field
. forked your sandbox and updated it.
Live Demo