How to set editable for each cell in mui DataGrid(x-data-grid)

Question

I am learning to use React and MUI.

I have an associative array of data set up in a data grid. I would like to change the property'editable' setting depending on the column items. If editable is set, it will be applied to the entire target column.

Is there a way to set editable for each cell? Please tell me.

The following is the code that sets up the columns of the data grid.

import { DataGrid, GridColumns, jaJP, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';

const columns: GridColDef[] = [
 { field: 'rowNum', headerName: 'No', type: 'number', headerAlign: 'center', align: 'center', flex: 0.02 , sortable: false, },
 { field: 'itemCd', headerName: 'itemCD', type: 'string', headerAlign: 'center', align: 'left', flex: 0.18, sortable: false, },
 { field: 'itemNm', headerName: 'itemNm', type: 'string', headerAlign: 'center', align: 'left', flex: 0.18, sortable: false, },
 ★ I want to set editable for each cell.
 { field: 'itemQuantity', headerName: 'itemQuantity', type: 'string', headerAlign: 'center', align: 'center', flex: 0.05, editable: true, sortable: false,
 },
];

// JSX
<DataGrid
 getRowId = {(row) => row.rowNum}
 getRowHeight={() => 'auto'}
 rows = {
  itemList.map((itemList) => {
   return itemList
  })
 }
 columns={columns}
 hideFooterSelectedRowCount
 disableSelectionOnClick
/>

What I've tried.

1.When I asked the question to chatGPT, they replied that the property "CellRenderer" is used, but there is no such property.

2.I tried renderCell with no success.

renderCell: (params) => {
 return (
  <TextField
   size = 'small'
   value={ itemList && itemList.length > 0 ? itemList[params.row.rowNum].itemQuantity: ''}
  />
 )
}

Answer 1

I solved it myself.

I used Mui's TextFeild component with mui's column setting property renderCell.

<TextField
 size = 'small'
 value={ itemList && itemList[params.row.rowNum] ? itemList[params.row.rowNum -1].itemQuantity: ''}
/>