最近現場でAG Grid をよく利用しているので備忘録的にまとめてみます。
1. AG Gridとは？
AG Gridは、JavaScriptで動作する高機能データグリッドライブラリです。
単純なデータ表示だけでなく、ブラウザ上でExcelのような操作を実現することを目的として設計されているらしい。数万件、数十万件といった大規模なデータを扱う業務システムにおいては導入されている現場も多いみたいです。
対応フレームワーク
AG Gridはフレームワークを選ばないのも大きな強みですね。
・JavaScript (Vanilla)
・React
・Angular
・Vue.js
・SolidJS
2. AG Gridのすごいところ
① 圧倒的なパフォーマンス
10万行、100万行といった膨大なデータでも、仮想スクロール（表示されている部分だけをレンダリングする技術）により、重くならず滑らかに動作可能。
② 驚くほど多機能
標準機能だけで、以下のような操作が可能です。
カラムの入れ替え: ドラッグ＆ドロップで列順を変更。
高度なフィルタ: テキスト、数値、日付の絞り込み。
インライン編集: セルを直接書き換え。
アクセシビリティ: キーボード操作への完全対応。
③ カスタマイズの自由度
「特定のセルだけ色を変えたい」「セルの中にボタンを置きたい」といった要望も、カスタムコンポーネントを作成することで柔軟に実現可能。
3. Community版(無料) と Enterprise版(有料) が存在する
AG Gridには無料版と有料版があるので自分の要件がどちらのバージョンで実現可能なのかは要確認です。
4. まとめ
以上簡単にまとめてみました。今度の記事ではまた備忘録的にはなりますが導入方法をまとめようと思います。