Grid Features

July 29, 2026 · View on GitHub

Part of the igniteui-angular-grids skill hub. For grid setup, column config, sorting, filtering, selection — see structure.md. For Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics — see types.md. For full editing coverage (cell/row/batch) — see editing.md.

Contents

Editing

Full editing coverage is in editing.md, which includes cell editing, row editing, batch editing with transactions, row adding/deleting, validation, and summaries. Use that reference for any editing task.

Quick reference:

ModeKey properties
Cell editing[editable]="true" on columns + (cellEditDone)
Row editing (recommended default)[rowEditable]="true" + [editable]="true" on columns + (rowEditDone)
Batch editing[batchEditing]="true" + [rowEditable]="true" + transactions.commit(data)

Grouping (Flat and Tree Grid only)

The two grids group differently:

  • Flat Grid has built-in GroupBy — [groupable]="true" on columns (not on the grid component itself) plus the groupBy()/clearGrouping() API.
  • Tree Grid has no groupBy() API — it groups via IgxTreeGridGroupByAreaComponent (<igx-tree-grid-group-by-area>) paired with the tree-grid grouping pipe that reshapes flat data into a grouped hierarchy.
<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 (Flat Grid):

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

For advanced programmatic grouping patterns — see data-operations.md.

Summaries

Full summaries coverage — built-in summaries, custom summary operands, and summaries with grouping — is in editing.md.

Quick reference: enable per-column summaries with [hasSummary]="true" on an igx-column. Default operands: number → Count/Min/Max/Sum/Average; date → Count/Earliest/Latest; string/boolean → Count.

Cell Merging

Merge adjacent cells with equal values:

<igx-grid [data]="data()" [cellMergeMode]="'always'">
  <igx-column field="category" [merge]="true"></igx-column>
</igx-grid>

Grid merge modes (cellMergeMode):

  • 'onSort' — merge only when the column is sorted (default)
  • 'always' — merge regardless of sort state

Or apply a custom merge strategy at the grid level (not column):

<igx-grid [data]="data()" [mergeStrategy]="customMerge" [cellMergeMode]="'always'">
  <igx-column field="price" [merge]="true"></igx-column>
</igx-grid>

import { DefaultMergeStrategy } from 'igniteui-angular/core';
// import { DefaultMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package

// Extend DefaultMergeStrategy and override comparer
class PriceRangeMergeStrategy extends DefaultMergeStrategy {
  public override comparer(prevRecord: any, record: any, field: string): boolean {
    return Math.abs(prevRecord[field] - record[field]) < 10;
  }
}

customMerge = new PriceRangeMergeStrategy();

Toolbar

Full docs in the MCP — get_doc with grid-toolbar, treegrid-toolbar, or hierarchicalgrid-toolbar covers title, built-in actions (hiding, pinning, advanced filtering, exporter), custom content, progress indication, and theming. Prefer those over memory.

Toolbar components (IgxGridToolbarComponent and the action components) import from igniteui-angular/grids/core and nest inside the grid element:

<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

Full docs in the MCP — get_doc with grid-export-excel, treegrid-export-excel, hierarchicalgrid-export-excel, pivotGrid-export-excel, or exporter-pdf covers setup, full-data vs. visible exports, multi-column headers, customization events, and known limitations. Prefer those over memory.

Quick reference — exporter services (IgxExcelExporterService, IgxCsvExporterService, and their *ExporterOptions) import from igniteui-angular/grids/core; inject() the service and call export(grid, options) (respects filtering/sorting) or exportData(data, options) (raw data).

Virtualization & Performance

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>

For full remote virtualization patterns — see paging-remote.md.

Row Drag

<igx-grid [rowDraggable]="true" (rowDragStart)="onDragStart($event)" (rowDragEnd)="onDragEnd($event)">
  <!-- Custom ghost template (purely visual; row data is accessed in event handlers, not in the ghost template) -->
  <ng-template igxRowDragGhost>
    <igx-icon>arrow_right_alt</igx-icon>
  </ng-template>
</igx-grid>

Handle drops via igxDrop on the target:

import { IDropDroppedEventArgs } from 'igniteui-angular/directives';

onDropAllowed(args: IDropDroppedEventArgs) {
  this.targetGrid.addRow(args.dragData.data);    // row data
  this.sourceGrid.deleteRow(args.dragData.key);  // primary key
}

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)

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. Cancelable events — use event.cancel = true in (rowEdit), (cellEdit), (sorting), (filtering) to prevent the action
  2. The groupBy() API is Flat Grid only — Tree Grid groups via igx-tree-grid-group-by-area + grouping pipe; Hierarchical Grid uses row islands, Pivot Grid uses dimensions

Universal rules (viewChild types, directive bundles, signals, virtualization) are in the hub.

See Also