JavaScriptのGridライブラリの機能比較とまとめ

JavaScript の Grid ライブラリも最近また進化してきて、比較する必要性が出てきたので、まとめてみました。 このページでの選択基準は、私が使いたかった機能の機能性、ロード速度、スマホ対応、更新頻度です。

機能面で私が必要としているのは、最低限は外部ファイル読み込みとソート機能です。ないものは評価対象外です。 キーボード操作、カラム選択、カラム範囲選択、フィルタリング、列フィルタリングはどうしても欲しい。 カラム選択は項目毎にクリックせず複数選択可能なら◎、選択に手間が掛かるなら○、選択機能がなければ×です。 フィルタリングは全体検索ができるかどうかと使いやすさで評価を多少変えています。 列フィルタリングは数値で範囲検索ができれば◎、一致検索しかできなければ△、機能がなければ×です。APIはあってもUIやサンプルがなければ×にしています。

スマホ対応に関しては、水平スクロール対応と、UI の対応しやすさが重要だと思います。 グリッドは表示幅が広くなりやすいので、水平スクロールができると表示サイズの調整がしやすいです。 スマホ対応の評価は独断と偏見ですが、実装面や機能面で課題があると思ったら評価を下げています。 ライブラリの更新は頻繁に行われるほうがバグ遭遇時に対応しやすいので考慮に入れました。

ライブラリ数がかなり多いので、高機能で良さそうなものだけまとめてみました。

名称	読込 速度	キー 操作	選択	範囲 選択	全体 検索	列検索	水平 移動	スマホ 対応	更新 頻度	備考
Angular UI Grid	◎？	◎	◎	◎	◎	◎	◎	◎	◎
ag-grid	◎？	◎	◎	◎	◎	◎	◎	◎	◎	一部有料
Handsontable (有料)	◎	◎	◎	◎	◎	◎	◎	◎	◎
jQWidgets	？	◎	◎	◎	◎	◎	◎	○	○	商用有料
IgniteUI Grid	？	◎	◎	◎	◎	◎	？	？	○	有料
jqGrid, Guriddo	◎？	○	○	○	◎	◎	◎	○	○	商用有料
w2ui Grid (1.4.x)	◎	◎	◎	◎	◎	○	×	○	△
w2ui Grid (1.5rc)	○	◎	◎	◎	◎	○	◎	○	△
Handsontable (無料)	◎	◎	◎	◎	×	×	◎	◎	◎
SlickGrid	◎	◎	◎	◎	◎	△	◎	？	◎	実装難解
React Data Grid	◎？	○	○	○	○	△	◎	◎	○
DataTables	○	×	◎	△	◎	×	◎	◎	◎
TreeGrid	？	◎	○	○	○	△	？	？	○	ほぼ有料
dhtmlGrid	◎	◎	○	○	○	△	◎	◎	○	商用有料
dgrid	？	◎	◎	◎	○	×	◎	？	○
jsGrid	？	○	○	×	○	△	？	？	○
FancyGrid	？	×	○	○	◎	△	？	？	◎	商用有料
gripple-react	◎？	×	×	×	○	×	×	△	○
FooTable	△？	×	×	×	◎	△	×	◎	○	商用有料

気付けば良いライブラリが凄く増えてますね。機能要件を重視した分類表なので鵜呑みにはせず、利用用途に応じて選択するのが良いと思います。

参考文献:

• 13 Best JavaScript Data Grid Libraries
• JavaScriptのGridライブラリ決定版 - SlickGrid
• JjQueryでData Table, Grid 操作が出来るライブラリ(2015-03時点)
• Javascript　グリッドの紹介
• 業務システムに組み込める表計算ライブラリまとめ
• 業務システムで使えるグリッドライブラリ×8選
• テーブルタグをもっと便利にしてくれるJavaScriptライブラリまとめ

追記: 最近は、Tabulator というライブラリも出てきました。