igniteui-angular-grids

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Ignite UI for Angular — Data Grids Skill

Ignite UI for Angular — 数据表格技能

Description

说明

This skill teaches AI agents how to build rich data grid experiences with Ignite UI for Angular. It covers the four grid types (Grid, Tree Grid, Hierarchical Grid, Pivot Grid), column configuration, sorting, filtering, editing, selection, grouping, summaries, export, and advanced features like batch editing, cell merging, multi-row layouts, and virtualization.

Related Skill: Grid Data Operations & State Management
This skill focuses on grid structure — choosing a grid type, configuring columns, templates, layout, selection, toolbar, and export. For data manipulation patterns — remote data binding, programmatic sorting/filtering/grouping, paging, batch editing workflows, state persistence, and wiring up services — see the dedicated
igniteui-angular-grid-data-operations
skill.
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.

本技能旨在教授AI Agent如何使用Ignite UI for Angular构建丰富的数据表格交互体验。内容涵盖四种表格类型（Grid、Tree Grid、Hierarchical Grid、Pivot Grid），包括列配置、排序、筛选、编辑、选择、分组、汇总、导出，以及批量编辑、单元格合并、多行布局、虚拟化等高级功能。

相关技能：表格数据操作与状态管理
本技能聚焦于表格结构——选择表格类型、配置列、模板、布局、选择、工具栏和导出。若涉及数据操作模式——远程数据绑定、程序化排序/筛选/分组、分页、批量编辑流程、状态持久化及服务集成，请参考专门的
igniteui-angular-grid-data-operations
技能。
如果用户的问题是关于渲染什么内容，使用本技能；如果是关于数据如何流转，使用数据操作技能。

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)

Angular 20+ 项目
已安装
```
igniteui-angular
```
，或授权用户安装
```
@infragistics/igniteui-angular
```
——两个包的入口结构一致
已应用主题（参考主题技能）

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.

Ignite UI拥有五种表格类型。选择正确的表格类型是最重要的决策——每种类型都有不同的数据结构、功能和约束。

Grid Selection Decision Guide

表格选择决策指南

Ask these questions in order:

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)
Does the user need pivot-table analytics (rows/columns/values/aggregations that users can drag-and-drop to reshape)? → Pivot Grid
Does the data have parent-child relationships where each level has a DIFFERENT schema (e.g., Companies → Departments → Employees)? → Hierarchical Grid
Does the data have parent-child relationships within a SINGLE schema (e.g., Employees with a
```
managerId
```
field, or nested children arrays)? → Tree Grid
Is the data a flat list/table with enterprise features needed (editing, batch editing, grouping, paging, export, etc.)? → Flat Grid

按顺序询问以下问题：

用户是否需要轻量级、只读的数据展示，支持排序、筛选和虚拟化，但无需编辑、选择或分页？ → Grid Lite（开源，MIT许可）
用户是否需要透视表分析功能（支持行/列/值/聚合的拖放重塑）？ → Pivot Grid
数据是否存在父子关系，且每个层级具有不同的 schema（例如：公司→部门→员工）？ → Hierarchical Grid
数据是否存在父子关系，且所有层级共享同一 schema（例如：包含
```
managerId
```
字段的员工数据，或嵌套子数组）？ → Tree Grid
数据是否为扁平列表/表格，且需要企业级功能（编辑、批量编辑、分组、分页、导出等）？ → Flat Grid

Grid Types Overview

表格类型概述

Entry points below use the

igniteui-angular

prefix. Replace with

@infragistics/igniteui-angular

for the licensed package.

Grid	Selector	Component	Directives	Entry Point	Docs
Grid Lite	`igx-grid-lite`	`IgxGridLiteComponent`	Individual imports	`igniteui-angular/grids/lite`	—
Flat Grid	`igx-grid`	`IgxGridComponent`	`IGX_GRID_DIRECTIVES`	`igniteui-angular/grids/grid`	Docs
Tree Grid	`igx-tree-grid`	`IgxTreeGridComponent`	`IGX_TREE_GRID_DIRECTIVES`	`igniteui-angular/grids/tree-grid`	Docs
Hierarchical Grid	`igx-hierarchical-grid`	`IgxHierarchicalGridComponent`	`IGX_HIERARCHICAL_GRID_DIRECTIVES`	`igniteui-angular/grids/hierarchical-grid`	Docs
Pivot Grid	`igx-pivot-grid`	`IgxPivotGridComponent`	`IGX_PIVOT_GRID_DIRECTIVES`	`igniteui-angular/grids/pivot-grid`	Docs

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.

