【小ネタ】Reactのmaterial-tableで特定の行のみを編集可能とする

material-tableを使って特定の行のみを編集可能としたくて試していたがある罠にはまって中々できなかった。
同じような罠にはまる人がいるか分からないが一応記録として残しておきます。

material-tableとは

Reactで使えるMaterial-UIをベースとしたデータテーブルコンポーネントとしてmaterial-tableというOSSがあります。 material-tableを使うことにより、Reactの標準のデータテーブルコンポーネントよりもフィルター、検索、ソートなどのテーブル機能を拡張することができます。

特定の行のみを編集可能とする

参考にした記事が特定の列を編集可能にする記事だったので、
私は特定の行を編集可能とする方法を調べていました。

特定の行を編集可能とするには、以下からisEditableを使えばいいんだなと分かり早速試してみました。
https://material-table.com/#/docs/features/editable

isEditableを試してみる

上のページのExamplesからすぐ試せるので試してみてください。

以下の追加箇所の行を追加してみます。

// 省略
    <MaterialTable
      title="Editable Preview"
      columns={columns}
      data={data}
      editable={{
        isEditable: rowData => rowData.birthYear === 2017, // 追加箇所
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              setData([...data, newData]);
              
              resolve();
            }, 1000)
          }),
// 省略

1行目はペンマークから編集できなくなり、
2行目はペンマークから編集できるままとなりました。

実際に実装してみるとうまくいかなかった

例でもうまく動いたし意気揚々と実際に実装してみたところ、全行編集可能なままでうまくいきませんでした。
これは結論から言うと自分が使っているパッケージのバージョンだとisEditableが使えないバージョンだったようです。

パッケージのバージョンを上げたらちゃんと特定の行のみを編集可能とするようにできました。

まとめ

結局パッケージのバージョンが足りないということに中々気づくことができなかったが、うまくいかないときの原因の1つとしてバージョンで直った機能を確認するという教訓を得ました。