Skip to content

features.md

Latest commit

 

History

History
234 lines (172 loc) · 7.83 KB

features.md

File metadata and controls

234 lines (172 loc) · 7.83 KB

Grid Features — Grouping, Summaries, Toolbar, Export, Row Drag & More

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:

Mode Key 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 (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');

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-column field="category" [merge]="true"></igx-column>

Or apply a custom merge strategy:

<igx-column field="price" [merge]="true" [mergeStrategy]="priceRangeMerge"></igx-column>
import { IGridMergeStrategy } from 'igniteui-angular/core';
// import { IGridMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package

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

Toolbar

Docs: Toolbar

import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';
<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));
  }
}

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

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. Cancelable events — use event.cancel = true in (rowEdit), (cellEdit), (sorting), (filtering) to prevent the action
  2. Use signals for data binding — [data]="myData()" with signal<T[]>([])
  3. Virtualization is automatic — don't wrap grids in virtual scroll containers
  4. GroupBy is Flat Grid only — Tree Grid uses hierarchy, Hierarchical Grid uses row islands, Pivot Grid uses dimensions

See Also