以下入口点使用

igniteui-angular

前缀。授权用户请替换为

@infragistics/igniteui-angular

。

表格类型	选择器	组件	指令	入口点	文档
Grid Lite	`igx-grid-lite`	`IgxGridLiteComponent`	单独导入	`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`	文档

AGENT 指令 — 文档URL规则：针对表格特定主题（排序、筛选、编辑、分页等），文档URL遵循各表格类型的命名规则：
Flat Grid:
.../components/grid/{topic}
Tree Grid:
.../components/treegrid/{topic}
Hierarchical Grid:
.../components/hierarchicalgrid/{topic}
Pivot Grid:
.../components/pivotGrid/{topic}
示例：排序主题的URL为
/grid/sorting
、
/treegrid/sorting
、
/hierarchicalgrid/sorting
、
/pivotGrid/sorting
。以下章节的文档链接使用Flat Grid URL，请根据表格类型替换前缀。

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

功能	Grid Lite	Flat Grid	Tree Grid	Hierarchical Grid	Pivot Grid
列排序	是	是	是（按层级）	是（按表格层级）	仅支持维度级
列筛选	是	是	是（递归——保留匹配项的父级）	是（按表格层级）	仅支持维度级
分组	否	专属	否（使用树形层级）	否	通过维度原生支持
分页	否	是	是	是（每个层级独立）	否
批量编辑	否	是	是（层级事务）	是（从根节点传播）	否
单元格/行编辑	否	是	是	是（按表格层级）	否
添加行	否	是	是（支持父级关联）	是（按表格层级）	否
主从详情	否	专属	否	否（使用行岛）	否
行选择	否	是	是 + `multipleCascade`	是（按表格层级）	有限支持
按需加载	否	否	专属	否	否
列固定/移动	否	是	是	是	否
列隐藏	是	是	是	是	否
列调整大小	是	是	是	是	否
汇总	否	是	是（按层级）	是（按表格层级）	仅支持水平汇总
状态持久化	否	是	是	是 + 行岛状态	透视配置序列化
远程数据操作	`dataPipelineConfiguration`	事件 + 空操作策略	事件 + 空操作策略	事件 + 空操作策略	不适用
行虚拟化	是	是（行+列）	是（行+列）	是（行+列）	是

Quick Start

快速开始

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

文档：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.

typescript

// 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[]>([]);
}

AGENT 指令：检查
package.json
以确定项目使用
igniteui-angular
还是
@infragistics/igniteui-angular
。始终从已安装包的特定入口点导入，切勿从任一包的根目录导入。

typescript

