@igniteui/angular-templates 21.1.1492 → 21.1.1500-rc.0

package/igx-ts/projects/_base/files/__dot__claude/skills/igniteui-angular-grids/references/state.md

@@ -0,0 +1,314 @@
+# Grid State Persistence & Grid-Type-Specific Operations
+
+> **Part of the [`igniteui-angular-grids`](../SKILL.md) skill hub.**
+> For grid import patterns and `viewChild` access — see [`data-operations.md`](./data-operations.md).
+> For Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite setup — see [`types.md`](./types.md).
+> For paging and remote data — see [`paging-remote.md`](./paging-remote.md).
+
+## Contents
+
+- [State Persistence](#state-persistence)
+- [Tree Grid Data Operations](#tree-grid-data-operations)
+- [Hierarchical Grid Data Operations](#hierarchical-grid-data-operations)
+- [Pivot Grid Data Operations](#pivot-grid-data-operations)
+- [Grid Lite Data Operations](#grid-lite-data-operations)
+- [Key Rules](#key-rules)
+
+## State Persistence
+
+> **Docs:** [State Persistence](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/state-persistence) (substitute URL prefix per grid type)
+
+### Saving and Restoring Grid State
+
+Use `IgxGridStateDirective` to persist sorting, filtering, grouping, paging, selection, and column state:
+
+```html
+<igx-grid #grid [data]="data()" igxGridState>
+  <igx-column field="name" [sortable]="true" [filterable]="true" [groupable]="true"></igx-column>
+</igx-grid>
+```
+
+```typescript
+import { IgxGridStateDirective } from 'igniteui-angular/grids/core';
+
+export class StatefulGridComponent {
+  gridState = viewChild.required(IgxGridStateDirective);
+
+  saveState() {
+    const state = this.gridState().getState();
+    localStorage.setItem('gridState', state);
+  }
+
+  restoreState() {
+    const state = localStorage.getItem('gridState');
+    if (state) {
+      this.gridState().setState(state);
+    }
+  }
+}
+```
+
+### Selective State Features
+
+Control which features are persisted:
+
+```html
+<igx-grid #grid [data]="data()" [igxGridState]="stateOptions">
+</igx-grid>
+```
+
+```typescript
+stateOptions = {
+  sorting: true,
+  filtering: true,
+  groupBy: true,
+  paging: true,
+  columns: true,
+  cellSelection: false,    // skip selection state
+  rowSelection: false,
+  columnSelection: false,
+  advancedFiltering: true,
+  rowPinning: true,
+  expansion: true
+};
+```
+
+### Restoring Custom Strategies
+
+`IgxGridState` does **not** persist functions — this includes sorting strategies, filtering strategies, column formatters, summaries, `cellClasses`, and `cellStyles`. Use the `stateParsed` event to reapply these after restoring state:
+
+```typescript
+restoreState() {
+  const stateJson = localStorage.getItem('gridState');
+  if (!stateJson) return;
+
+  // Subscribe to stateParsed to reapply custom strategies before state is applied
+  this.gridState().stateParsed.pipe(take(1)).subscribe(parsedState => {
+    parsedState.sorting?.forEach(expr => expr.strategy = NoopSortingStrategy.instance());
+  });
+
+  this.gridState().setState(stateJson);
+}
+```
+
+### Restoring Column Templates
+
+Column templates are also not serialized. Use the `columnInit` event to reassign them:
+
+```typescript
+@ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef<any>;
+
+onColumnInit(column: IgxColumnComponent) {
+  if (column.field === 'IsActive') {
+    column.bodyTemplate = this.activeTemplate;
+  }
+}
+```
+
+```html
+<igx-grid #grid [data]="data()" igxGridState (columnInit)="onColumnInit($event)">
+  <ng-template #activeTemplate igxCell let-val="val">
+    <igx-checkbox [checked]="val"></igx-checkbox>
+  </ng-template>
+</igx-grid>
+```
+
+## Tree Grid Data Operations
+
+> **Docs:** [Tree Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid) · [Load on Demand](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/load-on-demand)
+
+### Recursive Filtering Behavior
+
+Tree Grid filtering is **inclusive** — when a child matches, all its ancestors are kept visible (marked as `isFilteredOutParent`) and auto-expanded. This is the default `TreeGridFilteringStrategy`.
+
+```html
+<igx-tree-grid #treeGrid
+  [data]="employees()"
+  [primaryKey]="'id'"
+  [foreignKey]="'managerId'"
+  [allowFiltering]="true"
+  [filterMode]="'excelStyleFilter'"
+  height="600px">
+  <igx-column field="name" [filterable]="true" [sortable]="true"></igx-column>
+  <igx-column field="title" [filterable]="true"></igx-column>
+</igx-tree-grid>
+```
+
+When you filter for `title = 'Developer'`, all ancestor rows are shown even though they don't match, and they're auto-expanded so you can see the matching children in context.
+
+### Per-Level Sorting
+
+Tree Grid sorting is applied **within each parent level** — children are sorted among siblings, not globally flattened:
+
+```typescript
+// This sorts employees within their respective manager, not globally
+this.treeGridRef().sort({ fieldName: 'name', dir: SortingDirection.Asc, ignoreCase: true });
+```
+
+### Tree Grid Batch Editing
+
+Tree Grid uses `HierarchicalTransactionService` — each transaction carries a `path` array tracing the parent hierarchy, enabling proper undo/redo of nested changes:
+
+```html
+<igx-tree-grid #treeGrid
+  [data]="employees()"
+  [primaryKey]="'id'"
+  [foreignKey]="'managerId'"
+  [batchEditing]="true"
+  [rowEditable]="true"
+  height="600px">
+  <igx-column field="name" [editable]="true"></igx-column>
+</igx-tree-grid>
+```
+
+```typescript
+// Add a row as child of a specific parent
+this.treeGridRef().addRow({ id: 100, name: 'New Employee', managerId: 2 }, 2);
+
+// Cascade delete — deleting a parent removes all descendants (default behavior)
+this.treeGridRef().deleteRow(2); // deletes row 2 and all its children
+```
+
+## Hierarchical Grid Data Operations
+
+> **Docs:** [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid) · [Load on Demand](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/load-on-demand)
+
+### Independent Grid Levels
+
+Each level of a hierarchical grid has its **own independent** sorting, filtering, and paging state. Configure features on the `<igx-row-island>` blueprint:
+
+```html
+<igx-hierarchical-grid #hGrid
+  [data]="companies()"
+  [primaryKey]="'id'"
+  [allowFiltering]="true"
+  [filterMode]="'excelStyleFilter'"
+  height="600px">
+
+  <igx-column field="name" [sortable]="true" [filterable]="true"></igx-column>
+
+  <!-- Each row island defines column/feature config for that level -->
+  <igx-row-island [key]="'orders'" [primaryKey]="'orderId'" [allowFiltering]="true" [rowEditable]="true">
+    <igx-column field="orderId" [sortable]="true" [filterable]="true"></igx-column>
+    <igx-column field="amount" dataType="number" [editable]="true"></igx-column>
+
+    <igx-paginator [perPage]="10"></igx-paginator>
+  </igx-row-island>
+</igx-hierarchical-grid>
+```
+
+### Accessing Child Grid Instances
+
+To perform programmatic operations on child grids, use the `(gridCreated)` event:
+
+```typescript
+onChildGridCreated(event: IGridCreatedEventArgs) {
+  const childGrid = event.grid;
+  // Example: apply a default sort to all child grids
+  childGrid.sort({ fieldName: 'orderId', dir: SortingDirection.Desc, ignoreCase: false });
+}
+```
+
+```html
+<igx-row-island [key]="'orders'" (gridCreated)="onChildGridCreated($event)">
+  <igx-column field="orderId" [sortable]="true"></igx-column>
+</igx-row-island>
+```
+
+### Batch Editing Propagation
+
+Setting `[batchEditing]="true"` on the root hierarchical grid automatically propagates to all child grids:
+
+```html
+<igx-hierarchical-grid #hGrid
+  [data]="companies()"
+  [primaryKey]="'id'"
+  [batchEditing]="true"
+  [rowEditable]="true">
+  <!-- All child grids inherit batchEditing automatically -->
+  <igx-row-island [key]="'departments'" [primaryKey]="'deptId'" [rowEditable]="true">
+    <igx-column field="name" [editable]="true"></igx-column>
+  </igx-row-island>
+</igx-hierarchical-grid>
+```
+
+> **NOTE**: Each child grid instance has its **own** `TransactionService`. Commits must be done per grid instance.
+
+## Pivot Grid Data Operations
+
+> **Docs:** [Pivot Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid)
+
+> **IMPORTANT**: The Pivot Grid does NOT use standard sorting, filtering, editing, or paging APIs. All data operations are controlled through `pivotConfiguration`.
+
+### Dimension-Based Filtering
+
+```typescript
+import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand } from 'igniteui-angular/core';
+
+// Create a filter for a dimension
+const regionFilter = new FilteringExpressionsTree(FilteringLogic.Or);
+regionFilter.filteringOperands = [
+  {
+    fieldName: 'Region',
+    condition: IgxStringFilteringOperand.instance().condition('equals'),
+    searchVal: 'North America'
+  },
+  {
+    fieldName: 'Region',
+    condition: IgxStringFilteringOperand.instance().condition('equals'),
+    searchVal: 'Europe'
+  }
+];
+
+// Apply the filter to a dimension
+this.pivotConfig.filters[0].filter = regionFilter;
+// Notify the grid of the change
+this.pivotGridRef().pipeTrigger++;
+```
+
+### Dimension-Based Sorting
+
+```typescript
+// Sort a row dimension
+this.pivotConfig.rows[0].sortDirection = SortingDirection.Desc;
+this.pivotGridRef().pipeTrigger++;
+```
+
+### Key Pivot Grid Limitations
+
+- No cell/row editing, batch editing, or row adding
+- No paging
+- No column pinning, moving, or hiding (columns are auto-generated)
+- No row dragging
+- No standard filtering (`allowFiltering` is forced to `false`)
+- No GroupBy (grouping is inherent via dimensions)
+- State persistence serializes the full `pivotConfiguration`
+
+## Grid Lite Data Operations
+
+> **Grid Lite sorting, filtering, remote data, events, and limitations are fully documented in [`types.md`](./types.md#grid-lite).** Refer to that file for all Grid Lite data operations — this section intentionally avoids duplicating that content.
+>
+> Key differences from Flat/Tree/Hierarchical Grid APIs:
+> - Uses `IgxGridLiteSortingExpression` / `IgxGridLiteFilteringExpression` (NOT `ISortingExpression` / `FilteringExpressionsTree`)
+> - Uses `dataPipelineConfiguration` for remote ops (NOT noop strategies + events)
+> - Has no editing, grouping, paging, summaries, selection, state persistence, or export
+
+## Key Rules
+
+1. **State persistence** — use `IgxGridStateDirective` to save/restore sort, filter, group, and column configuration; functions (formatters, strategies, summaries) must be reapplied via `stateParsed` event
+2. **Tree Grid filtering is recursive** — parents of matching children are always shown and auto-expanded
+3. **Hierarchical Grid levels are independent** — sorting/filtering/paging don't cascade; configure on `<igx-row-island>`
+4. **Pivot Grid is read-only** — no editing, paging, or standard filtering/sorting; use `pivotConfiguration` for all data operations
+5. **Grid Lite has its own API** — uses `IgxGridLiteSortingExpression`/`IgxGridLiteFilteringExpression` (NOT `ISortingExpression`/`FilteringExpressionsTree`), `dataPipelineConfiguration` for remote ops (NOT noop strategies), and has no editing, grouping, paging, summaries, or selection
+6. **Use the correct component type for `viewChild`** — `IgxGridLiteComponent`, `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent`
+7. **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 (with `CUSTOM_ELEMENTS_SCHEMA`)
+8. **Use signals for data** — `[data]="myData()"` with `signal<T[]>([])`
+
+## See Also
+
+- [`data-operations.md`](./data-operations.md) — Sorting, filtering, grouping, and canonical grid import patterns
+- [`paging-remote.md`](./paging-remote.md) — Paging, remote data operations, virtualization
+- [`editing.md`](./editing.md) — Cell editing, row editing, batch editing, validation, summaries
+- [`structure.md`](./structure.md) — Grid structure, column configuration, templates, layout, selection
+- [`../../igniteui-angular-components/SKILL.md`](../../igniteui-angular-components/SKILL.md) — Non-grid Ignite UI components
+- [`../../igniteui-angular-theming/SKILL.md`](../../igniteui-angular-theming/SKILL.md) — Theming & Styling

package/igx-ts/projects/_base/files/__dot__claude/skills/igniteui-angular-grids/references/structure.md

@@ -0,0 +1,299 @@
+# Grid Structure — Column Configuration, Sorting, Filtering & Selection
+
+> **Part of the [`igniteui-angular-grids`](../SKILL.md) skill hub.**
+> For grid type selection, imports, and feature availability — see the hub.
+> For editing, grouping, summaries, toolbar, export — see [`features.md`](./features.md).
+> For Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics — see [`types.md`](./types.md).
+> For programmatic data operations — see [`data-operations.md`](./data-operations.md).
+
+## Contents
+
+- [Quick Start](#quick-start)
+- [Column Configuration](#column-configuration)
+- [Sorting](#sorting)
+- [Filtering](#filtering)
+- [Selection](#selection)
+- [Key Rules](#key-rules)
+
+## Quick Start
+
+### 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[]>([]);
+}
+```
+
+### 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>
+```
+
+## Column Configuration
+
+> **Docs:** [Column Types](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/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) |
+
+### Column Templates
+
+> **Docs:** [Column Configuration](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid#angular-grid-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>
+```
+
+### Column Groups
+
+> **Docs:** [Collapsible Column Groups](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/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>
+```
+
+### Multi-Row Layout (MRL)
+
+> **Docs:** [Multi-Row Layout](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/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>
+```
+
+### Column Pinning
+
+> **Docs:** [Column Pinning](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-pinning)
+
+```html
+<igx-column field="name" [pinned]="true"></igx-column>
+```
+
+Or programmatically: `this.gridRef().pinColumn('name')`.
+
+## Sorting
+
+> **Docs:** [Sorting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sorting) (substitute URL prefix per grid type — see hub instruction)
+
+```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)`.
+
+For advanced programmatic sorting patterns, custom sort strategies, and sorting events — see [`data-operations.md`](./data-operations.md).
+
+## Filtering
+
+### Quick Filter (Row Filter)
+
+> **Docs:** [Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/filtering)
+
+```html
+<igx-grid [allowFiltering]="true" [filterMode]="'quickFilter'">
+  <igx-column field="name" [filterable]="true"></igx-column>
+</igx-grid>
+```
+
+### Excel-Style Filter
+
+> **Docs:** [Excel-Style Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel-style-filtering)
+
+```html
+<igx-grid [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
+  <igx-column field="name" [filterable]="true"></igx-column>
+</igx-grid>
+```
+
+### Advanced Filtering Dialog
+
+> **Docs:** [Advanced Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/advanced-filtering)
+
+```html
+<igx-grid [allowAdvancedFiltering]="true">
+  <!-- Advanced filtering UI is shown via toolbar or 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)`.
+
+For advanced programmatic filtering, complex AND/OR trees, and remote filtering patterns — see [`data-operations.md`](./data-operations.md).
+
+## Selection
+
+### Row Selection
+
+> **Docs:** [Row Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/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).
+
+### Cell Selection
+
+> **Docs:** [Cell Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-selection)
+
+```html
+<igx-grid [cellSelection]="'multiple'"></igx-grid>
+```
+
+### Column Selection
+
+> **Docs:** [Column Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-selection)
+
+```html
+<igx-grid [columnSelection]="'multiple'">
+  <igx-column field="name" [selectable]="true"></igx-column>
+</igx-grid>
+```
+
+Events: `(rowSelectionChanging)`, `(columnSelectionChanging)`, `(selected)` (cell).
+
+## Key Rules
+
+1. **Pick the right grid type first** — see the [hub](../SKILL.md) for the decision guide
+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. **Use signals** for data binding — `[data]="myData()"` with `signal<T[]>([])`
+8. **Virtualization is automatic** — don't wrap grids in virtual scroll containers
+
+## See Also
+
+- [`features.md`](./features.md) — Editing, grouping, summaries, toolbar, export, row drag, action strip, master-detail
+- [`types.md`](./types.md) — Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics
+- [`data-operations.md`](./data-operations.md) — Programmatic sorting, filtering, grouping, canonical import patterns
+- [`paging-remote.md`](./paging-remote.md) — Paging, remote data operations, virtualization
+- [`editing.md`](./editing.md) — Cell editing, row editing, batch editing, validation, summaries
+- [`state.md`](./state.md) — State persistence, grid-type-specific operations
+- [`../../igniteui-angular-theming/SKILL.md`](../../igniteui-angular-theming/SKILL.md) — Grid styling and theming