こんにちは、React でテーブルライブラリは使ってますでしょうか。
私の現場では UIコンポーネントに Material UI(v4) を使っていることもあって material-table を使用しています。
よく使う機能は網羅されていて使いやすいのですが、不具合も残る中あまりメンテされておらず
Material UI V5、React V18 対応等を考えると、不安要素もあり打開策を考えたいところです。
とはいっても、管理画面の中でもコアな機能で、簡単にUIを変えることは難しいし、中途半端なものに乗り換える事もできません。
自分達で作ってみる？
material-table は多機能ですが、そもそも使用していない機能もいくつかあります。
面倒な実装も TanStack Table の useReactTable を使えば多くは省けそうです。
ドキュメントやデモが豊富なのも助かる。
せっかくなら material-table では少し頼りなかったデータ構造や型、拡張性等も自分たちに使いやすく作り込んで行きたいところです。
管理画面向けなので、おしゃれさは必要なく なんとか作ることはできそう。たぶん。
別のライブラリも考えてみる
Material UI × Table 関連の npm trends
@mui/x-data-grid
トレンドでは群を抜いてますね。
公式から出てる安心感と機能面も豊富で管理画面で使う分には十分物足りそうです。
一つだけ難点が、material-table にある グルーピング 機能がないところです。
有料版だとUIは違うものの同等の機能があるみたいですが、、
グルーピング機能が外せないことも簡単に乗り換えられない理由の一つなので見送っちゃってます
material-react-table
トレンドでは一番下の棒です。
安定版のファーストリリースが 2022年9月 と新しいライブラリで、
TanStack Table V8 と Material UI V5 で構築された、パフォーマンスや軽量化、スタイルの拡張性等を売りにしてるみたいです。
material-table と同等の機能もほとんどサポートしてます。
リファレンス内でも使われていたりしてテーブル愛を感じますね。
今の所マイナーバージョンのリリースが頻繁に行われていて、よく見ると少しずつ伸びているので3、4番手には追いつくのはそう遠くないのでは？
その他
material-react-table に分かりやすい比較ページがありました
https://www.material-react-table.com/#let's-compare
まとめ
結論は出ていません。
自分で作るにしても実装やメンテの手間もあるし、出来ることならOSSに頼りたい気持ちが強いです。
material-react-table は気になるところですが、material-table の二の舞にならないためにも、
今後もメンテが続いて安心して使用できるかの判断は慎重になってしまいます、、
ライブラリ問題以前に、material-table 前提な作りになってるところもあるので、まずは自分の書いたコードの見直からしていきたいと思います。
皆さんのテーブル事情やご意見もいただけると嬉しいです。参考にさせていただきます🙏