// 开源包 — 从特定入口点导入
import { IgxGridComponent, IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';

// 授权包 — 入口结构相同，前缀不同
// import { IgxGridComponent, IGX_GRID_DIRECTIVES } from '@infragistics/igniteui-angular/grids/grid';

// 避免 — 切勿从根目录导入（两种包均不支持）
// 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的视图子元素 — 在模板元素上使用#grid
  gridRef = viewChild.required<IgxGridComponent>('grid');

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

Basic Grid

基础表格

html

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

html

<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="姓名" [sortable]="true" [filterable]="true" [resizable]="true"></igx-column>
  <igx-column field="email" header="邮箱" [sortable]="true" [filterable]="true"></igx-column>
  <igx-column field="role" header="角色" [groupable]="true" [filterable]="true"></igx-column>
  <igx-column field="salary" header="薪资" dataType="number" [hasSummary]="true"></igx-column>
  <igx-column field="hireDate" header="入职日期" dataType="date" [sortable]="true"></igx-column>
  <igx-column field="active" header="在职状态" dataType="boolean"></igx-column>

</igx-grid>

Column Configuration

列配置

Docs: Column Types

文档：列类型

Data Types

数据类型

Set

dataType

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

dataType	Behavior
`string`	Text input, string filtering
`number`	Numeric input, number filtering, number summaries
`boolean`	Checkbox editor, boolean filtering
`date`	Date picker editor, date filtering
`dateTime`	Date+time editor
`time`	Time picker editor
`currency`	Currency formatting, number filtering
`percent`	Percentage formatting
`image`	Image rendering (read-only)

设置

dataType

以启用正确的格式化、筛选、排序和编辑：

dataType	行为
`string`	文本输入，字符串筛选
`number`	数值输入，数值筛选，数值汇总
`boolean`	复选框编辑器，布尔值筛选
`date`	日期选择器编辑器，日期筛选
`dateTime`	日期+时间编辑器
`time`	时间选择器编辑器
`currency`	货币格式化，数值筛选
`percent`	百分比格式化
`image`	图片渲染（只读）

Column Templates

列模板

Docs: Column Configuration

Override default rendering with template directives:

html

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

文档：列配置

使用模板指令覆盖默认渲染：

html

<igx-column field="status" header="状态">
  <!-- 自定义单元格模板 -->
  <ng-template igxCell let-cell="cell">
    <igx-badge [type]="cell.value === 'Active' ? 'success' : 'error'">
      {{ cell.value }}
    </igx-badge>
  </ng-template>

  <!-- 自定义表头模板 -->
  <ng-template igxHeader let-column>
    <igx-icon>verified</igx-icon> {{ column.header }}
  </ng-template>

  <!-- 自定义编辑器模板 -->
  <ng-template igxCellEditor let-cell="cell">
    <igx-select [(ngModel)]="cell.editValue">
      <igx-select-item value="Active">在职</igx-select-item>
      <igx-select-item value="Inactive">离职</igx-select-item>
    </igx-select>
  </ng-template>

  <!-- 自定义筛选单元格模板 -->
  <ng-template igxFilterCellTemplate let-column="column">
    <input (input)="onCustomFilter($event, column)" />
  </ng-template>

  <!-- 自定义汇总模板 -->
  <ng-template igxSummary let-summaryResults>
    在职人数: {{ getActiveCount(summaryResults) }}
  </ng-template>
</igx-column>

Column Groups

列分组

Docs: Collapsible Column Groups

Group columns under a shared header:

html

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

文档：可折叠列组

将列分组到共享表头下：

html

<igx-column-group header="个人信息">
  <igx-column field="firstName" header="名"></igx-column>
  <igx-column field="lastName" header="姓"></igx-column>
</igx-column-group>

<igx-column-group header="联系方式">
  <igx-column field="email" header="邮箱"></igx-column>
  <igx-column field="phone" header="电话"></igx-column>
</igx-column-group>

Multi-Row Layout (MRL)

多行布局（MRL）

Docs: Multi-Row Layout

Create complex cell layouts spanning multiple rows/columns:

html

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

文档：多行布局

创建跨多行/多列的复杂单元格布局：

html

<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

html

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

Or programmatically:

this.gridRef().pinColumn('name')

文档：列固定

html

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

或通过代码实现：

this.gridRef().pinColumn('name')

。

Sorting

排序

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

html

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

Programmatic sorting:

typescript

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

Events:

(sorting)

(cancelable),

(sortingDone)

文档：排序（根据表格类型替换URL前缀——参考上述指令）

html

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

程序化排序：

typescript

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

事件：

(sorting)

（可取消）、

(sortingDone)

。

Filtering

筛选

Quick Filter (Row Filter)

快速筛选（行筛选）

Docs: Filtering

html

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

文档：筛选

html

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

Excel-Style Filter

Excel风格筛选

Docs: Excel-Style Filtering

html

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

文档：Excel风格筛选

html

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

Advanced Filtering Dialog

高级筛选对话框

Docs: Advanced Filtering

html

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

文档：高级筛选

html

<igx-grid [allowAdvancedFiltering]="true">
  <!-- 高级筛选UI通过工具栏或API显示 -->
</igx-grid>

Programmatic Filtering

程序化筛选

typescript

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

Events:

(filtering)

(cancelable),

(filteringDone)

typescript

this.gridRef().filter('name', 'John', IgxStringFilteringOperand.instance().condition('contains'), true);
this.gridRef().clearFilter('name');
this.gridRef().clearFilter(); // 清除所有筛选

事件：

(filtering)

（可取消）、

(filteringDone)

。

Selection

选择

Row Selection

行选择

Docs: Row Selection

html

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

文档：行选择

html

<igx-grid [rowSelection]="'multiple'" [primaryKey]="'id'" [(selectedRows)]="selectedIds">
  <!-- 可选：自定义行选择复选框 -->
  <ng-template igxRowSelector let-rowContext>
    <igx-checkbox [checked]="rowContext.selected" (change)="rowContext.select(!rowContext.selected)">
    </igx-checkbox>
  </ng-template>
</igx-grid>

模式：

'none'

、

'single'

、

'multiple'

、

'multipleCascade'

（树形表格）。

Cell Selection

单元格选择

Docs: Cell Selection

html

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

文档：单元格选择

html

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

Column Selection

列选择

Docs: Column Selection

html

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

Events:

(rowSelectionChanging)

(columnSelectionChanging)

(selected)

(cell).

文档：列选择

html

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

事件：

(rowSelectionChanging)

、

(columnSelectionChanging)

、

(selected)

（单元格）。

Editing

编辑

Cell Editing

单元格编辑

Docs: Cell Editing

html

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

Double-click or press Enter to enter edit mode. Events:

(cellEditEnter)

(cellEdit)

(cancelable),

(cellEditDone)

(cellEditExit)

文档：单元格编辑

html

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

双击或按Enter进入编辑模式。事件：

(cellEditEnter)

、

(cellEdit)

（可取消）、

(cellEditDone)

、

(cellEditExit)

。

Row Editing

行编辑

Docs: Row Editing

html

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

文档：行编辑

html

<igx-grid [rowEditable]="true" [primaryKey]="'id'">
  <!-- 自定义行编辑覆盖文本 -->
  <ng-template igxRowEditText let-rowChanges>
    修改了 {{ rowChanges.size }} 个字段
  </ng-template>
  <ng-template igxRowEditActions>
    <button igxButton="flat" igxRowEditTabStop (click)="rowEditCtx.endRowEdit(false)">取消</button>
    <button igxButton="flat" igxRowEditTabStop (click)="rowEditCtx.endRowEdit(true)">保存</button>
  </ng-template>
</igx-grid>

事件：

(rowEditEnter)

、

(rowEdit)

（可取消）、

(rowEditDone)

、

(rowEditExit)

。

Batch Editing (Transactions)

批量编辑（事务）

Docs: Batch Editing

html

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

typescript

// 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();

文档：批量编辑

html

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

typescript

// 提交所有更改
this.gridRef().transactions.commit(this.gridRef().data);

// 撤销上一次更改
this.gridRef().transactions.undo();

// 重做
this.gridRef().transactions.redo();

// 丢弃所有更改
this.gridRef().transactions.clear();

Adding and Deleting Rows

添加和删除行

Docs: Row Adding

typescript

// Add row
this.gridRef().addRow({ id: 999, name: 'New User', email: 'new@example.com' });

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

文档：添加行

typescript

// 添加行
this.gridRef().addRow({ id: 999, name: '新用户', email: 'new@example.com' });

// 通过主键删除行
this.gridRef().deleteRow(42);

// 在顶部或底部打开添加行UI
this.gridRef().beginAddRowByIndex(0); // 在顶部

事件：

(rowAdded)

、

(rowDeleted)

、

(rowAdd)

（可取消）、

(rowDelete)

（可取消）。

Validation

验证

Docs: Validation

Built-in validators on columns:

html

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

typescript

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

Events:

(formGroupCreated)

(validationStatusChange)

文档：验证

列上的内置验证器：

html

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

typescript

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

事件：

(formGroupCreated)

、

(validationStatusChange)

。

Grouping (Grid only)

分组（仅Grid支持）

Docs: Group By

html

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

typescript

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

文档：分组

html

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

  <!-- 自定义分组行模板 -->
  <ng-template igxGroupByRow let-groupRow>
    {{ groupRow.expression.fieldName }}: {{ groupRow.value }} ({{ groupRow.records.length }} 条数据)
  </ng-template>
</igx-grid>

程序化分组：

typescript

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:

html

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

typescript

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

html

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

文档：汇总（根据表格类型替换URL前缀——参考上述指令）

启用列级汇总：

html

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

各类型默认汇总：

number：计数、最小值、最大值、求和、平均值
date：计数、最早日期、最晚日期
string/boolean：计数

自定义汇总类：

typescript

class SalarySummary extends IgxNumberSummaryOperand {
  operate(data: number[]): IgxSummaryResult[] {
    return [{
      key: 'median',
      label: '中位数',
      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;
  }
}

html

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

Cell Merging

单元格合并

Merge adjacent cells with equal values:

html

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

Or apply a custom merge strategy:

html

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

typescript

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

合并相邻值相等的单元格：

html

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

或应用自定义合并策略：

html

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

typescript

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

Toolbar

工具栏

Docs: Toolbar

html

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

文档：工具栏

html

<igx-grid [data]="data()">
  <igx-grid-toolbar>
    <igx-grid-toolbar-title>产品列表</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

Excel导出

Docs: Excel Export

typescript

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'));
  }
}

文档：Excel导出

typescript

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

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

  exportToExcel() {
    this.excelExporter.exportData(this.data(), new IgxExcelExporterOptions('export'));
    // 或导出表格（保留筛选/排序状态）
    this.excelExporter.export(this.grid, new IgxExcelExporterOptions('export'));
  }
}

