業務システムなどをWebベースで作っていると求められるのがリッチなグリッド機能です。ヘッダの固定、フィルタリング、チェック、カラムの順番変更、一回あたりのデータ表示件数変更…挙げれば実にきりがありません。 そこで使ってみたいのがag-Gridです。ほぼこれでニーズを満たせるのではないかというくらいリッチなグリッド機能を提供できます。

ag-Gridの使い方

デモです。大量のデータが表示されています。画像も表示できたり、レーティング表示なども行えます。

表示項目はチェックボックスで絞り込めます。

ソートだってできます。

さらにカラムの順番入れ替えも。

更新もできます。真偽値はチェックで表示されていました。

さらにカラーテーマの変更。

絞り込みもできます。

チェックボックスでデータを選択。

ag-Gridでは業務システム要件のあるあるを大抵カバーしていると思われます。大量のデータを表示してもさくさくと動きます。フレームワークも純粋なJavaScriptの他、React/AngularJS/Web Componentsをサポートしています。

ag-GridはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Javascript Datagrid ceolter/ag-grid: Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components