データの一覧表示はWebシステムの基本と言えます。そうした機能を作ると、どんどん要望が上がってくるのが常です。データを並べ替えたい、件数を絞りたい、チェックボックスをつけて一括更新したいなどなどです。そうした要望にすべて応えるのはリソースがいくらあっても足りません。
そこで多機能なグリッドを実現できるライブラリをまとめて紹介します。
ceolter/ag-grid: Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components
高機能なグリッドライブラリです。セルの中に画像を表示したり、レーティング表示もできます。表示項目をチェックボックスを使って絞り込んだり、ソート、カラムの入れ替えもできます。インラインでの編集もサポートされています。カラーテーマをサポートしているので自分たちのシステムに合わせたカラーリングが指定できます。
handsontable/handsontable: Handsontable Community Edition – a JavaScript/HTML5 Spreadsheet Library for Developers
大型なグリッドではなく、ページ内に埋め込める表計算といった体のライブラリです。ドロップダウンでの入力もサポートされています。行の削除やカラムの非表示指定も可能です。
Swirrl/grrid: Javascript grid control using Prototype.js
表計算風のUIを実現するライブラリです。セルの移動は矢印キーやエンターキーで行えます。表計算機能は提供されていないので注意してください。
Swirrl/grrid: Javascript grid control using Prototype.js
nnajm/orb: Pivot table javascript library
Web上でピボットテーブルが作れるライブラリです。カラムをドロップするとダイナミックに内容が変化します。さらにカラムを入れ子にでき、ドリルダウンしながら値の確認もできるようになっています。
nnajm/orb: Pivot table javascript library
rstaib/jquery-bootgrid: Nice, sleek and intuitive. A grid control especially designed for bootstrap.
Bootstrapの標準機能として提供されているテーブルをパワーアップしてくれるライブラリです。検索、フィルタリング、ページネーション、カラムの表示/非表示切り替えといった機能が提供されています。
rstaib/jquery-bootgrid: Nice, sleek and intuitive. A grid control especially designed for bootstrap.
paulhodel/jexcel: jExcel is is a very light jquery plugin to embed a spreadsheet, compatible with Excel, in your browser. You can load data straight to a jExcel table from a JS array, json or even a CSV file. You can copy and paste from or to Excel straight to a jExcel table. For live examples, please visit:
jExcelは編集もサポートしたWeb上に埋め込める表計算ライブラリです。入力フォーマットを指定したり、カレンダーを使った入力もサポートしています。データはCSVやJSONで出力できるようになっています。
mindmup/editable-table: tiny jQuery/Bootstrap widget that makes a HTML table editable
Editable TableもBootstrapのテーブルを強化します。機能としてはインラインでの編集機能を追加しますが、フッターなどの数字を編集に合わせてリアルタイムにアップデートしてくれます。
mindmup/editable-table: tiny jQuery/Bootstrap widget that makes a HTML table editable
いかがでしょうか。Bootstrapのテーブルを強化してくれるライブラリは手軽に使い始められそうです。それ以上の要望になってきたら、専用のライブラリに切り替えるのも良いでしょう。多くの要望はライブラリによって解決できるはずです。
これらのライブラリはWebブラウザ側だけで行っているのが特徴です。実際のデータ更新処理などは自分たちで実装する必要がありますので注意してください。
