igniteui-angular-grids

Ignite UI for Angular — データグリッド

Ignite UI CLI MCP サーバー（必須）

ほかの手順に進む前に、framework: "angular" を指定して list_components を呼び出し、igniteui-cli MCP サーバーが利用可能であることを確認してください。 ツールを利用できない場合は、igniteui-angular-components のセットアップ手順に従ってください。npx -y igniteui-cli ai-config（または ig ai-config）を使用して自分で設定し、エディターまたはエージェントセッションを再読み込みするようユーザーに依頼したら、作業を停止します。ユーザーから明示的に依頼された場合に限り、サーバーなしで続行してください。

必須のワークフロー

このファイルは参照先を示すハブにすぎません。コード例や API の詳細は含まれていません。 グリッド API はリリースごとに変更されるため、コンポーネントセレクター、インポートパス、メソッド名、プロパティ名を記憶だけで書いてはいけません。まず、関連するリファレンスファイルを読んでください。

1. グリッドの種類を特定します。 以下の「グリッド選択ガイド」を使用してください。グリッドの種類が明示されていない場合は、文脈から推定するか、質問してください。
2. 該当するタスクカテゴリをすべて特定します。 以下の「タスク → リファレンスファイル」表で、ユーザーの依頼に当てはまる行を確認してください。1つの依頼が複数のカテゴリにまたがることはよくあります（例：リモートページングと編集には、paging-remote.md と editing.md の両方が必要です）。
3. 特定したリファレンスファイルをすべて、1回の並列ファイル読み込みで全文読みます。 答えをすでに知っていると思っていても、必ず読み込んでください。
4. その後、読み込んだ内容だけに基づいて出力します。 リファレンスファイルに記載がない場合は、igniteui-cli MCP サーバーの get_doc／search_docs／search_api で調べてください。推測してはいけません。MCP サーバーで答えが得られない場合は、その詳細が未確認であることを明示してください。

タスク → リファレンスファイル

タスク	読むリファレンスファイル
グリッドの種類の選択、列の設定、列テンプレート、列グループ、MRL、ピン留め、並べ替え UI、フィルタリング UI、選択	references/structure.md
グループ化、集計、セル結合、ツールバー、エクスポート、行のドラッグ、アクションストリップ、マスター詳細、クリップボード	references/features.md
ツリーグリッドの詳細、階層グリッドの詳細、Grid Lite のセットアップ、Grid Lite のデータ操作、ピボットグリッドのセットアップ	references/types.md
プログラムによる並べ替え／フィルタリング／グループ化、標準的なインポートパターン、viewChild アクセス	references/data-operations.md
セル編集、行編集、バッチ編集、トランザクション、検証、集計	references/editing.md
ページング、リモートデータ、サーバーサイド処理、noop 戦略、仮想スクロール、複数グリッドの連携	references/paging-remote.md
状態の永続化、ツリーグリッド／階層グリッド／ピボットグリッドのデータ操作	references/state.md
グリッドのサイズ設定（幅、高さ、列のサイズ設定、null／px／% モード、セル間隔の CSS 変数）	references/sizing.md
Grid Lite（igx-grid-lite）から、機能の要件が Grid Lite の範囲を超えた場合のフル機能版 igx-grid への移行	references/grid-migration.md

迷った場合は、読むリファレンスファイルを減らすのではなく、増やしてください。不要なファイルを読むコストはわずかですが、API をでっち上げればアプリケーションが壊れます。

---

概要

このスキルでは、グリッドとその機能について概要レベルのガイダンスを提供します。igniteui-cli MCP サーバーには、グリッドのツールバーとエクスポートに関する完全なドキュメント（grid-toolbar、grid-export-excel、exporter-pdf、およびツリー／階層／ピボットの各バリエーションがあります。現在のカタログは list_components を呼び出して確認してください）と、メンバー単位で検索できる API メンバーインデックス（search_api／get_api_reference）があります。それ以外については、以下のリファレンスファイルが主なガイダンスです。

---

前提条件

• インストールされている igniteui-angular パッケージのメジャーバージョンと一致するメジャーバージョンの Angular プロジェクト（igniteui-angular のメジャーバージョンは Angular のメジャーバージョンに対応しています）
• igniteui-angular がインストールされていること。ライセンスをお持ちの場合は、代わりに @infragistics/igniteui-angular を使用できます — どちらのパッケージもエントリポイントの構成は同じです
• テーマが適用されていること（igniteui-angular-theming を参照）

---

適切なグリッドの選択

Ignite UI には5 種類のグリッドがあります。適切なグリッドを選ぶことが最も重要な判断です。それぞれデータ構造、機能、制約が異なります。

グリッド選択の判断ガイド

次の質問を順に確認してください。

1. 編集、選択、ページングは不要で、並べ替え、フィルタリング、仮想化に対応した軽量な読み取り専用のデータ表示が必要ですか？ → Grid Lite（オープンソース、MIT ライセンス）。後から Grid Lite の機能を超える機能が必要になった場合は、必ず igx-grid（IgxGridComponent）にアップグレードしてください — 代替としてグリッド以外のコンポーネントを推奨してはいけません。
2. ピボットテーブル分析（ユーザーがドラッグ＆ドロップで再構成できる行／列／値／集計）が必要ですか？ → Pivot Grid
3. データに、各階層で異なるスキーマを持つ親子関係（例：企業 → 部門 → 従業員）がありますか？ → Hierarchical Grid
4. データに、単一のスキーマ内の親子関係（例：managerId フィールドを持つ従業員、またはネストされた子配列）がありますか？ → Tree Grid
5. データがフラットなリスト／テーブルで、エンタープライズ機能（編集、一括編集、グループ化、ページング、エクスポートなど）が必要ですか？ → Flat Grid

