AG Grid の行のグループ化、集計、ツリーデータ、マスター/ディテール、Excel エクスポートは Enterprise の機能です。本番環境で使うには商用ライセンスが必要で、ライセンスキーがないと、グリッドに透かしが表示され、コンソールにエラーが出力されます。Needless UI のデータグリッドは、集計付きのグループ化、ツリーデータ、行の詳細、.xlsx エクスポートを MIT ライセンスで提供しています。このガイドでは、Angular アプリを AG Grid から Needless UI へ移行します。そのまま移せるもの、移せないもの、コードがどう変わるかを順に見ていきます。
AG Grid 36 の名前を使います。AG Grid 36 は Angular 20 から 22 に対応していますが、Needless UI には Angular 22 が必要です。
機能の比較
| 機能 | AG Grid | Needless UI |
|---|---|---|
| 行のグループ化（集計値と集計行付き） | Enterprise | 対応：複数階層。合計、平均、最小値、最大値、件数、または関数で集計 |
| ツリーデータ | Enterprise | 対応：入れ子の行から表示 |
| 行の下の詳細（マスター/ディテール） | Enterprise | 対応：行の下に任意のテンプレート（別のグリッドも可） |
| Excel エクスポート | Enterprise：スタイル、複数シート、画像、数式 | 対応：型付きセルのシート1枚。数値書式と、フィルター付きの固定ヘッダー行 |
| 列選択ツール付きの列メニュー | Enterprise | 対応：各列の並べ替え、絞り込み、固定、移動、幅の自動調整、非表示と、全列の一括表示・非表示 |
| 複数列での並べ替え、クイック検索、ページング、行の選択 | Community | 対応 |
| 列フィルター | Community：条件は2つまで（AND または OR で結合） | 列ごとに条件1つ |
| セットフィルター、マルチフィルター、高度なフィルター | Enterprise | 一部対応：列の選択肢から作るチェックリスト（データ内の値からではない） |
| 列のリサイズ、移動、固定、非表示と、その状態の保存 | Community | 対応 |
| 仮想スクロール | Community：行と列 | 行のみ |
| セルの編集 | Community（一部のエディターは Enterprise） | 対応：列の型に応じた編集と検証（カスタムエディターと元に戻す操作はなし） |
| ピボット、統合チャート | Enterprise | 非対応 |
| クリップボード、セル範囲の選択、コンテキストメニュー、ステータスバー、サイドバー | Enterprise | 非対応 |
| サーバーのデータ | サーバーサイド行モデルは Enterprise、ブロック単位の読み込みは Community | サーバーからページ単位で取得し、並べ替え、フィルター、検索もサーバー側で処理（サーバー側でのグループ化は非対応） |
| 列グループ、行のドラッグ、固定行 | Community | 非対応 |
| フレームワーク | React、Angular 20〜22、Vue、素の JavaScript | Angular 22 と React 19 |
対応関係
| AG Grid | Needless UI のグリッド |
|---|---|
<ag-grid-angular>、モジュールの登録、LicenseManager.setLicenseKey() | <nui-grid>（登録するものもキーも不要） |
rowData、columnDefs | [(rows)]、[columns] |
field、headerName | id、header |
valueGetter、valueFormatter、cellDataType | value、format（Intl のオプションまたは関数）、type |
cellRenderer | nuiGridCell テンプレート |
pinned: 'left'、hide | pinned: 'start'、hidden |
列の rowGroup、groupDefaultExpanded | [(groupBy)]：列 id のリスト。グループは最初から開いており、[(collapsed)] で閉じる。 |
aggFunc、grandTotalRow | aggregate、totals |
treeData（treeDataChildrenField を指定） | children: (row) => row.children |
masterDetail、detailCellRenderer | nuiGridDetail テンプレートと [(details)] |
quickFilterText | [(search)] |
rowSelection、getSelectedRows() | selection と [(selected)]（選択された行のキー） |
pagination、paginationPageSize | [(pageSize)]、[(page)]、pageSizes |
getColumnState()、applyColumnState() | [(columnState)] |
exportDataAsExcel()、exportDataAsCsv() | exportXlsx() は Blob を、exportCsv() はテキストを返す |
cellValueChanged、rowDoubleClicked | (cellEdit)、(rowActivate) |
rowModelType: 'serverSide' | mode="server"、total、(queryChange) |
localeText、enableRtl | labels（右から左への表示は、ページの dir に従う） |
国別にグループ化した注文を両方で作る
作るのは、注文を国別にグループ化した一覧です。国ごとの合計と全体の合計を表示し、Excel エクスポート、クイック検索、複数選択にも対応させます。グループ化、集計、Excel エクスポートに Enterprise が必要な AG Grid 36 では次のようになります。
Needless UI のグリッドでは次のようになります。
動作が異なる点がいくつかあります。選択が保持するのは行の id であるキーなので、データが新しくなっても選択は残ります。行そのものが必要なときは、キーから行を引き当ててください。グループは最初から開いています。グループのラベルは表示中の最初の列に入り、検索は表示中の列だけを対象にするため、グループ化した列の値も検索で一致させたい場合は、その列を表示したままにしてください。また、exportXlsx() はファイルをダウンロードせずに返します。中身は、絞り込みと並べ替えを適用した行を収めたシート1枚で、グループ行は含まれません。
足りない機能が必要なら
アプリがピボット、チャート、クリップボードと範囲選択、サーバー側でのグループ化、列グループに頼っている場合、Needless UI のグリッドはまだ AG Grid の代わりになりません。必要な機能は Issue を作成してお知らせください。それ以外については、データグリッドのページにすべての入力、出力、例が載っています。