CSV Export

CSV导出

Docs: CSV Export

typescript

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

文档：CSV导出

typescript

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

树形表格（Tree Grid）

Docs: Tree Grid

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

文档：树形表格

适用于单一schema内存在父子关系的数据（例如：组织结构图、文件系统、分类）。

Two Data Binding Modes

两种数据绑定模式

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

typescript

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' },
  ]);
}

html

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

html

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

模式1：带外键的扁平数据 — 行通过外键引用其父级：

typescript

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: '首席执行官' },
    { id: 2, name: '工程副总裁', managerId: 1, title: '副总裁' },
    { id: 3, name: '开发工程师', managerId: 2, title: '开发' },
  ]);
}

html

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

模式2：嵌套对象数据 — 每行在数组属性中包含其子级：

html

<igx-tree-grid #treeGrid
  [data]="departments()"
  [primaryKey]="'id'"
  [childDataKey]="'children'"
  [autoGenerate]="false"
  height="600px">
  <igx-column field="name" header="部门名称"></igx-column>
  <igx-column field="headCount" header="员工数" 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

级联选择：
```
[rowSelection]="'multipleCascade'"
```
— 选择父级时自动选择所有子级；不确定状态向上传播
级联删除：
```
[cascadeOnDelete]="true"
```
（默认） — 删除父级时自动移除所有子级
按需加载：
```
[loadChildrenOnDemand]="loadChildren"
```
— 展开行时懒加载子级
展开深度：
```
[expansionDepth]="2"
```
— 控制初始展开层级（默认
```
Infinity
```
）
添加子行：
```
treeGridRef().addRow(data, parentRowID)
```
— 在指定父级下添加子行

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