グリッドの種類を選択した後も、上記の必須プロトコルのステップ 2～4 を完了する必要があります — ルーティングテーブルに戻り、コードを書く前に該当する references/ ファイルをすべて読んでください。このページの判断ガイドと表は、対象を見つけるための補助情報にすぎず、参照ファイルの代わりにはなりません。

グリッドの種類とインポート

重要： プロジェクトが igniteui-angular と @infragistics/igniteui-angular のどちらを使用しているかを確認するには、package.json を確認してください。必ず特定のエントリポイントからインポートしてください。どちらのパッケージでもルートのバレルからインポートしてはいけません。

グリッド	セレクター	コンポーネント	ディレクティブ	エントリポイント
Grid Lite	igx-grid-lite	IgxGridLiteComponent	個別にインポート	igniteui-angular/grids/lite
Flat Grid	igx-grid	IgxGridComponent	IGX_GRID_DIRECTIVES	igniteui-angular/grids/grid
Tree Grid	igx-tree-grid	IgxTreeGridComponent	IGX_TREE_GRID_DIRECTIVES	igniteui-angular/grids/tree-grid
Hierarchical Grid	igx-hierarchical-grid	IgxHierarchicalGridComponent	IGX_HIERARCHICAL_GRID_DIRECTIVES	igniteui-angular/grids/hierarchical-grid
Pivot Grid	igx-pivot-grid	IgxPivotGridComponent	IGX_PIVOT_GRID_DIRECTIVES	igniteui-angular/grids/pivot-grid

ライセンス版パッケージでは igniteui-angular を @infragistics/igniteui-angular に置き換えてください — エントリポイントのパスは同一です。

共通ルール（すべてのグリッドタイプ）

• viewChild には対応するコンポーネントタイプを使用します — IgxGridLiteComponent、IgxGridComponent、IgxTreeGridComponent、IgxHierarchicalGridComponent、または IgxPivotGridComponent
• 上記の表から対応するディレクティブバンドルをインポートします — Grid Lite の場合は個別にインポートします
• データにはシグナルを使用します — signal<T[]>([]) を使って [data]="myData()" と指定します
• 仮想化は自動で行われます（行と列）— グリッドを仮想スクロール用コンテナーで囲まず、代わりに固定の height を設定します

重要 — ドキュメント URL のパターン：グリッド固有のトピック（ソート、フィルタリング、編集、ページングなど）のドキュメント URL は、グリッドタイプごとに次の命名パターンに従います。

• Grid Lite：.../components/grid-lite/{topic}
• Flat Grid：.../components/grid/{topic}
• Tree Grid：.../components/treegrid/{topic}
• Hierarchical Grid：.../components/hierarchicalgrid/{topic}
• Pivot Grid：.../components/pivotGrid/{topic}

グリッドタイプごとの機能の利用可否

機能	Grid Lite	Flat Grid	Tree Grid	Hierarchical Grid	Pivot Grid
列のソート	はい	はい	はい（レベルごと）	はい（グリッドレベルごと）	ディメンションごとのみ
列のフィルタリング	はい	はい	はい（再帰的 — 一致する親を保持）	はい（グリッドレベルごと）	ディメンションごとのみ
GroupBy	いいえ	はい（組み込みの groupBy() API）	はい（igx-tree-grid-group-by-area + グループ化パイプ経由）	いいえ	ディメンションに内在
ページング	いいえ	はい	はい	はい（各レベルで独立）	いいえ
バッチ編集	いいえ	はい	はい（階層型トランザクション）	はい（ルートから伝播）	いいえ
セル／行の編集	いいえ	はい	はい	はい（グリッドレベルごと）	いいえ
行の追加	いいえ	はい	はい（親をサポート）	はい（グリッドレベルごと）	いいえ
マスター／詳細	いいえ	限定機能	いいえ	いいえ（行アイランドを使用）	いいえ
行の選択	いいえ	はい	はい + multipleCascade	はい（グリッドレベルごと）	制限あり
オンデマンド読み込み	いいえ	いいえ	限定機能	いいえ	いいえ
列の固定／移動	いいえ	はい	はい	はい	いいえ
列の非表示	はい	はい	はい	はい	いいえ
列のサイズ変更	はい	はい	はい	はい	いいえ
集計	いいえ	はい	はい（レベルごと）	はい（グリッドレベルごと）	水平方向の集計のみ
状態の永続化	いいえ	はい	はい	はい + 行アイランドの状態	ピボット設定のシリアライズ
リモートデータ操作	dataPipelineConfiguration	イベント + noop 戦略	イベント + noop 戦略	イベント + noop 戦略	該当なし
行の仮想化	はい	はい（行 + 列）	はい（行 + 列）	はい（行 + 列）	はい