MUIのDataGridでshowCellRightBorderを使うとエラーが出る。対処法。

はじめに

DataGridを使っていて、セルにBorderを適用させたかったのですが、用意されていたプロパティ「showCellRightBorder」を設定しても割り当てられないとエラーが発生してしまいます。

<DataGrid rows={rows} columns={columns}
  showCellRightBorder={true}
/>

上記のように設定しています。
DataGridのPro版限定なのか？とか調べてみましたが、そういうわけでもなく。

見落としていました。。
結論：x-data-gridのバージョンで指定方法が変わった。

対処法

package.jsonで@mui/x-data-gridのバージョンを確認します。
私は、6系を使っていました。
6系から、showCellRightBorderやshowCellLeftBorderというプロパティが消えて、
代わりに、showCellVerticalBorderというプロパティが追加されました。

<DataGrid rows={rows} columns={columns}
  showCellVerticalBorder
/>

上のように指定をしてあげれば、セルに線をつけることができます。

参考

MUI X Data Grid (６系)

DataGrid API(5系)

DataGrid API (4系)

おわりに

まだ、最近の記事ですら、5系や4系の紹介されているのに、7系のbeta版もリリースしているので定期的に見直してが必要ですね。また、記事を頼るのもよいですが、バージョンや用法を把握するためにもリファレンスをしっかり読みたいですね。