筛选为递归方式：当子项匹配时，其父级始终显示（即使父级不匹配）。匹配的父级自动展开。
排序按层级进行：子项在其父级内排序，而非全局扁平化排序
批量编辑使用
```
HierarchicalTransactionService
```
— 事务包含
```
path
```
数组，跟踪父级层级以实现正确的撤销/重做
汇总按树形层级计算

Hierarchical Grid

分层表格（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.

typescript

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[]>([]);
}

html

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

文档：分层表格

适用于每个层级具有不同schema的主从数据（例如：公司→部门→员工）。每个层级由**行岛（Row Island）**蓝图定义。

typescript

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[]>([]);
}

html

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

  <igx-column field="name" header="公司名称"></igx-column>
  <igx-column field="industry" header="行业"></igx-column>

  <igx-row-island [key]="'departments'" [autoGenerate]="false" [primaryKey]="'deptId'">
    <igx-column field="name" header="部门名称"></igx-column>
    <igx-column field="headCount" header="员工数" dataType="number"></igx-column>

    <igx-row-island [key]="'employees'" [autoGenerate]="false" [primaryKey]="'empId'">
      <igx-column field="name" header="姓名"></igx-column>
      <igx-column field="role" header="角色"></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

```
<igx-row-island>
```
定义该层级所有子表格的蓝图（列、功能、模板）
```
[key]
```
属性指定父行数据中包含子数组的属性名
行岛可以嵌套 — 一个
```
igx-row-island
```
可以包含另一个以支持更深层级
展开的每行都会创建一个完整的表格实例 — 层级过深或过宽时需注意内存使用

