Add documentation for grid structure and types in igniteui-angular-grids

- Created structure.md detailing column configuration, sorting, filtering, and selection for grids.
- Introduced types.md covering Tree Grid, Hierarchical Grid, Grid Lite, and Pivot Grid, including their unique features and data operation behaviors.

Author: zdrawku

.github/copilot-instructions.md

@@ -120,11 +120,5 @@ Domain-specific skills for AI-assisted development are located in the [`skills/`
 
 - [`skills/igniteui-angular-components`](../skills/igniteui-angular-components/SKILL.md) — Components — Form Controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, forms integration)
 - [`skills/igniteui-angular-components-layout`](../skills/igniteui-angular-components-layout/SKILL.md) — Components — Layout & Display (Tabs, Stepper, Accordion, List, Card, Dialog, Snackbar, directives)
-- [`skills/igniteui-angular-grids`](../skills/igniteui-angular-grids/SKILL.md) — Data Grids — Structure (grid type selection, column configuration, sorting, filtering, selection)
-- [`skills/igniteui-angular-grids-features`](../skills/igniteui-angular-grids-features/SKILL.md) — Data Grids — Features (editing, grouping, summaries, toolbar, export, row drag, master-detail)
-- [`skills/igniteui-angular-grids-types`](../skills/igniteui-angular-grids-types/SKILL.md) — Data Grids — Grid Types (Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics)
-- [`skills/igniteui-angular-grid-data-operations`](../skills/igniteui-angular-grid-data-operations/SKILL.md) — Grid Data Operations (sorting, filtering, grouping, canonical grid import patterns)
-- [`skills/igniteui-angular-grid-paging-remote`](../skills/igniteui-angular-grid-paging-remote/SKILL.md) — Grid Paging & Remote (paging, remote data operations, virtualization, multi-grid coordination)
-- [`skills/igniteui-angular-grid-editing`](../skills/igniteui-angular-grid-editing/SKILL.md) — Grid Editing (cell editing, row editing, batch editing, validation, summaries)
-- [`skills/igniteui-angular-grid-state`](../skills/igniteui-angular-grid-state/SKILL.md) — Grid State (state persistence, Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite operations)
+- [`skills/igniteui-angular-grids`](../skills/igniteui-angular-grids/SKILL.md) — Data Grids (grid type selection, column config, sorting, filtering, selection, editing, grouping, paging, remote data, state persistence, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid)
 - [`skills/igniteui-angular-theming`](../skills/igniteui-angular-theming/SKILL.md) — Theming & Styling (includes MCP server setup)

skills/igniteui-angular-grids/SKILL.md

@@ -1,33 +1,10 @@
----
-name: igniteui-angular-grid-data-operations
-description: "Sorting, filtering, grouping, and canonical grid import patterns for Ignite UI Angular grids. Use when users ask to sort, filter, or group grid data programmatically or via the template, work with sorting/filtering expressions, import a grid component, or access a grid instance with viewChild."
-user-invokable: true
----
+# Grid Data Operations — Sorting, Filtering & Grouping
 
-# Ignite UI for Angular — Grid Sorting, Filtering & Grouping
-
-## Description
-
-This skill teaches AI agents how to implement **sorting, filtering, and grouping** with Ignite UI for Angular grids. It also provides the **canonical grid import patterns** and grid instance access that all sibling grid skills reference.
-
-> **When to use this skill vs. the Data Grids skill**
->
-> | Skill | Focus |
-> |---|---|
-> | **Data Grids** (`igniteui-angular-grids`) | Grid structure — choosing a grid type, column configuration, templates, layout, selection, toolbar, export |
-> | **Grid Data Operations** (this skill) | Sorting, filtering, grouping, and canonical grid import patterns |
-> | **Grid Paging & Remote** (`igniteui-angular-grid-paging-remote`) | Paging, remote data operations, virtualization, multi-grid coordination |
-> | **Grid Editing** (`igniteui-angular-grid-editing`) | Cell editing, row editing, batch editing, validation, summaries |
-> | **Grid State** (`igniteui-angular-grid-state`) | State persistence, Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite data operations |
->
-> If the user's question is about *what* to render (columns, templates, grid type), use the Data Grids skill. If it's about *how data flows* (sorting, filtering, remote services, transactions), use this skill and its siblings.
-
-## 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)
-- Familiarity with the Data Grids skill for grid setup basics
+> **Part of the [`igniteui-angular-grids`](../SKILL.md) skill hub.**
+> For grid setup, column config — see [`structure.md`](./structure.md).
+> For paging and remote data — see [`paging-remote.md`](./paging-remote.md).
+> For editing and validation — see [`editing.md`](./editing.md).
+> For state persistence — see [`state.md`](./state.md).
 
 ## Accessing the Grid Instance
 
