Dynamically change the editable property of MUI X data grid column

Question

I have MUI X data-grid as follows in react tsx project, where I want the one of the(answer) column to be disabled when isRelyChatGpt checkbox is checked.

const [qaRowdata, setQaRowData] = useState<any[]>([]);
const qacolumns: GridColDef[] = [
  { field: 'gid', headerName: 'ID', width: 50 },
  { field: 'questionText', headerName: 'Question', width: 600, editable: true },
  { field: 'answer', headerName: 'Answer', width: 600, editable: true },
  { field: 'isRelyChatGpt', headerName: 'Relay on AI', width: 100, renderCell: RelayOnAICell },
  { field: 'delete', headerName: 'Delete', width: 70, renderCell: DeleteCell },
];

<DataGrid
  rows={qaRowdata}
  editMode="row"
  columns={qacolumns}
  getRowId={(row) => row.gid}
  processRowUpdate={(updatedRow, originalRow) => QARowUpdate(updatedRow, originalRow)}
/>

function RelayOnAICell(params: GridRenderCellParams) {
  return <Checkbox checked={params.row.isRelyChatGpt} onChange={(e) => handleRelayOnAIChange(e, params.row.gid)} />;
}

const handleRelayOnAIChange = (e: React.ChangeEvent<HTMLInputElement>, rowId: number) => {
  const updatedQaRowData = qaRowdata.map((row) => {
    if (row.gid === rowId) {
      return { ...row, isRelyChatGpt: e.target.checked };
    }
    return row;
  });

  setQaRowData(updatedQaRowData);
};

Package.json

  "@mui/x-data-grid": "^6.18.3",
  "@mui/x-data-grid-generator": "^6.18.3",
  "@mui/x-date-pickers": "^6.15.0",

I want answer Colum is to be edit disable while isRelyChatGpt checkbox is checked. I want to perform this functionality in handleRelayOnAIChange event handler.

Answer 1

You can make click event handler.

    <DataGrid
        onCellClick={handleCellClick}
        onCellDoubleClick={handleCellClick}
        rows={rows}
        columns={columns}
        editMode="row"
    />

And handler will look like:

    const handleCellDoubleClick =  (params: GridCellParams, event: 
    React.MouseEvent) => {
        if (!params.row.isActive) {
            event.stopPropagation();
            event.preventDefault();
        }
    }