Igniteui Angular Grids

If the user's question is about what to render, use this skill. If it's about how data flows, use the Data Operations skill.

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 the Theming skill)

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)
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

Grid Types Overview

Entry points below use the igniteui-angular prefix. Replace with @infragistics/igniteui-angular for the licensed package.

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

• Flat Grid: .../components/grid/{topic}
• Tree Grid: .../components/treegrid/{topic}
• Hierarchical Grid: .../components/hierarchicalgrid/{topic}
• Pivot Grid: .../components/pivotGrid/{topic}

Example: the sorting topic is /grid/sorting, /treegrid/sorting, /hierarchicalgrid/sorting, /pivotGrid/sorting. Docs links in the sections below use the Flat Grid URL; substitute the prefix above for the other grid types.

Feature Availability per Grid Type

Quick Start

Docs: Flat Grid · Tree Grid · Hierarchical Grid · Pivot Grid

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 of whichever package is installed. Never import from the root barrel of either package.

// Open-source package — import from specific entry points
import { IgxGridComponent, IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';

// Licensed package — same entry-point structure, different prefix
// import { IgxGridComponent, IGX_GRID_DIRECTIVES } from '@infragistics/igniteui-angular/grids/grid';

// AVOID — never import from the root barrel (wrong for BOTH variants)
// import { IgxGridComponent } from 'igniteui-angular';
// import { IgxGridComponent } from '@infragistics/igniteui-angular';

import { Component, ChangeDetectionStrategy, signal, viewChild } from '@angular/core';

@Component({
  selector: 'app-users-grid',
  imports: [IGX_GRID_DIRECTIVES],
  templateUrl: './users-grid.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UsersGridComponent {
  // Signal-based view child — use #grid on the template element
  gridRef = viewChild.required<IgxGridComponent>('grid');

  protected users = signal<User[]>([]);
}

Basic Grid

<igx-grid #grid
  [data]="users()"
  [primaryKey]="'id'"
  [autoGenerate]="false"
  height="600px"
  width="100%">

  <igx-column field="id" header="ID" [hidden]="true"></igx-column>
  <igx-column field="name" header="Name" [sortable]="true" [filterable]="true" [resizable]="true"></igx-column>
  <igx-column field="email" header="Email" [sortable]="true" [filterable]="true"></igx-column>
  <igx-column field="role" header="Role" [groupable]="true" [filterable]="true"></igx-column>
  <igx-column field="salary" header="Salary" dataType="number" [hasSummary]="true"></igx-column>
  <igx-column field="hireDate" header="Hire Date" dataType="date" [sortable]="true"></igx-column>
  <igx-column field="active" header="Active" dataType="boolean"></igx-column>

</igx-grid>

Column Configuration

Docs: Column Types

Data Types

Set dataType to enable proper formatting, filtering, sorting, and editing:

Column Templates

Docs: Column Configuration

Override default rendering with template directives:

<igx-column field="status" header="Status">
  <!-- Custom cell template -->
  <ng-template igxCell let-cell="cell">
    <igx-badge [type]="cell.value === 'Active' ? 'success' : 'error'">
      {{ cell.value }}
    </igx-badge>
  </ng-template>

  <!-- Custom header template -->
  <ng-template igxHeader let-column>
    <igx-icon>verified</igx-icon> {{ column.header }}
  </ng-template>

  <!-- Custom editor template -->
  <ng-template igxCellEditor let-cell="cell">
    <igx-select [(ngModel)]="cell.editValue">
      <igx-select-item value="Active">Active</igx-select-item>
      <igx-select-item value="Inactive">Inactive</igx-select-item>
    </igx-select>
  </ng-template>

  <!-- Custom filter cell template -->
  <ng-template igxFilterCellTemplate let-column="column">
    <input (input)="onCustomFilter($event, column)" />
  </ng-template>

  <!-- Custom summary template -->
  <ng-template igxSummary let-summaryResults>
    Active: {{ getActiveCount(summaryResults) }}
  </ng-template>
</igx-column>

Column Groups

Docs: Collapsible Column Groups

Group columns under a shared header:

<igx-column-group header="Personal Info">
  <igx-column field="firstName" header="First Name"></igx-column>
  <igx-column field="lastName" header="Last Name"></igx-column>
</igx-column-group>

<igx-column-group header="Contact">
  <igx-column field="email" header="Email"></igx-column>
  <igx-column field="phone" header="Phone"></igx-column>
</igx-column-group>

Multi-Row Layout (MRL)

Docs: Multi-Row Layout

Create complex cell layouts spanning multiple rows/columns:

<igx-column-layout>
  <igx-column field="name" [rowStart]="1" [colStart]="1" [colEnd]="3"></igx-column>
  <igx-column field="email" [rowStart]="2" [colStart]="1"></igx-column>
  <igx-column field="phone" [rowStart]="2" [colStart]="2"></igx-column>
</igx-column-layout>

Column Pinning

Docs: Column Pinning

<igx-column field="name" [pinned]="true"></igx-column>

Or programmatically: this.gridRef().pinColumn('name').

Sorting

Docs: Sorting (substitute URL prefix per grid type — see instruction above)

<igx-grid
  [data]="data()"
  [(sortingExpressions)]="sortExprs"
  [sortingOptions]="{ mode: 'multiple' }">
  <igx-column field="name" [sortable]="true"></igx-column>
</igx-grid>

Programmatic sorting:

this.gridRef().sort({ fieldName: 'name', dir: SortingDirection.Asc, ignoreCase: true });
this.gridRef().clearSort();

Events: (sorting) (cancelable), (sortingDone).

Filtering

Quick Filter (Row Filter)

Docs: Filtering

<igx-grid [allowFiltering]="true" [filterMode]="'quickFilter'">
  <igx-column field="name" [filterable]="true"></igx-column>
</igx-grid>

Excel-Style Filter

Docs: Excel-Style Filtering

<igx-grid [allowFiltering]="true" [filterMode]="'excelStyleFilter']">
  <igx-column field="name" [filterable]="true"></igx-column>
</igx-grid>

Advanced Filtering Dialog

Docs: Advanced Filtering

<igx-grid [allowAdvancedFiltering]="true">
  <!-- Advanced filtering UI is shown via toolbar or API -->
</igx-grid>

Programmatic Filtering

this.gridRef().filter('name', 'John', IgxStringFilteringOperand.instance().condition('contains'), true);
this.gridRef().clearFilter('name');
this.gridRef().clearFilter(); // clear all

Events: (filtering) (cancelable), (filteringDone).

Selection

Row Selection

Docs: Row Selection

<igx-grid [rowSelection]="'multiple'" [primaryKey]="'id'" [(selectedRows)]="selectedIds">
  <!-- Optional: Custom row selector checkbox -->
  <ng-template igxRowSelector let-rowContext>
    <igx-checkbox [checked]="rowContext.selected" (change)="rowContext.select(!rowContext.selected)">
    </igx-checkbox>
  </ng-template>
</igx-grid>

Modes: 'none', 'single', 'multiple', 'multipleCascade' (tree grids).

Cell Selection

Docs: Cell Selection

<igx-grid [cellSelection]="'multiple'"></igx-grid>

Column Selection

Docs: Column Selection

<igx-grid [columnSelection]="'multiple'">
  <igx-column field="name" [selectable]="true"></igx-column>
</igx-grid>

Events: (rowSelectionChanging), (columnSelectionChanging), (selected) (cell).

Editing

Cell Editing

Docs: Cell Editing

<igx-column field="name" [editable]="true"></igx-column>

Double-click or press Enter to enter edit mode. Events: (cellEditEnter), (cellEdit) (cancelable), (cellEditDone), (cellEditExit).

Row Editing

Docs: Row Editing

<igx-grid [rowEditable]="true" [primaryKey]="'id'">
  <!-- Custom row edit overlay text -->
  <ng-template igxRowEditText let-rowChanges>
    {{ rowChanges.size }} fields changed
  </ng-template>
  <ng-template igxRowEditActions>
    <button igxButton="flat" igxRowEditTabStop (click)="rowEditCtx.endRowEdit(false)">Cancel</button>
    <button igxButton="flat" igxRowEditTabStop (click)="rowEditCtx.endRowEdit(true)">Save</button>
  </ng-template>
</igx-grid>

Events: (rowEditEnter), (rowEdit) (cancelable), (rowEditDone), (rowEditExit).

Batch Editing (Transactions)

Docs: Batch Editing

<igx-grid [batchEditing]="true" [primaryKey]="'id'" [rowEditable]="true"></igx-grid>

// Commit all changes
this.gridRef().transactions.commit(this.gridRef().data);

// Undo last change
this.gridRef().transactions.undo();

// Redo
this.gridRef().transactions.redo();

// Discard all changes
this.gridRef().transactions.clear();

Adding and Deleting Rows

Docs: Row Adding

// Add row
this.gridRef().addRow({ id: 999, name: 'New User', email: '[email protected]' });

// Delete row by primary key
this.gridRef().deleteRow(42);

// Open add-row UI at top or bottom
this.gridRef().beginAddRowByIndex(0); // at top

Events: (rowAdded), (rowDeleted), (rowAdd) (cancelable), (rowDelete) (cancelable).

Validation

Docs: Validation

Built-in validators on columns:

<igx-column field="email" [editable]="true" required [validators]="emailValidators">
</igx-column>

emailValidators = [Validators.required, Validators.email];

Events: (formGroupCreated), (validationStatusChange).

Grouping (Grid only)

Docs: Group By

<igx-grid [data]="data()" [groupsExpanded]="true">
  <igx-column field="category" [groupable]="true"></igx-column>

  <!-- Custom group row template -->
  <ng-template igxGroupByRow let-groupRow>
    {{ groupRow.expression.fieldName }}: {{ groupRow.value }} ({{ groupRow.records.length }} items)
  </ng-template>
</igx-grid>

Programmatic:

this.gridRef().groupBy({ fieldName: 'category', dir: SortingDirection.Asc });
this.gridRef().clearGrouping('category');

Summaries

Docs: Summaries (substitute URL prefix per grid type — see instruction above)

Enable per-column summaries:

<igx-column field="salary" dataType="number" [hasSummary]="true"></igx-column>

Default summaries by type:

• number: Count, Min, Max, Sum, Average
• date: Count, Earliest, Latest
• string/boolean: Count

Custom summary class:

class SalarySummary extends IgxNumberSummaryOperand {
  operate(data: number[]): IgxSummaryResult[] {
    return [{
      key: 'median',
      label: 'Median',
      summaryResult: this.median(data)
    }];
  }

  private median(data: number[]): number {
    const sorted = [...data].sort((a, b) => a - b);
    const mid = Math.floor(sorted.length / 2);
    return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
  }
}

<igx-column field="salary" [hasSummary]="true" [summaries]="salarySummary">
</igx-column>

Cell Merging

Merge adjacent cells with equal values:

<igx-column field="category" [merge]="true"></igx-column>

Or apply a custom merge strategy:

<igx-column field="price" [merge]="true" [mergeStrategy]="priceRangeMerge"></igx-column>

priceRangeMerge: IgxCellMergeStrategy = {
  shouldMerge(prevCell, curCell) {
    return Math.abs(prevCell.value - curCell.value) < 10;
  }
};

Toolbar

Docs: Toolbar

<igx-grid [data]="data()">
  <igx-grid-toolbar>
    <igx-grid-toolbar-title>Products</igx-grid-toolbar-title>
    <igx-grid-toolbar-actions>
      <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
      <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
      <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
      <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
    </igx-grid-toolbar-actions>
  </igx-grid-toolbar>

  <igx-column field="name"></igx-column>
</igx-grid>

Export

Excel Export

Docs: Excel Export

import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular/grids/core';

export class MyComponent {
  private excelExporter = inject(IgxExcelExporterService);

  exportToExcel() {
    this.excelExporter.exportData(this.data(), new IgxExcelExporterOptions('export'));
    // Or export the grid (respects filtering/sorting)
    this.excelExporter.export(this.grid, new IgxExcelExporterOptions('export'));
  }
}

CSV Export

Docs: CSV Export

import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core';

export class MyComponent {
  private csvExporter = inject(IgxCsvExporterService);

  exportToCsv() {
    this.csvExporter.export(this.grid, new IgxCsvExporterOptions('export', CsvFileTypes.CSV));
  }
}

Tree Grid

Docs: Tree Grid

For data with parent-child relationships within a single schema (e.g., org charts, file systems, categories).

Two Data Binding Modes

Mode 1: Flat data with foreign key — rows reference their parent via a foreign key:

import { Component, ChangeDetectionStrategy, signal, viewChild } from '@angular/core';
import { IgxTreeGridComponent, IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular/grids/tree-grid';

@Component({
  selector: 'app-org-tree',
  imports: [IGX_TREE_GRID_DIRECTIVES],
  templateUrl: './org-tree.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OrgTreeComponent {
  treeGridRef = viewChild.required<IgxTreeGridComponent>('treeGrid');
  employees = signal<Employee[]>([
    { id: 1, name: 'CEO', managerId: -1, title: 'CEO' },
    { id: 2, name: 'VP Engineering', managerId: 1, title: 'VP' },
    { id: 3, name: 'Developer', managerId: 2, title: 'Dev' },
  ]);
}

<igx-tree-grid #treeGrid
  [data]="employees()"
  [primaryKey]="'id'"
  [foreignKey]="'managerId'"
  [autoGenerate]="false"
  [rowSelection]="'multipleCascade'"
  height="600px">
  <igx-column field="name" header="Name" [sortable]="true"></igx-column>
  <igx-column field="title" header="Title"></igx-column>
</igx-tree-grid>

Mode 2: Nested object data — each row contains its children in an array property:

<igx-tree-grid #treeGrid
  [data]="departments()"
  [primaryKey]="'id'"
  [childDataKey]="'children'"
  [autoGenerate]="false"
  height="600px">
  <igx-column field="name" header="Name"></igx-column>
  <igx-column field="headCount" header="Employees" dataType="number"></igx-column>
</igx-tree-grid>

Tree Grid Unique Features

• Cascade selection: [rowSelection]="'multipleCascade'" — selecting a parent selects all children; indeterminate state propagates up
• Cascade delete: [cascadeOnDelete]="true" (default) — deleting a parent removes all descendants
• Load on demand: [loadChildrenOnDemand]="loadChildren" — lazy-load children when a row is expanded
• Expansion depth: [expansionDepth]="2" — control initial expansion level (Infinity by default)
• Add child row: treeGridRef().addRow(data, parentRowID) — add a row as a child of a specific parent

Tree Grid Data Operation Behavior

• Filtering is recursive: when a child matches, its parent is always shown (even if the parent doesn't match). Matched parents are auto-expanded.
• Sorting is per-level: children are sorted within their parent, not globally flattened
• Batch editing uses HierarchicalTransactionService — transactions carry a path array tracing the parent hierarchy for proper undo/redo
• Summaries are computed per tree level

Hierarchical Grid

Docs: Hierarchical Grid

For master-detail data where each level has a different schema (e.g., Companies → Departments → Employees). Each level is defined by a Row Island blueprint.

import { Component, ChangeDetectionStrategy, signal, viewChild } from '@angular/core';
import { IgxHierarchicalGridComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES } from 'igniteui-angular/grids/hierarchical-grid';

@Component({
  selector: 'app-company-grid',
  imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES],
  templateUrl: './company-grid.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CompanyGridComponent {
  hGridRef = viewChild.required<IgxHierarchicalGridComponent>('hGrid');
  companies = signal<Company[]>([]);
}

<igx-hierarchical-grid #hGrid
  [data]="companies()"
  [primaryKey]="'id'"
  [autoGenerate]="false"
  height="600px">

  <igx-column field="name" header="Company"></igx-column>
  <igx-column field="industry" header="Industry"></igx-column>

  <igx-row-island [key]="'departments'" [autoGenerate]="false" [primaryKey]="'deptId'">
    <igx-column field="name" header="Department"></igx-column>
    <igx-column field="headCount" header="Employees" dataType="number"></igx-column>

    <igx-row-island [key]="'employees'" [autoGenerate]="false" [primaryKey]="'empId'">
      <igx-column field="name" header="Name"></igx-column>
      <igx-column field="role" header="Role"></igx-column>
    </igx-row-island>
  </igx-row-island>

</igx-hierarchical-grid>

How Row Islands Work

• A <igx-row-island> defines the blueprint (columns, features, templates) for all child grids at that level
• The [key] property specifies which property of the parent row's data holds the child array
• Row islands can be nested — an igx-row-island can contain another for deeper levels
• Each expanded row creates a full grid instance — be aware of memory usage with very deep/wide hierarchies

Accessing Child Grid Instances

Use the (gridCreated) event on the row island:

<igx-row-island [key]="'orders'" (gridCreated)="onChildGridCreated($event)">
  <igx-column field="orderId" header="Order"></igx-column>
</igx-row-island>

onChildGridCreated(event: IGridCreatedEventArgs) {
  const childGrid = event.grid;
  // Configure the child grid instance, load data, etc.
}

Hierarchical Grid Data Operation Behavior

• Sorting and filtering do NOT cascade — each grid level is independent with its own state
• Configure features on the row island and all child grids at that level inherit them
• Batch editing propagates: setting [batchEditing]="true" on the root automatically enables it on all child grids
• State persistence recursively saves/restores state for each child grid instance, keyed by row island ID + parent row ID

Grid Lite

The lightest grid option — an open-source (MIT licensed) Web Component with an Angular wrapper. Use it for read-only data display with sorting, filtering, column hiding/resizing, and row virtualization. It has no editing, no selection, no paging, no grouping, no summaries, no export.

When to recommend Grid Lite vs. Flat Grid: If the user only needs to display data with basic sorting/filtering and doesn't need editing, batch operations, paging, grouping, summaries, or export, Grid Lite is the lighter, faster choice. If any of those enterprise features are needed, use the Flat Grid.

Installation

Grid Lite requires a separate npm package:

npm install igniteui-grid-lite

Setup

import { Component, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
import {
  IgxGridLiteComponent,
  IgxGridLiteColumnComponent,
  IgxGridLiteCellTemplateDirective,
  IgxGridLiteHeaderTemplateDirective
} from 'igniteui-angular/grids/lite';

@Component({
  selector: 'app-users-lite',
  imports: [
    IgxGridLiteComponent,
    IgxGridLiteColumnComponent,
    IgxGridLiteCellTemplateDirective,
    IgxGridLiteHeaderTemplateDirective
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],  // Required — Grid Lite is a Web Component
  templateUrl: './users-lite.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UsersLiteComponent {
  gridRef = viewChild<IgxGridLiteComponent<User>>('grid');
  data: User[] = [];
}

Template

<igx-grid-lite #grid
  [data]="data"
  [autoGenerate]="false"
  [sortingOptions]="{ mode: 'multiple' }">

  <igx-grid-lite-column
    field="name"
    dataType="string"
    header="Name"
    sortable
    filterable
    resizable>
  </igx-grid-lite-column>

  <igx-grid-lite-column
    field="age"
    dataType="number"
    header="Age"
    sortable
    filterable>
  </igx-grid-lite-column>

  <igx-grid-lite-column field="active" dataType="boolean" header="Active">
    <ng-template igxGridLiteCell let-value>
      <span>{{ value ? 'Yes' : 'No' }}</span>
    </ng-template>
  </igx-grid-lite-column>
</igx-grid-lite>

Column Configuration

Columns use <igx-grid-lite-column> with these inputs:

Templates

Cell and header templates use dedicated directives:

<igx-grid-lite-column field="status" header="Status">
  <!-- Custom cell template -->
  <ng-template igxGridLiteCell let-value let-row="row" let-column="column">
    <span [class]="value">{{ value }}</span>
  </ng-template>

  <!-- Custom header template -->
  <ng-template igxGridLiteHeader let-column>
    <strong>{{ column.header }}</strong>
  </ng-template>
</igx-grid-lite-column>

Sorting & Filtering API

// Sort programmatically
this.gridRef().sort({ key: 'name', direction: 'ascending' });
this.gridRef().sort([
  { key: 'name', direction: 'ascending' },
  { key: 'age', direction: 'descending' }
]);
this.gridRef().clearSort('name');
this.gridRef().clearSort(); // clear all

// Filter programmatically
this.gridRef().filter({ key: 'age', condition: 'greaterThan', searchTerm: 21 });
this.gridRef().clearFilter('age');
this.gridRef().clearFilter(); // clear all

Two-Way Binding for Sort/Filter State

<igx-grid-lite #grid
  [data]="data"
  [(sortingExpressions)]="sortExprs"
  [(filteringExpressions)]="filterExprs"
  (sorting)="onSorting($event)"
  (sorted)="onSorted($event)"
  (filtering)="onFiltering($event)"
  (filtered)="onFiltered($event)">
</igx-grid-lite>

Events: (sorting) (cancelable), (sorted), (filtering) (cancelable), (filtered).

Remote Data Operations

Use dataPipelineConfiguration to intercept sort/filter and delegate to the server:

import { IgxGridLiteDataPipelineConfiguration } from 'igniteui-angular/grids/lite';

dataPipeline: IgxGridLiteDataPipelineConfiguration<Product> = {
  sort: async (params) => {
    // params.grid — the grid instance
    // params.data — current data
    // params.type — 'sort'
    const sorted = await this.dataService.sortRemote(params.grid.sortingExpressions);
    return sorted;
  },
  filter: async (params) => {
    const filtered = await this.dataService.filterRemote(params.grid.filteringExpressions);
    return filtered;
  }
};

<igx-grid-lite #grid
  [data]="data"
  [dataPipelineConfiguration]="dataPipeline">
</igx-grid-lite>

Grid Lite Key Differences from Flat Grid

• Separate package: npm install igniteui-grid-lite
• Requires CUSTOM_ELEMENTS_SCHEMA in the component's schemas
• No directives bundle — import IgxGridLiteComponent, IgxGridLiteColumnComponent, and template directives individually
• No [primaryKey] — not needed (no editing, selection, or row operations)
• No editing of any kind (cell, row, batch)
• No selection (row, cell, column)
• No paging, grouping, summaries, pinning, moving, export
• Column config differs: uses field (not field on <igx-column>), sortable/filterable are boolean attributes
• Remote data: uses dataPipelineConfiguration (async callback) instead of noop strategies + events

Pivot Grid

Docs: Pivot Grid

For pivot table analytics where users reshape data by dragging dimensions between rows, columns, filters, and values.

IMPORTANT: The Pivot Grid is fundamentally different from the other three grids. Standard grid features like cell editing, row editing, batch editing, paging, column pinning, column moving, row dragging, and standard filtering/sorting are disabled. All data operations are driven by the pivotConfiguration.

import { Component, ChangeDetectionStrategy, signal, viewChild } from '@angular/core';
import { IgxPivotGridComponent, IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
import { IPivotConfiguration, IgxPivotNumericAggregate } from 'igniteui-angular/grids/pivot-grid';

@Component({
  selector: 'app-sales-pivot',
  imports: [IGX_PIVOT_GRID_DIRECTIVES],
  templateUrl: './sales-pivot.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SalesPivotComponent {
  pivotGridRef = viewChild.required<IgxPivotGridComponent>('pivotGrid');
  salesData = signal<Sale[]>([]);

  pivotConfig: IPivotConfiguration = {
    columns: [{ memberName: 'Quarter', enabled: true }],
    rows: [{ memberName: 'Region', enabled: true }],
    values: [{
      member: 'Revenue',
      aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'SUM', label: 'Sum' },
      enabled: true
    }],
    filters: [{ memberName: 'Year', enabled: true }]
  };
}

<igx-pivot-grid #pivotGrid
  [data]="salesData()"
  [pivotConfiguration]="pivotConfig"
  height="600px">
</igx-pivot-grid>

Pivot Data Selector

Provide a drag-and-drop UI for users to reshape the pivot interactively:

<igx-pivot-data-selector [grid]="pivotGridRef()"></igx-pivot-data-selector>
<igx-pivot-grid #pivotGrid [data]="salesData()" [pivotConfiguration]="pivotConfig"></igx-pivot-grid>

Pivot Grid Data Operations

• Filtering: Per-dimension only — set the filter property on an IPivotDimension, NOT [allowFiltering]
• Sorting: Per-dimension only — set sortable: true and sortDirection on an IPivotDimension
• Aggregation: Configured via IPivotValue.aggregate (e.g., IgxPivotNumericAggregate.sum, .average, .min, .max, .count)
• Columns are auto-generated from the pivot configuration — do not define <igx-column> manually
• State persistence: Serializes the entire pivotConfiguration (dimensions, values, filters)

Virtualization & Performance

Docs: Virtualization

Grids use virtualization by default for both rows and columns — no setup needed. For remote data/paging:

<igx-grid [data]="data()" [totalItemCount]="totalCount" (dataPreLoad)="onDataPreLoad($event)">
</igx-grid>

Row Drag

Docs: Row Drag

<igx-grid [rowDraggable]="true" (rowDragStart)="onDragStart($event)" (rowDragEnd)="onDragEnd($event)">
  <ng-template igxRowDragGhost let-dragData>
    <span>Moving {{ dragData.dragData.name }}</span>
  </ng-template>
</igx-grid>

Action Strip

Docs: Action Strip

Overlay actions on a row:

<igx-grid [data]="data()">
  <igx-action-strip>
    <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
    <igx-grid-pinning-actions></igx-grid-pinning-actions>
  </igx-action-strip>
  <igx-column field="name"></igx-column>
</igx-grid>

Master-Detail (Grid only)

Docs: Master-Detail

Expand rows to show arbitrary detail content:

<igx-grid [data]="orders()" [primaryKey]="'orderId'">
  <igx-column field="orderId"></igx-column>
  <igx-column field="customer"></igx-column>

  <ng-template igxGridDetail let-dataItem>
    <div class="detail-container">
      <h4>Order Items for {{ dataItem.customer }}</h4>
      <igx-grid [data]="dataItem.items" [autoGenerate]="true" height="200px">
      </igx-grid>
    </div>
  </ng-template>
</igx-grid>

Clipboard

Grids support copy to clipboard by default. Configure via:

<igx-grid [clipboardOptions]="{ enabled: true, copyHeaders: true, copyFormatters: true, separator: '\t' }">
</igx-grid>

Key Rules

1. Pick the right grid type first — Grid Lite for lightweight read-only display, Flat Grid for enterprise tabular data, Tree Grid for single-schema parent-child, Hierarchical Grid for multi-schema levels, Pivot Grid for analytics reshaping
2. Always set [primaryKey] — required for editing, selection, row operations (Flat, Tree, Hierarchical, Pivot grids; NOT Grid Lite)
3. Import the correct directives/components — IGX_GRID_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES, IGX_HIERARCHICAL_GRID_DIRECTIVES, IGX_PIVOT_GRID_DIRECTIVES, or individual Grid Lite imports
4. Use the right component type for viewChild — IgxGridLiteComponent, IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, or IgxPivotGridComponent
5. Set [autoGenerate]="false" and define columns explicitly for production grids (except Pivot Grid where columns are auto-generated)
6. Set dataType on every column for correct filtering, sorting, editing, and summaries
7. Cancelable events — use event.cancel = true in (rowEdit), (cellEdit), (sorting), (filtering) to prevent the action
8. Use signals for data binding — [data]="myData()" with signal<T[]>([])
9. Virtualization is automatic — don't wrap grids in virtual scroll containers
10. Grid Lite requires CUSTOM_ELEMENTS_SCHEMA and igniteui-grid-lite npm package — it has no editing, selection, paging, or export
11. Tree Grid: use [primaryKey] + [foreignKey] for flat data or [childDataKey] for nested objects; filtering is recursive (parents of matching children are always shown)
12. Hierarchical Grid: sorting/filtering/paging are independent per level; configure features on the <igx-row-island> blueprint
13. Pivot Grid is read-only — editing, paging, pinning, column moving, row dragging are all disabled; use pivotConfiguration for all data operations
14. GroupBy is Flat Grid only — Tree Grid uses hierarchy, Hierarchical Grid uses row islands, Pivot Grid uses dimensions
15. For data operation patterns (remote data, paging, state persistence, batch editing workflows) — see the Grid Data Operations skill