Ignite UI for Angular — Data Grids

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

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.

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.

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