@@ -134,13 +111,13 @@ export class CompanyGridComponent {
 </igx-hierarchical-grid>
 ```
 
-> **CRITICAL**: Every programmatic example in this skill uses Flat Grid (`IgxGridComponent`) by default. For Tree Grid substitute `IgxTreeGridComponent` and `#treeGrid`. For Hierarchical Grid substitute `IgxHierarchicalGridComponent` and `#hGrid`. The sorting, filtering, and editing APIs are either the same or very similar across all three grid types (Flat, Tree, Hierarchical). **Pivot Grid does NOT support standard sorting/filtering/editing APIs** — see the [Grid State skill](../igniteui-angular-grid-state/SKILL.md). **Grid Lite has its own lightweight sorting/filtering API** — see the [Grid State skill](../igniteui-angular-grid-state/SKILL.md).
+> **CRITICAL**: Every programmatic example in this file uses Flat Grid (`IgxGridComponent`) by default. For Tree Grid substitute `IgxTreeGridComponent` and `#treeGrid`. For Hierarchical Grid substitute `IgxHierarchicalGridComponent` and `#hGrid`. The sorting, filtering, and editing APIs are either the same or very similar across all three grid types (Flat, Tree, Hierarchical). **Pivot Grid does NOT support standard sorting/filtering/editing APIs** — see [`state.md`](./state.md). **Grid Lite has its own lightweight sorting/filtering API** — see [`state.md`](./state.md).
 
 ## Sorting
 
 > **Docs:** [Sorting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sorting) · [Tree Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/sorting) · [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/sorting)
 
-> **Applies to**: Flat Grid, Tree Grid, and Hierarchical Grid. Pivot Grid uses dimension-level sorting instead (see [Grid State skill](../igniteui-angular-grid-state/SKILL.md)). **Grid Lite** uses a different sorting API — see the [Grid State skill](../igniteui-angular-grid-state/SKILL.md).
+> **Applies to**: Flat Grid, Tree Grid, and Hierarchical Grid. Pivot Grid uses dimension-level sorting instead (see [`state.md`](./state.md)). **Grid Lite** uses a different sorting API — see [`state.md`](./state.md).
 >
 > **Tree Grid behavior**: sorting is applied per-level — children are sorted among their siblings, not globally flattened.
 >
@@ -235,7 +212,7 @@ class PrioritySortStrategy implements ISortingStrategy {
 
 > **Docs:** [Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/filtering) · [Excel-Style](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel-style-filtering) · [Advanced](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/advanced-filtering) (substitute URL prefix per grid type)
 
-> **Applies to**: Flat Grid, Tree Grid, and Hierarchical Grid. Pivot Grid uses dimension-level filtering instead (see [Grid State skill](../igniteui-angular-grid-state/SKILL.md)). **Grid Lite** uses a different filtering API — see the [Grid State skill](../igniteui-angular-grid-state/SKILL.md).
+> **Applies to**: Flat Grid, Tree Grid, and Hierarchical Grid. Pivot Grid uses dimension-level filtering instead (see [`state.md`](./state.md)). **Grid Lite** uses a different filtering API — see [`state.md`](./state.md).
 >
 > **Tree Grid behavior**: filtering is **recursive** — when a child matches, all its ancestor rows are shown (even if they don't match) and auto-expanded.
 >
@@ -448,11 +425,11 @@ const monthGroupComparer = (a: Date, b: Date) => {
 8. **Hierarchical Grid levels are independent** — sorting/filtering don't cascade; configure on `<igx-row-island>`
 9. **Use `filteringExpressionsTree` for programmatic filtering** — `advancedFilteringExpressionsTree` is only for the advanced filtering dialog
 
-## Related Skills
+## See Also
 
-- [`igniteui-angular-grid-paging-remote`](../igniteui-angular-grid-paging-remote/SKILL.md) — Paging, remote data operations, virtualization, and multi-grid coordination
-- [`igniteui-angular-grid-editing`](../igniteui-angular-grid-editing/SKILL.md) — Cell editing, row editing, batch editing, validation, and summaries
-- [`igniteui-angular-grid-state`](../igniteui-angular-grid-state/SKILL.md) — State persistence, Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite data operations
-- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — Grid structure, column configuration, templates, layout, selection, toolbar, export
-- [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) — Components & Layout
-- [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) — Theming & Styling
+- [`paging-remote.md`](./paging-remote.md) — Paging, remote data operations, virtualization, multi-grid coordination
+- [`editing.md`](./editing.md) — Cell editing, row editing, batch editing, validation, summaries
+- [`state.md`](./state.md) — State persistence, Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite data operations
+- [`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

…ui-angular-grid-data-operations/SKILL.md …ular-grids/references/data-operations.mdskills/igniteui-angular-grid-data-operations/SKILL.md renamed to skills/igniteui-angular-grids/references/data-operations.md skills/igniteui-angular-grid-data-operations/SKILL.md renamed to skills/igniteui-angular-grids/references/data-operations.md

@@ -1,23 +1,9 @@
----
-name: igniteui-angular-grid-editing
-description: "Cell editing, row editing, batch editing, validation, and summaries patterns for Ignite UI Angular grids. Use when users ask to make a grid editable, implement cell or row editing, enable batch editing with undo/redo, add CRUD operations to a grid, validate grid input, or display column summaries."
-user-invokable: true
----
-
-# Ignite UI for Angular — Grid Editing, Validation & Summaries
-
-## Description
-
-This skill teaches AI agents how to implement **editing, validation, and summary** patterns with Ignite UI for Angular grids. It covers cell editing, row editing, batch editing with transactions, Excel-style editing workflows, editing events, validation (template-driven and reactive), and built-in/custom summaries.
-
-> **For grid import patterns and accessing grid instances, see the [`igniteui-angular-grid-data-operations`](../igniteui-angular-grid-data-operations/SKILL.md) skill.**
-
-## Prerequisites
+# Grid Editing — Cell Editing, Row Editing, Batch Editing & Validation
 
-- 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)
-- Familiarity with the Data Grids skill for grid setup basics
+> **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 state persistence — see [`state.md`](./state.md).
+> For paging and remote data — see [`paging-remote.md`](./paging-remote.md).
 
 ## Editing Data Through the Grid
 
@@ -164,7 +150,7 @@ export class CarsGridComponent {
 > **Key inputs summary:**
 > - `[rowEditable]="true"` — enables the Done/Cancel overlay per row
 > - `[editable]="true"` on each `igx-column` — marks which fields the user can change
-> - `[primaryKey]`— **required** for editing to work
+> - `[primaryKey]` — **required** for editing to work
 > - `[autoGenerate]="false"` — always define columns explicitly when editing is enabled so you control which fields are editable
 > - `<igx-action-strip>` with `<igx-grid-editing-actions>` — adds hover Edit/Delete buttons and an optional Add Row button automatically
 
@@ -484,11 +470,11 @@ When grouping is enabled, summaries appear for each group. Control this with:
 8. **Import the correct directives/components** — `IGX_GRID_DIRECTIVES`, `IGX_TREE_GRID_DIRECTIVES`, `IGX_HIERARCHICAL_GRID_DIRECTIVES`, or `IGX_PIVOT_GRID_DIRECTIVES`
 9. **Use signals for data** — `[data]="myData()"` with `signal<T[]>([])`
 
-## Related Skills
+## See Also
 
-- [`igniteui-angular-grid-data-operations`](../igniteui-angular-grid-data-operations/SKILL.md) — Sorting, filtering, grouping, and canonical grid import patterns
-- [`igniteui-angular-grid-paging-remote`](../igniteui-angular-grid-paging-remote/SKILL.md) — Paging, remote data operations, virtualization, and multi-grid coordination
-- [`igniteui-angular-grid-state`](../igniteui-angular-grid-state/SKILL.md) — State persistence, Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite data operations
-- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — Grid structure, column configuration, templates, layout, selection, toolbar, export
-- [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) — Components & Layout
-- [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) — Theming & Styling
+- [`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
+- [`state.md`](./state.md) — State persistence, Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite data operations
+- [`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

…s/igniteui-angular-grid-editing/SKILL.md …teui-angular-grids/references/editing.mdskills/igniteui-angular-grid-editing/SKILL.md renamed to skills/igniteui-angular-grids/references/editing.md skills/igniteui-angular-grid-editing/SKILL.md renamed to skills/igniteui-angular-grids/references/editing.md

@@ -1,23 +1,13 @@
----
-name: igniteui-angular-grids-features
-description: "Editing, grouping, summaries, toolbar, export, and other advanced features for Ignite UI Angular grids. Use when users ask to add a toolbar, export grid data to Excel or CSV, group rows by a column, add row drag-and-drop, show an action strip, merge cells, or move and pin columns."
-user-invokable: true
----
+# Grid Features — Grouping, Summaries, Toolbar, Export, Row Drag & More
 
-# Ignite UI for Angular — Grid Features Skill
-
-## Description
-
-This skill covers advanced grid features for Ignite UI for Angular: cell editing, row editing, batch editing, row adding/deleting, validation, grouping, summaries, cell merging, toolbar, export (Excel & CSV), virtualization, row drag, action strip, master-detail, and clipboard.
-
-> **Related Skill: Grid Setup & Configuration**
->
-> For grid type selection, column configuration, sorting, filtering, and selection — see the [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) skill.
-> For Tree Grid, Hierarchical Grid, Grid Lite, and Pivot Grid specifics — see [`igniteui-angular-grids-types`](../igniteui-angular-grids-types/SKILL.md).
+> **Part of the [`igniteui-angular-grids`](../SKILL.md) skill hub.**
+> For grid setup, column config, sorting, filtering, selection — see [`structure.md`](./structure.md).
+> For Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics — see [`types.md`](./types.md).
+> For full editing coverage (cell/row/batch) — see [`editing.md`](./editing.md).
 
 ## Editing
 
-> **Full editing coverage is in the [`igniteui-angular-grid-editing`](../igniteui-angular-grid-editing/SKILL.md) skill**, which includes cell editing, row editing, batch editing with transactions, row adding/deleting, validation, and summaries. Use that skill for any editing task.
+> **Full editing coverage is in [`editing.md`](./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:
 
@@ -49,9 +39,11 @@ this.gridRef().groupBy({ fieldName: 'category', dir: SortingDirection.Asc });
 this.gridRef().clearGrouping('category');
 ```
 
+For advanced programmatic grouping patterns — see [`data-operations.md`](./data-operations.md).
+
 ## Summaries
 
-> **Full summaries coverage (built-in and custom summary operands) is in the [`igniteui-angular-grid-editing`](../igniteui-angular-grid-editing/SKILL.md) skill.**
+> **Full summaries coverage (built-in and custom summary operands) is in [`editing.md`](./editing.md).**
 
 Quick reference — enable per-column summaries:
 
@@ -141,15 +133,15 @@ export class MyComponent {
 
 ## Virtualization & Performance
 
-> **Docs:** [Virtualization](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-changelog-dv)
-
 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>
 ```
 
+For full remote virtualization patterns — see [`paging-remote.md`](./paging-remote.md).
+
 ## Row Drag
 
 > **Docs:** [Row Drag](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-drag)
@@ -214,15 +206,13 @@ Grids support copy to clipboard by default. Configure via:
 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
-5. **For data operation patterns** — see the [Grid Data Operations skill](../igniteui-angular-grid-data-operations/SKILL.md) (sorting, filtering, grouping), [Grid Paging & Remote skill](../igniteui-angular-grid-paging-remote/SKILL.md) (paging, remote data, virtualization), [Grid Editing skill](../igniteui-angular-grid-editing/SKILL.md) (editing, validation, summaries), and [Grid State skill](../igniteui-angular-grid-state/SKILL.md) (state persistence, grid-type-specific operations)
-
-## Related Skills
-
-- **[Grid Setup & Configuration](../igniteui-angular-grids/SKILL.md)** — Grid type selection, column configuration, sorting, filtering, selection
-- **[Grid Types](../igniteui-angular-grids-types/SKILL.md)** — Tree Grid, Hierarchical Grid, Grid Lite, and Pivot Grid specifics
-- **[Grid Data Operations](../igniteui-angular-grid-data-operations/SKILL.md)** — Sorting, filtering, grouping, and canonical grid import patterns
-- **[Grid Paging & Remote](../igniteui-angular-grid-paging-remote/SKILL.md)** — Paging, remote data operations, virtualization, multi-grid coordination
-- **[Grid Editing](../igniteui-angular-grid-editing/SKILL.md)** — Cell editing, row editing, batch editing, validation, summaries
-- **[Grid State](../igniteui-angular-grid-state/SKILL.md)** — State persistence, Tree Grid / Hierarchical Grid / Pivot Grid / Grid Lite data operations
-- **[Theming](../igniteui-angular-theming/SKILL.md)** — Grid styling and theming
-- **[Components](../igniteui-angular-components/SKILL.md)** — Non-grid Ignite UI components
+
+## See Also
+
+- [`structure.md`](./structure.md) — Column config, sorting UI, filtering UI, selection
+- [`types.md`](./types.md) — Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics
+- [`data-operations.md`](./data-operations.md) — Programmatic sorting, filtering, grouping
+- [`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
+- [`../../igniteui-angular-theming/SKILL.md`](../../igniteui-angular-theming/SKILL.md) — Grid styling and theming