reactのmaterial-tableで一部カラムのみを編集可能にする

2244 ワード
material-table React material-ui JavaScript JavaScript テキストリンク

Material-table

https://material-table.com/#/
Material-uiに則ったテーブルレイアウトを簡単に作成できるライブラリ。一部のカラムを編集できるデータの一覧表を実装したくて採用。

編集可能にしてみる

https://material-table.com/#/docs/features/editable
には「Row Editing」（行単位の一括編集）と「Cell Editing」（セル単位での編集）について記載があった。「Row Editing」の方は行の全カラムが編集可能になってしまい、編集可能にする必要のないカラムがあることから、「Cell Editing」の方かなと思い実装してみる。

const columnList = [
  { title: "ID", field: "id" },
  { title: "name", field: "name" },
  { title: "description", field: "description" },
];

const dataList = [
  { id: 1, name: "aaa", description: "xxxxxxxxxx" },
  { id: 2, name: "bbb", description: "yyyyyyyyyy" },
  { id: 3, name: "ccc", description: "zzzzzzzzzz" },
];

<MaterialTable
  columns={columnList}
  data={dataList}
  cellEditable={{
    onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
      return new Promise(() => {
        // do something
      });
    },
  }}
></MaterialTable>

結果、セル単位での編集にはなったものの、全セルが編集可能になってしまった。（ID列は編集させたくない）

一部のセルだけ編集可能にするには…

const columnList = [
  { title: "ID", field: "id", editable: "never" },
  { title: "name", field: "name" },
  { title: "description", field: "description" },
];

editable: "never"

をカラムの定義につけてあげると、そのカラムは編集不可になった。（ID列をクリックしても編集欄が表示されないけど、それ以外の列は編集可能）

参考になれば幸いです。