Accessing Child Grid Instances

访问子表格实例

Use the

(gridCreated)

event on the row island:

html

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

typescript

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

使用行岛的

(gridCreated)

事件：

html

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

typescript

onChildGridCreated(event: IGridCreatedEventArgs) {
  const childGrid = event.grid;
  // 配置子表格实例、加载数据等
}

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

排序和筛选不级联 — 每个表格层级独立，拥有自己的状态
在行岛上配置功能，该层级的所有子表格将继承这些功能
批量编辑自动传播：在根表格设置
```
[batchEditing]="true"
```
将自动启用所有子表格的批量编辑
状态持久化递归保存/恢复每个子表格实例的状态，按行岛ID + 父行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.

最轻量的表格选项 — 开源（MIT许可）Web组件，带有Angular包装器。适用于只读数据展示，支持排序、筛选、列隐藏/调整大小和行虚拟化。不支持编辑、选择、分页、分组、汇总、导出。

何时推荐Grid Lite vs Flat Grid：如果用户仅需展示数据并支持基本排序/筛选，且不需要编辑、批量操作、分页、分组、汇总或导出功能，Grid Lite是更轻量、更快的选择。如果需要任何企业级功能，请使用Flat Grid。

Installation

安装

Grid Lite requires a separate npm package:

bash

npm install igniteui-grid-lite

Grid Lite需要单独的npm包：

bash

npm install igniteui-grid-lite

Setup

设置

typescript

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[] = [];
}

typescript

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],  // 必填 — Grid Lite是Web组件
  templateUrl: './users-lite.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UsersLiteComponent {
  gridRef = viewChild<IgxGridLiteComponent<User>>('grid');
  data: User[] = [];
}

Template

模板

html

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

html

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

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

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

  <igx-grid-lite-column field="active" dataType="boolean" header="在职状态">
    <ng-template igxGridLiteCell let-value>
      <span>{{ value ? '是' : '否' }}</span>
    </ng-template>
  </igx-grid-lite-column>
</igx-grid-lite>

Column Configuration

列配置

Columns use

<igx-grid-lite-column>

with these inputs:

Input	Type	Description
`field`	`string`	Data property key (required)
`dataType`	`'string' \| 'number' \| 'boolean' \| 'date'`	Column data type
`header`	`string`	Header text
`width`	`string`	CSS width (e.g., `'250px'` )
`hidden`	`boolean`	Hide the column
`resizable`	`boolean`	Allow column resizing
`sortable`	`boolean`	Enable sorting
`filterable`	`boolean`	Enable filtering
`sortingCaseSensitive`	`boolean`	Case-sensitive sorting
`filteringCaseSensitive`	`boolean`	Case-sensitive filtering

列使用

<igx-grid-lite-column>

，支持以下输入属性：

输入属性	类型	说明
`field`	`string`	数据属性键（必填）
`dataType`	`'string' \| 'number' \| 'boolean' \| 'date'`	列数据类型
`header`	`string`	表头文本
`width`	`string`	CSS宽度（例如 `'250px'` ）
`hidden`	`boolean`	隐藏列
`resizable`	`boolean`	允许调整列宽
`sortable`	`boolean`	启用排序
`filterable`	`boolean`	启用筛选
`sortingCaseSensitive`	`boolean`	排序区分大小写
`filteringCaseSensitive`	`boolean`	筛选区分大小写

Templates

模板

Cell and header templates use dedicated directives:

html

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

单元格和表头模板使用专用指令：

html

