[MUI][React] DataGridのデータをセルごと(各行の列項目1つずつ)に編集可能・不可を設定したい

実現したいこと

MUIのコンポーネント「DataGrid」を使用し、
データを一覧表示させていますが、
列項目の「項目A」は編集可能。
「項目B」は条件に合致する場合(別で保持している区分コードが1の場合のイメージ)のみ編集可能。

下記のソースコード(イメージ)では、4行目・5行目で「editable:true」と書くことによって
2つの項目のみ編集可能のセルにすることができます。

今回仕様で、
1つ目の項目("bbb")は常時編集可能。
2つ目の項目("ccc")は、別の項目の値によって(例えば"ddd"項目が区分値で、その区分値によって)編集可能や編集不可にする仕様があります。
つまり、行によって、"bbb"と"ccc"項目の両方が編集可能の場合と、
"bbb"だけが編集可能("ccc"は編集不可)となり、混ざっています。(行によって変わる)

この場合、どのようにすれば良いかわからず困っています。
(実現不可なのかも確信が持てていません)

ご教授頂けますと幸いです。よろしくお願いいたします。

該当のソースコード(イメージ)

const colums: GridColDef[] =[
{field: 'id', headerName:'No'},
{field: 'idx1', headerName: 'aaa'},
{field: 'idx2', headerName: 'bbb', editable:true},
{field: 'idx3', headerName: 'ccc', editable:true},
{field: 'idx4', headerName: 'ddd'},
];

const rows = [
(データを設定)
];

export default function 関数名() {

(省略)
return{
(省略)
<DataGrid rows={rows} colums={colums} ecperimentalFeatures={{ newEditingAPI:true}} />
(省略)
}

前提

・Nodo.js ver.18.13.0
・npm ver.8.19.3
・React ver.18.2.0
・MUI ver.5.11.7
・Typescript

コメントを投稿

0 コメント