AG Gridは、数万行の一覧表をWeb画面で並べ替え・絞り込み・編集できるようにするJavaScriptのデータグリッドです。ロンドンのAG Grid社が開発しており、2026年10月29日にnpm registryで確認した最新版は36.2.0（9月16日公開）でした。この記事では、Community版とEnterprise版の機能差、npmで入れて一覧画面を出すまでのコード、v33で変わったモジュール登録とテーマ指定、仮想スクロールの仕組みと行モデルの選び方、編集結果の保存処理、そしてEnterprise版を買うべき案件の条件までを扱います。業務システムの一覧画面を作る開発者と、その部品選定を任された担当者に向けた内容です。
まとめ：AG Gridを業務画面に採用する条件とEnterprise版を買うべき機能の境界
AG Gridが向くのは、数千〜10万行規模のデータを1画面で並べ替え・絞り込みし、必要なセルだけを直す一覧画面です。受注一覧、在庫照会、ログの検索画面が典型です。Community版はMITライセンスで、本番環境でも無償で使えます。並べ替え、列ごとのフィルター、列の固定、セル編集、元に戻す操作、CSV出力までは追加費用なしで揃います。
Enterprise版が必要になるのは、行のグループ化と集計、サーバー側で絞り込みと集計を済ませる行モデル、Excel形式での出力、範囲選択とクリップボード操作を使う場合です。この4つが要件に無いなら、Community版で始めて構いません。逆にExcelと同じ手つきで範囲を貼り付ける入力が主役なら、AG GridよりHandsontableの領分です。v32以前の記事のコードはモジュール登録とテーマ指定の書き方が違うため、そのままでは動きません。
AG Gridの定義と両版の機能範囲・36系のパッケージ構成
AG Gridは、行と列でデータを並べる表部品の総称「データグリッド」の代表格です。React・Angular・Vue向けのラッパーがあり、素のJavaScriptでも同じ設定で動きます。
一覧の閲覧と軽い編集を出発点とするAG GridとHandsontableの違い
同じデータグリッドという分類でも、設計の出発点には違いがあるのです。AG Gridは「大量の行を見せて、並べ替えや絞り込みで目的の行に早くたどり着く」ことを主目的に設計されています。表示中の範囲だけを描く仮想化と、サーバーから少しずつ行を取る仕組みが中心にあります。
一方のHandsontableは、Excelのような範囲選択・貼り付け・連続入力の再現を主目的にしています。AG GridのGitHubリポジトリのスター数は2026年10月29日時点で15,668件です。どちらが上という話ではなく、画面の主役が「探す」か「打ち込む」かで選びます。
Community版とEnterprise版の機能差を業務画面で使う順に並べた比較表
公式の比較ページでは、Community版は「本番利用を含めて誰でも無償、ライセンス不要」、Enterprise版は「本番利用にライセンスが必要」と書かれています。業務画面で使う頻度が高い順に整理しました。
| 機能 | Community | Enterprise |
|---|---|---|
| 並べ替え・列フィルター・ページ送り | 使える | 使える |
| セル編集と元に戻す操作 | 使える | 使える |
| CSV出力 | 使える | 使える |
| Excel形式の出力 | 使えない | 使える |
| 値の一覧から選ぶセットフィルター | 使えない | 使える |
| 範囲選択とクリップボード操作 | 使えない | 使える |
| 行のグループ化・集計・ピボット | 使えない | 使える |
| サーバー側行モデル・明細の展開表示 | 使えない | 使える |
CSV出力、Excel出力、セットフィルターの区分は料金ページの機能比較で確認しました。見落としやすいのは範囲選択とクリップボードです。Excelから複数行をまとめて貼る操作はEnterprise版の機能なので、要件定義で「Excelから貼れること」と書かれていたら、その時点で費用の話になります。
36.2.0時点のnpmパッケージ構成と配布ファイルのサイズ実測
npm registryでは、無償部分がag-grid-community（MIT）、有償部分がag-grid-enterprise（Commercial）として別パッケージになっています。Reactはag-grid-react、Angularはag-grid-angularで、いずれも本体と同じ36.2.0です。メジャー版は2024年12月の33.0.0から半年ごとに上がっており、36.0.0は2026年6月24日の公開でした。
サイズは軽くありません。jsDelivrから取得したag-grid-community.min.jsは2,058,454バイトで、gzip圧縮後も約523KBでした。Enterprise版を含むag-grid-enterprise.min.jsは約925KBです。全機能を読み込むと初期表示が重くなるため、一覧画面のルートだけで読み込むよう、コードを分割してください。
npmでAG Grid 36系を入れて一覧画面を表示するまでのv33以降の導入手順
受注一覧を例に、表示から編集までのコードを示します。バンドラにはViteを想定しています。
インストールとモジュール登録・themeQuartz指定で一覧を出す最小コード
公式のGetting Startedに沿って、npmで本体を入れます。
npm install ag-grid-community@36表を置く要素には高さを指定します。グリッドは親要素の大きさに合わせて描画されるためです。
// main.js：受注一覧（index.html に <div id="orders" style="height: 480px"></div> を置く）
import { AllCommunityModule, ModuleRegistry, createGrid, themeQuartz } from 'ag-grid-community';
ModuleRegistry.registerModules([AllCommunityModule]);
const rowData = [
{ id: 5001, code: 'A-001', name: '六角ボルトM8', qty: 120, status: '受付' },
{ id: 5002, code: 'A-002', name: '平ワッシャーM8', qty: 240, status: '手配中' },
{ id: 5003, code: 'B-010', name: '結束バンド200mm', qty: 50, status: '出荷済' },
];
const gridApi = createGrid(document.querySelector('#orders'), {
theme: themeQuartz,
rowData,
columnDefs: [
{ field: 'code', headerName: '品番', pinned: 'left', width: 110 },
{ field: 'name', headerName: '品名', flex: 1, filter: true },
{ field: 'qty', headerName: '数量', editable: true, cellEditor: 'agNumberCellEditor', filter: 'agNumberColumnFilter' },
{
field: 'status', headerName: '状態', editable: true,
cellEditor: 'agSelectCellEditor',
cellEditorParams: { values: ['受付', '手配中', '出荷済'] },
},
],
getRowId: (params) => String(params.data.id),
undoRedoCellEditing: true,
pagination: true,
paginationPageSize: 100,
});品番列はpinned: 'left'で左に固定し、横に送っても見えるようにしています。undoRedoCellEditingを付けると、Ctrl+Zで編集を取り消せます。getRowIdは後の章で使う差分更新の前提になるので、最初から付けておくと手戻りがありません。
v32以前の記事のコードが動かない原因はモジュール登録とCSSテーマ
日本語の解説記事には、v32以前の書き方が多く残っています。違いは2点です。
1点目はモジュール登録です。Modulesのページによると、AllCommunityModuleやAllEnterpriseModuleをまとめて登録すると、v33より前のパッケージ版と同じ動作になる仕組みです。登録を忘れると機能が使えず、コンソールにはエラー番号とドキュメントへのリンクだけが出ます。原因が分かりにくいので、開発ビルドではValidationModuleで詳しい検証を有効にしておくと調査にかかる時間を短くできるためです。バンドルを小さくしたい場合は、ClientSideRowModelModuleやTextFilterModuleなど必要なものだけを並べます。
2点目はテーマです。v32まではCSSファイルを読み込み、親要素にag-theme-alpineのようなクラスを付けていました。36.2.0の型定義ではthemeの既定値がthemeQuartzで、組み込みテーマはthemeQuartz・themeBalham・themeMaterial・themeAlpineの4種類です。古いCSSのまま移行したい場合だけ、theme: 'legacy'でv32の方式に戻せます。npmにはv32-ltsタグで32.3.9が残っていますが、新規案件で選ぶ理由はありません。
ReactではAgGridProviderでモジュールを渡す35.1以降の書き方
React版のGetting Startedは、AgGridProviderのmodulesにモジュールを渡す形に変わっています。npmの型定義を版ごとに確かめると、この部品は35.0.0には無く、35.1.0（2026年2月11日）から入っていました。
// OrderGrid.jsx（npm install ag-grid-react で ag-grid-community も入る）
import { AllCommunityModule } from 'ag-grid-community';
import { AgGridProvider, AgGridReact } from 'ag-grid-react';
const modules = [AllCommunityModule];
const colDefs = [{ field: 'code' }, { field: 'name' }, { field: 'qty', editable: true }];
export function OrderGrid({ rows }) {
return (
<AgGridProvider modules={modules}>
<div style={{ height: 480 }}>
<AgGridReact rowData={rows} columnDefs={colDefs} getRowId={(p) => String(p.data.id)} />
</div>
</AgGridProvider>
);
}colDefsをコンポーネントの外に置いているのは、描画のたびに列定義が作り直されて列の状態がリセットされるのを避けるためです。ag-grid-react 36.2.0はReact 16.8〜19に対応しています。社内の標準フレームワークがまだ決まっていない場合は、ReactとVue 3の違いを先に整理しておくと、ラッパー選びで迷いません。
仮想スクロールの仕組みと大量行の一覧で詰まる箇所・行モデルの選び方
AG Gridを選ぶ理由の多くは大量行の扱いです。ただし設定を誤ると、仮想化が効かずに画面が固まります。
行と列の仮想化・rowBuffer既定10行と高さ未指定で起きる500行の上限
DOM Virtualisationのページによると、グリッドは画面に見えている行と列だけを描画します。スクロールに合わせて必要なセルを足し、見えなくなったセルを捨てる仕組みです。表示範囲の前後には、rowBufferの既定値である10行ずつを余分に描いておきます。
詰まりやすいのは高さの指定漏れです。親要素に高さが無いと、グリッドは全行を描こうとします。公式は「ブラウザがクラッシュしうる」として、安全策で描画行数を最大500行に制限しています。一覧の途中から先が出ないときは、まずこの制限に該当するかを確認してください。suppressMaxRenderedRowRestrictionで上限を外す前に、親要素の高さを確認してください。
10万行までのClient-Sideとサーバーから取るInfiniteを分ける基準
Row Modelsのページでは、行モデルがClient-Side・Server-Side・Infinite・Viewportの4種類に分かれています。Community版で使えるのはClient-SideとInfiniteです。公式は「迷ったらClient-Side」とし、10万行以上も扱えると説明しています。
判断の目安は転送量です。全件をJSONで送っても数MBに収まり、ブラウザ側で並べ替えたいならClient-Sideにします。数十万行以上ある、または権限で見える行がサーバー側でしか決まらないなら、Infinite Row Modelで必要な範囲だけを取ります。
// サーバーから100行ずつ取得する（並べ替えと絞り込みはサーバー側で処理する）
const gridApi = createGrid(document.querySelector('#logs'), {
theme: themeQuartz,
rowModelType: 'infinite',
cacheBlockSize: 100,
getRowId: (params) => String(params.data.id),
columnDefs: [{ field: 'loggedAt', sortable: true }, { field: 'user' }, { field: 'action' }],
datasource: {
getRows: async (params) => {
const sort = params.sortModel[0];
const query = 'offset=' + params.startRow
+ '&limit=' + (params.endRow - params.startRow)
+ (sort ? '&sort=' + sort.colId + '&order=' + sort.sort : '');
try {
const res = await fetch('/api/logs?' + query);
const { rows, total } = await res.json();
params.successCallback(rows, total); // total が不明なら -1 を渡す
} catch (e) {
params.failCallback();
}
},
},
});Infiniteでは行のグループ化と集計が使えず、並べ替えと絞り込みはサーバー側の実装になります。successCallbackかfailCallbackのどちらかを必ず1回呼ぶ決まりもあり、例外時に何も呼ばないと読み込み中の表示が残り続けます。オフセット方式は深いページほどSQLが遅くなるため、10万行を超えるならページネーション設計のオフセットとカーソルの選び分けも合わせて検討してください。
getRowIdとapplyTransactionによる差分更新と全件再描画の回避
一覧を定期的に最新化する画面では、rowDataを丸ごと差し替えると、選択状態やスクロール位置が飛びやすくなります。Transactionのページのとおり、変わった行だけをapplyTransactionで渡します。
// 30秒ごとに差分を取得し、追加・更新・削除だけを反映する
setInterval(async () => {
const res = await fetch('/api/orders/changes?since=' + lastSyncedAt);
const { added, updated, removedIds, syncedAt } = await res.json();
gridApi.applyTransaction({
add: added,
update: updated,
remove: removedIds.map((id) => ({ id })),
});
lastSyncedAt = syncedAt;
}, 30000);行IDが無いと、グリッドはオブジェクトの参照で行を照合します。公式はこの方式が数千行を超えると遅くなると説明しています。Row IDsのページにあるとおり、getRowIdは同じ行に常に同じ文字列を返す関数にしてください。数値のIDはString()で文字列にします。
セル編集の保存処理と列操作でAG Gridの業務画面に必要な仕上げ
一覧が出たあとに工数がかかるのは、編集の保存と、利用者ごとの列の使い勝手です。
cellValueChangedで変更を受け取りサーバー保存と失敗時に戻す処理
Cell Editingのページのとおり、列定義にeditable: trueを付けると編集できます。変更はcellValueChangedイベントで受け取ります。
// 変更されたセルを1件ずつ保存し、失敗したら元の値に戻す
gridApi.addEventListener('cellValueChanged', async (event) => {
if (event.source === 'rollback' || event.oldValue === event.newValue) return;
const field = event.colDef.field;
const res = await fetch('/api/orders/' + event.data.id, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ [field]: event.newValue }),
});
if (!res.ok) {
event.node.setDataValue(field, event.oldValue, 'rollback');
}
});イベントには行データそのもの（event.data）が入るため、並べ替えや絞り込みの後でも保存先の行を取り違えません。setDataValueの第3引数で変更元を'rollback'と名付け、戻した変更を再び保存することがないようにした実装です。変更元にはedit・paste・undoなどが入るので、元に戻す操作も同じ経路で保存されます。受け口をSpring Bootで作るなら、Spring BootとReactの連携方法のREST APIとCORSの章がそのまま当てはまります。
列の並べ替え・固定・幅変更とCSV出力がCommunity版で揃う列操作
列の操作はCommunity版でほぼ揃います。見出しのドラッグで列順を変える、pinnedで左右に固定する、境界をドラッグして幅を変える、gridApi.exportDataAsCsv()で表示中の内容をCSVにする、といった操作です。
利用者が並べ替えた列順や幅は、再読み込みすると初期状態に戻ります。gridApi.getColumnState()で状態を取り出してサーバーかlocalStorageに保存し、次回の起動時にapplyColumnState()で戻すと、Excelで自分用に整えた画面に近い使い勝手になります。この保存は利用者単位で持つので、画面の設計段階で保存先を決めておいてください。
Enterprise版・Community版・Handsontableの案件別採用基準
ここまでの機能と費用を踏まえ、どの版を選ぶか、どの案件でAG Grid自体を見送るかを条件で切り分けます。
Enterprise版が要るのはグループ集計とサーバー側行モデルとExcel出力の画面
購入を勧めるのは、次のどれかが要件に入る画面です。1つ目は、部門別・月別に行をまとめて小計を出すグループ化と集計。2つ目は、全件をブラウザに送れない規模のデータをサーバー側で絞り込みと集計まで済ませるServer-Side Row Modelで、公式もEnterprise利用者にはInfiniteよりこちらを勧めています。3つ目は、書式付きのExcelファイルでの出力です。4つ目は、Excelから範囲を貼り付ける入力です。
これらを自作すると、集計とグループの開閉、出力の書式だけで実装とテストの工数がかさみ、ライセンス費を上回りやすくなります。CSV出力で足りる、集計はサーバー側のSQLで済ませる、という画面ならCommunity版で十分です。
本番は購入キー必須・永続ライセンスに1年分の更新が付くライセンス条件
License Installのページによると、Enterprise版はローカル環境ならライセンス無しで試せます。本番ではウォーターマークとコンソールの警告が出るため、購入したキーをag-grid-enterpriseのLicenseManager.setLicenseKey()で起動時に設定します。
料金ページでは、1〜10人の開発者分をオンラインで構成すると価格が表示される形式です。ライセンスは永続で、1年分の更新が含まれます。顧客向けに外部公開するアプリケーションは、チームの規模によらず営業への問い合わせになります。社内システムか外部向けかで見積もりの経路が変わるため、予算確保は要件定義の段階に置いてください。Community版のMITと有償版の違いを整理したい場合はオープンソースライセンスの主要9種と商用利用の可否が前提知識になります。
見送る場面はExcel同等の入力・数百行の静的一覧・描画を自前で持ちたい画面
AG Gridを選ばないのは次の3場面です。Excelと同じ範囲貼り付けや連続入力が作業の中心なら、無償版では範囲選択が使えないため、最初から表編集に強いHandsontableを比べてください。数百行を並べるだけの一覧なら、約523KBを読み込むより、HTMLの表とサーバー側のページ送りで足ります。デザインの自由度を優先して見た目を一から作りたい画面は、描画を持たないヘッドレス型のTanStack Tableが候補です。
表の部品を決めても、権限ごとの編集可否、同時編集の排他、変更履歴の記録はグリッドの外側の仕事です。一覧画面の操作感と、裏側の権限・排他・監査ログを一体で設計する場合は、業務用・Webアプリ開発として要件の段階から相談いただけます。
よくある質問：AG Gridの無料利用・React導入・Excel出力・代替ライブラリ
AG Gridの導入検討でよく出る質問に、2026年10月29日時点の公式情報をもとに答えます。
AG Gridは商用の業務システムでも無料で使えますか？
Community版なら使えます。ag-grid-communityはMITライセンスで、公式も本番利用を含めて無償、ライセンス不要としています。社内システムでも顧客向けサービスでも同じです。有償になるのはag-grid-enterpriseの機能を本番で使う場合で、グループ化と集計、Excel出力、範囲選択などが該当します。ローカルでの試用は無償です。
ReactでAG Gridを使うときに必要なパッケージは何ですか？
ag-grid-reactを入れます。依存としてag-grid-communityも入ります。35.1.0以降はAgGridProviderのmodulesにAllCommunityModuleなどを渡し、その中にAgGridReactを置く書き方が公式の手順です。古い記事にあるCSSファイルの読み込みやクラス名でのテーマ指定は、v33以降は既定の方式ではありません。
AG GridでExcelファイルを出力できますか？
書式付きのExcel形式（xlsx）での出力はEnterprise版の機能です。Community版でもexportDataAsCsv()でCSVは出力でき、Excelで開くこと自体はできます。セルの色や列幅、複数シートまで持たせたいならEnterprise版を買うか、サーバー側で帳票を生成する方式を選んでください。
何行までのデータなら快適に表示できますか？
画面に見えている行だけを描く仮想化があるため、表示の重さを左右するのは、総行数よりも列数と1セルの描画処理です。公式はClient-Side Row Modelで10万行以上も扱えると説明しています。それ以上の件数や、全件をブラウザに送れないデータは、Infinite Row Modelでサーバーから100行ずつ取る構成にします。親要素に高さを付け忘れると仮想化が効かないので注意してください。
無料で使えるAG Gridの代替ライブラリはありますか？
用途によって選べます。依存の少ない軽い一覧ならTabulator（MIT）、描画を自分で書きたいならTanStack Table（MIT）、Excel風の入力が中心ならJspreadsheet CE（MIT）が候補です。ただし、仮想化・列フィルター・列の固定・編集が1つの設定体系で揃う点では、AG Grid Communityが無償の選択肢のなかで先行しています。サーバーとの通信やキャッシュを整理したい場合はTanStack Queryと組み合わせる構成もあります。
関連記事
- Handsontableとは：18系の導入コードと保存処理・商用ライセンスで迷わない採用判断：Excel風の入力が主役の画面で比べる表編集ライブラリです
- 業務アプリとは？業務システムとの違い・作り方3通りと内製と外注の判断基準：一覧画面を組み込む業務アプリ全体の作り方を選ぶ前提です
- ページネーション設計とは？オフセットとカーソルの選び分けと実装を解説：Infinite Row Modelの受け口となるAPI設計に役立ちます
- オープンソースライセンスとは？主要9種の商用利用可否と義務を条項番号で解説：Community版のMITと有償版の違いを確認できます
- ReactとVue 3の違いを比較｜どっちを選ぶべきか【React 19.3・Vue 3.5対応】：ラッパー選びの手前にあるフレームワーク選定です