<igx-grid-lite-column field="status" header="状态">
  <!-- 自定义单元格模板 -->
  <ng-template igxGridLiteCell let-value let-row="row" let-column="column">
    <span [class]="value">{{ value }}</span>
  </ng-template>

  <!-- 自定义表头模板 -->
  <ng-template igxGridLiteHeader let-column>
    <strong>{{ column.header }}</strong>
  </ng-template>
</igx-grid-lite-column>

Sorting & Filtering API

排序与筛选API

typescript

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

typescript

// 程序化排序
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(); // 清除所有排序

// 程序化筛选
this.gridRef().filter({ key: 'age', condition: 'greaterThan', searchTerm: 21 });
this.gridRef().clearFilter('age');
this.gridRef().clearFilter(); // 清除所有筛选

Two-Way Binding for Sort/Filter State

排序/筛选状态双向绑定

html

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

html

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

事件：

(sorting)

（可取消）、

(sorted)

、

(filtering)

（可取消）、

(filtered)

。

Remote Data Operations

远程数据操作

Use

dataPipelineConfiguration

to intercept sort/filter and delegate to the server:

typescript

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

html

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

使用

dataPipelineConfiguration

拦截排序/筛选并委托给服务器：

typescript

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

dataPipeline: IgxGridLiteDataPipelineConfiguration<Product> = {
  sort: async (params) => {
    // params.grid — 表格实例
    // params.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;
  }
};

html

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

Grid Lite Key Differences from Flat Grid

Grid Lite与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

单独的包：
```
npm install igniteui-grid-lite
```
需要
CUSTOM_ELEMENTS_SCHEMA
：在组件的
```
schemas
```
中添加
无指令包 — 需单独导入
```
IgxGridLiteComponent
```
、
```
IgxGridLiteColumnComponent
```
和模板指令
无
[primaryKey]
— 不需要（无编辑、选择或行操作）
无任何编辑功能（单元格、行、批量）
无选择功能（行、单元格、列）
无分页、分组、汇总、固定、移动、导出功能
列配置不同：使用
```
field
```
（与
```
<igx-column>
```
的
```
field
```
一致），
```
sortable
```
/
```
filterable
```
为布尔属性
远程数据：使用
```
dataPipelineConfiguration
```
（异步回调）而非空操作策略+事件

Pivot Grid

透视表格（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
.

typescript

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 }]
  };
}

html

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

文档：透视表格

适用于透视表分析，用户可通过拖放维度在行、列、筛选和值之间重塑数据。

重要提示：透视表格与其他三种表格有本质区别。标准表格功能如单元格编辑、行编辑、批量编辑、分页、列固定、列移动、行拖动以及标准筛选/排序均禁用。所有数据操作由
pivotConfiguration
驱动。

typescript

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: '求和' },
      enabled: true
    }],
    filters: [{ memberName: 'Year', enabled: true }]
  };
}

html

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

html

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

提供拖放UI，允许用户交互式重塑透视表：

html

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

筛选：仅支持维度级 — 在
```
IPivotDimension
```
上设置
```
filter
```
属性，而非
```
[allowFiltering]
```
排序：仅支持维度级 — 在
```
IPivotDimension
```
上设置
```
sortable: true
```
和
```
sortDirection
```

聚合：通过

IPivotValue.aggregate

配置（例如

IgxPivotNumericAggregate.sum

、

.average

、

.min

、

.max

、

.count

）

列自动生成：由透视配置自动生成列 — 请勿手动定义
```
<igx-column>
```
状态持久化：序列化整个
```
pivotConfiguration
```
（维度、值、筛选）

Virtualization & Performance

虚拟化与性能

Docs: Virtualization

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

html

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

文档：虚拟化

表格默认启用行和列虚拟化 — 无需额外设置。对于远程数据/分页：

html

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

Row Drag

行拖动

Docs: Row Drag

html

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

文档：行拖动

html

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

Action Strip

操作栏（Action Strip）

Docs: Action Strip

Overlay actions on a row:

html

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

文档：操作栏

在行上叠加操作按钮：

html

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

主从详情（仅Grid支持）

Docs: Master-Detail

Expand rows to show arbitrary detail content:

html

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

文档：主从详情

展开行以显示任意详情内容：

html

