igniteui-angular-grids

name	igniteui-angular-grids
description	Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data. Do NOT use for non-grid UI components (forms, dialogs, navigation, charts) — use igniteui-angular-components instead. Do NOT use for theming or styling — use igniteui-angular-theming instead.
user-invocable	true

Ignite UI for Angular — Data Grids

MANDATORY AGENT PROTOCOL — YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT

This file is a routing hub only. It contains NO code examples and NO API details.

DO NOT write any code, component selectors, import paths, method names, or property names from memory. Grid APIs change between versions. Anything generated without reading the reference files will be wrong.

You are required to complete ALL of the following steps before producing any grid-related code or answer:

STEP 1 — Identify the grid type. Use the Grid Selection Decision Guide below. If the grid type is not explicitly stated, infer it from context or ask.

STEP 2 — Identify every task category involved. Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., remote paging AND editing requires reading both paging-remote.md AND editing.md).

STEP 3 — Read every identified reference file in full (PARALLEL). Call read_file (or equivalent) on all reference files identified in Step 2 in a single parallel batch — do NOT read them one at a time sequentially. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.

STEP 4 — Only then produce output. Base your code and explanation exclusively on what you read in Step 3. If the reference files do not cover something, say so explicitly rather than guessing.

Task → Reference File

Task	Reference file to read
Grid type selection, column config, column templates, column groups, MRL, pinning, sorting UI, filtering UI, selection	references/structure.md
Grouping, summaries, cell merging, toolbar, export, row drag, action strip, master-detail, clipboard	references/features.md
Tree Grid specifics, Hierarchical Grid specifics, Grid Lite setup, Grid Lite data operations, Pivot Grid setup	references/types.md
Programmatic sorting / filtering / grouping, canonical import patterns, viewChild access	references/data-operations.md
Cell editing, row editing, batch editing, transactions, validation, summaries	references/editing.md
Paging, remote data, server-side ops, noop strategies, virtual scroll, multi-grid coordination	references/paging-remote.md
State persistence, Tree Grid / Hierarchical Grid / Pivot Grid data operations	references/state.md
Grid sizing (width, height, column sizing, null/px/% modes, cell spacing CSS variables)	references/sizing.md

When in doubt, read more rather than fewer reference files. The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application.

---

Overview

This reference gives high-level guidance on grids and their features. For detailed documentation, call get_doc and get_api_reference from igniteui-cli with the specific component and feature you're interested in.

---

Prerequisites

• Angular 20+ project
• igniteui-angular installed, or @infragistics/igniteui-angular for licensed users — both packages share the same entry-point structure
• A theme applied (see igniteui-angular-theming)

---

Choosing the Right Grid

Ignite UI has five grid types. Picking the correct one is the most important decision — each has different data structures, features, and constraints.

Grid Selection Decision Guide

Ask these questions in order:

1. Does the user need a lightweight, read-only data display with sorting, filtering, and virtualization but no editing, selection, or paging? → Grid Lite (open-source, MIT licensed). If the user later needs features beyond Grid Lite's capabilities, upgrade strictly to igx-grid (IgxGridComponent) — never recommend non-grid components as a substitute.
2. Does the user need pivot-table analytics (rows/columns/values/aggregations that users can drag-and-drop to reshape)? → Pivot Grid
3. Does the data have parent-child relationships where each level has a DIFFERENT schema (e.g., Companies → Departments → Employees)? → Hierarchical Grid
4. Does the data have parent-child relationships within a SINGLE schema (e.g., Employees with a managerId field, or nested children arrays)? → Tree Grid
5. Is the data a flat list/table with enterprise features needed (editing, batch editing, grouping, paging, export, etc.)? → Flat Grid

After choosing the grid type, you must still complete Steps 2–4 from the mandatory protocol above — return to the routing table and read every applicable references/ file before writing any code. The decision guide and the tables on this page are discovery aids only; they do not replace the reference files.

Grid Types & Imports

AGENT INSTRUCTION: Check package.json to determine whether the project uses igniteui-angular or @infragistics/igniteui-angular. Always import from the specific entry point. Never import from the root barrel of either package.

Grid	Selector	Component	Directives	Entry Point
Grid Lite	igx-grid-lite	IgxGridLiteComponent	Individual imports	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

Replace igniteui-angular with @infragistics/igniteui-angular for the licensed package — entry-point paths are identical.

AGENT INSTRUCTION — Documentation URL Pattern: For grid-specific topics (sorting, filtering, editing, paging, etc.), docs URLs follow this naming pattern per grid type:

• 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}

Feature Availability per Grid Type

Feature	Grid Lite	Flat Grid	Tree Grid	Hierarchical Grid	Pivot Grid
Column sorting	Yes	Yes	Yes (per-level)	Yes (per grid level)	Per-dimension only
Column filtering	Yes	Yes	Yes (recursive — keeps matching parents)	Yes (per grid level)	Per-dimension only
GroupBy	No	Exclusive	No (use tree hierarchy)	No	Inherent via dimensions
Paging	No	Yes	Yes	Yes (each level independent)	No
Batch editing	No	Yes	Yes (hierarchical transactions)	Yes (propagated from root)	No
Cell / Row editing	No	Yes	Yes	Yes (per grid level)	No
Row adding	No	Yes	Yes (with parent support)	Yes (per grid level)	No
Master-Detail	No	Exclusive	No	No (use row islands)	No
Row selection	No	Yes	Yes + multipleCascade	Yes (per grid level)	Limited
Load on demand	No	No	Exclusive	No	No
Column pinning / moving	No	Yes	Yes	Yes	No
Column hiding	Yes	Yes	Yes	Yes	No
Column resizing	Yes	Yes	Yes	Yes	No
Summaries	No	Yes	Yes (per-level)	Yes (per grid level)	Horizontal summaries only
State persistence	No	Yes	Yes	Yes + row island state	Pivot config serialization
Remote data ops	dataPipelineConfiguration	Events + noop strategies	Events + noop strategies	Events + noop strategies	N/A
Row virtualization	Yes	Yes (rows + columns)	Yes (rows + columns)	Yes (rows + columns)	Yes