2023.03.03 2023.06.01

React で複雑な表を表現するためのライブラリ

sekky

go でバックエンド開発をしていたと思ったら react でフロントエンド開発に携わっていた sekky です。
モダンな技術に触れたい想いの実現が想像以上に加速して勉強が追いつかない程ですが、日々楽しく開発しています。
今回は、複雑な表を作成するにあたって検討したライブラリをいくつかご紹介しようと思います。

Contents

表をどのように表示するか？

表を表示するだけにしても様々なパターンがあることから、どのような表示を行いたいかの要件を確認する必要があります。

デザインはどのような形とするか？
データ量は大量か？大量の場合はページングを行うか？無限スクロールとするか？
表に対する操作はあるか？（ドラッグ＆ドロップによる行の並べ替え、行やセルの選択など）
行列やフッタの固定は必要か？
ソート、フィルタ機能は必要か？
内容の編集は必要か？

上記以外にも表形式の描画の中で表現したい要件は多数あり、数々のライブラリの機能を比較して適したものを選択、もしくは、要件に適したものがない場合は作り込みによって実現していく流れとなります。

検討したライブラリ

今回は MUI を利用する前提で、なるべく無償のライブラリを狙って調査したものからいくつかご紹介しようと思います。
それぞれのライブラリが持つ機能は多岐に渡るため各ライブラリの機能の列挙はしませんが、機能を限定した軽量なものから、多くの機能を備えたリッチなものまで様々なライブラリがありました。

react-virtualized

仮想化（表示範囲のみレンダリングし、大量データを高速に表示できるようにすること）に特化したライブラリです。
古くから存在するライブラリかつ MIT で利用可能であり、仮想化に特化しているため軽量ですが、他の複雑な機能を盛り込もうとすると独自に実装することになります。

非常に多くの機能を持つコンポーネントライブラリです。デザインライブラリである MUI を前提としており、出来合えのデザインで外観の要件を満たせる場合は導入することで多くの機能を利用できます。
反面、機能の一部が有償の Pro 版や Premium 版のみ利用可能であることと、操作を伴う機能の表示上の振る舞いについてカスタマイズが必要となった場合に、ライブラリで提供されるコンポーネントを解析し、実現可能かどうかを判断する必要があります。

Material React Table

非常に多くの機能を持つコンポーネントライブラリです。2022 年に登場した比較的新しいライブラリで、GitHub の Star 数は 2023 年 2 月時点で 500 程であることと、頻繁にリリースされていることから現在も精力的に開発されているライブラリのようです。
こちらも名前の通り MUI を前提としており、MUI X Pro や Premium で提供される機能も MIT ライセンスの範疇で利用可能となります。
高度な機能も無償で利用可能である反面、体感ですが仮想化のレンダリング遅延が他のライブラリと比べて大きく、また、MUI X Data Grid 同様、要件によっては外観のカスタマイズが行き届かない可能性があります。

@tanstack/table (旧 react-table)

多くの機能を持ちつつ、「ヘッドレス」 UI ライブラリを謳っており、UI コンポーネントではなく機能の部分だけ提供されるライブラリとなります。UI 部分を独自に実装する必要がありますが、前述のライブラリで対応できないような UI 面のカスタマイズに対応できるため、柔軟性が非常に高いライブラリとなります。
また、@tanstackが提供する他のライブラリと組み合わせることで仮想化や無限ローディングなどの機能にも対応可能となり、実装においてはライブラリを利用した UI 面を中心に作り込めば良く、高度な機能はライブラリ任せとすることができます。
前述のライブラリで対応し切れないようなカスタマイズも、作り込むことで対応することができます。