<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>{{ 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:

html

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

表格默认支持复制到剪贴板。可通过以下方式配置：

html

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

Key Rules

关键规则

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
Always set
[primaryKey]
— required for editing, selection, row operations (Flat, Tree, Hierarchical, Pivot grids; NOT Grid Lite)

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

Use the right component type for
viewChild
—

IgxGridLiteComponent

IgxGridComponent

IgxTreeGridComponent

IgxHierarchicalGridComponent

, or

IgxPivotGridComponent

Set
[autoGenerate]="false"
and define columns explicitly for production grids (except Pivot Grid where columns are auto-generated)
Set
dataType
on every column for correct filtering, sorting, editing, and summaries

Cancelable events — use

event.cancel = true

(rowEdit)

(cellEdit)

(sorting)

(filtering)

to prevent the action

Use signals for data binding —
```
[data]="myData()"
```
with
```
signal<T[]>([])
```
Virtualization is automatic — don't wrap grids in virtual scroll containers
Grid Lite requires
CUSTOM_ELEMENTS_SCHEMA
and
```
igniteui-grid-lite
```
npm package — it has no editing, selection, paging, or export
Tree Grid: use
```
[primaryKey]
```
+
```
[foreignKey]
```
for flat data or
```
[childDataKey]
```
for nested objects; filtering is recursive (parents of matching children are always shown)
Hierarchical Grid: sorting/filtering/paging are independent per level; configure features on the
```
<igx-row-island>
```
blueprint
Pivot Grid is read-only — editing, paging, pinning, column moving, row dragging are all disabled; use
```
pivotConfiguration
```
for all data operations
GroupBy is Flat Grid only — Tree Grid uses hierarchy, Hierarchical Grid uses row islands, Pivot Grid uses dimensions
For data operation patterns (remote data, paging, state persistence, batch editing workflows) — see the Grid Data Operations skill

首先选择正确的表格类型 — Grid Lite用于轻量只读展示，Flat Grid用于企业级表格数据，Tree Grid用于单一schema父子数据，Hierarchical Grid用于多schema层级数据，Pivot Grid用于分析型数据重塑
始终设置
[primaryKey]
— 编辑、选择、行操作所需（Flat、Tree、Hierarchical、Pivot表格；Grid Lite不需要）

导入正确的指令/组件 —

IGX_GRID_DIRECTIVES

、

IGX_TREE_GRID_DIRECTIVES

、

IGX_HIERARCHICAL_GRID_DIRECTIVES

、

IGX_PIVOT_GRID_DIRECTIVES

，或单独导入Grid Lite组件

viewChild
使用正确的组件类型 —

IgxGridLiteComponent

、

IgxGridComponent

、

IgxTreeGridComponent

、

IgxHierarchicalGridComponent

或

IgxPivotGridComponent

设置
[autoGenerate]="false"
并显式定义列（生产环境表格），Pivot Grid除外（列自动生成）
为每个列设置
dataType
— 以实现正确的筛选、排序、编辑和汇总

可取消事件 — 在

(rowEdit)

、

(cellEdit)

、

(sorting)

、

(filtering)

中使用

event.cancel = true

阻止操作

使用Signal进行数据绑定 —
```
[data]="myData()"
```
结合
```
signal<T[]>([])
```
虚拟化自动启用 — 请勿将表格包裹在虚拟滚动容器中
Grid Lite需要
CUSTOM_ELEMENTS_SCHEMA
和
```
igniteui-grid-lite
```
npm包 — 无编辑、选择、分页或导出功能
Tree Grid：扁平数据使用
```
[primaryKey]
```
+
```
[foreignKey]
```
，嵌套对象使用
```
[childDataKey]
```
；筛选为递归方式（匹配子项的父级始终显示）
Hierarchical Grid：排序/筛选/分页各层级独立；在行岛上配置功能，该层级所有子表格继承
Pivot Grid为只读 — 编辑、分页、固定、列移动、行拖动均禁用；所有数据操作通过
```
pivotConfiguration
```
配置
分组仅Flat Grid支持 — Tree Grid使用层级结构，Hierarchical Grid使用行岛，Pivot Grid使用维度
数据操作模式（远程数据、分页、状态持久化、批量编辑流程）——参考表格数据操作技能