igniteui-angular-grids

0
0
Source

Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data.

Install

mkdir -p .claude/skills/igniteui-angular-grids && curl -L -o skill.zip "https://mcp.directory/api/skills/download/7166" && unzip -o skill.zip -d .claude/skills/igniteui-angular-grids && rm skill.zip

Installs to .claude/skills/igniteui-angular-grids

About this skill

Ignite UI for Angular — Data Grids

MANDATORY AGENT PROTOCOL — YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT

This file is a routing hub only. It contains NO code examples and NO API details.

DO NOT write any code, component selectors, import paths, method names, or property names from memory. Grid APIs change between versions. Anything generated without reading the reference files will be wrong.

You are required to complete ALL of the following steps before producing any grid-related code or answer:

STEP 1 — Identify the grid type. Use the Grid Selection Decision Guide below. If the grid type is not explicitly stated, infer it from context or ask.

STEP 2 — Identify every task category involved. Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., remote paging AND editing requires reading both paging-remote.md AND editing.md).

STEP 3 — Read every identified reference file in full (PARALLEL). Call read_file (or equivalent) on all reference files identified in Step 2 in a single parallel batch — do NOT read them one at a time sequentially. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.

STEP 4 — Only then produce output. Base your code and explanation exclusively on what you read in Step 3. If the reference files do not cover something, say so explicitly rather than guessing.

Task → Reference File

TaskReference file to read
Grid type selection, column config, column templates, column groups, MRL, pinning, sorting UI, filtering UI, selectionreferences/structure.md
Grouping, summaries, cell merging, toolbar, export, row drag, action strip, master-detail, clipboardreferences/features.md
Tree Grid specifics, Hierarchical Grid specifics, Grid Lite setup, Grid Lite data operations, Pivot Grid setupreferences/types.md
Programmatic sorting / filtering / grouping, canonical import patterns, viewChild accessreferences/data-operations.md
Cell editing, row editing, batch editing, transactions, validation, summariesreferences/editing.md
Paging, remote data, server-side ops, noop strategies, virtual scroll, multi-grid coordinationreferences/paging-remote.md
State persistence, Tree Grid / Hierarchical Grid / Pivot Grid data operationsreferences/state.md

When in doubt, read more rather than fewer reference files. The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application.


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 igniteui-angular-theming)

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.

Grid Selection Decision Guide

Ask these questions in order:

  1. 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). If the user later needs features beyond Grid Lite's capabilities, upgrade strictly to igx-grid (IgxGridComponent) — never recommend non-grid components as a substitute.
  2. Does the user need pivot-table analytics (rows/columns/values/aggregations that users can drag-and-drop to reshape)? → Pivot Grid
  3. Does the data have parent-child relationships where each level has a DIFFERENT schema (e.g., Companies → Departments → Employees)? → Hierarchical Grid
  4. Does the data have parent-child relationships within a SINGLE schema (e.g., Employees with a managerId field, or nested children arrays)? → Tree Grid
  5. Is the data a flat list/table with enterprise features needed (editing, batch editing, grouping, paging, export, etc.)? → Flat Grid

After choosing the grid type, you must still complete Steps 2–4 from the mandatory protocol above — return to the routing table and read every applicable references/ file before writing any code. The decision guide and the tables on this page are discovery aids only; they do not replace the reference files.

Grid Types & 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. Never import from the root barrel of either package.

GridSelectorComponentDirectivesEntry Point
Grid Liteigx-grid-liteIgxGridLiteComponentIndividual importsigniteui-angular/grids/lite
Flat Gridigx-gridIgxGridComponentIGX_GRID_DIRECTIVESigniteui-angular/grids/grid
Tree Gridigx-tree-gridIgxTreeGridComponentIGX_TREE_GRID_DIRECTIVESigniteui-angular/grids/tree-grid
Hierarchical Gridigx-hierarchical-gridIgxHierarchicalGridComponentIGX_HIERARCHICAL_GRID_DIRECTIVESigniteui-angular/grids/hierarchical-grid
Pivot Gridigx-pivot-gridIgxPivotGridComponentIGX_PIVOT_GRID_DIRECTIVESigniteui-angular/grids/pivot-grid

Replace igniteui-angular with @infragistics/igniteui-angular for the licensed package — entry-point paths are identical.

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}

Feature Availability per Grid Type

FeatureGrid LiteFlat GridTree GridHierarchical GridPivot Grid
Column sortingYesYesYes (per-level)Yes (per grid level)Per-dimension only
Column filteringYesYesYes (recursive — keeps matching parents)Yes (per grid level)Per-dimension only
GroupByNoExclusiveNo (use tree hierarchy)NoInherent via dimensions
PagingNoYesYesYes (each level independent)No
Batch editingNoYesYes (hierarchical transactions)Yes (propagated from root)No
Cell / Row editingNoYesYesYes (per grid level)No
Row addingNoYesYes (with parent support)Yes (per grid level)No
Master-DetailNoExclusiveNoNo (use row islands)No
Row selectionNoYesYes + multipleCascadeYes (per grid level)Limited
Load on demandNoNoExclusiveNoNo
Column pinning / movingNoYesYesYesNo
Column hidingYesYesYesYesNo
Column resizingYesYesYesYesNo
SummariesNoYesYes (per-level)Yes (per grid level)Horizontal summaries only
State persistenceNoYesYesYes + row island statePivot config serialization
Remote data opsdataPipelineConfigurationEvents + noop strategiesEvents + noop strategiesEvents + noop strategiesN/A
Row virtualizationYesYes (rows + columns)Yes (rows + columns)Yes (rows + columns)Yes

igniteui-angular-components

igniteui

Provides guidance on all non-grid Ignite UI for Angular UI components including application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter, Navigation Drawer, Layout Manager), data display (List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Bar, Linear Progress Bar, Circular Progress Bar, Chat), feedback/overlays (Dialog, Snackbar, Toast, Banner), directives (Button, Ripple, Tooltip, Drag and Drop), Dock Manager, and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart, IgxCategoryChart, IgxFinancialChart, IgxDataChart, IgxPieChart). Use when users ask about any Ignite UI Angular component that is not a data grid, such as forms, inputs, dropdowns, date pickers, dialogs, navigation, lists, trees, cards, charts, or application scaffolding and setup.

00

igniteui-angular-theming

igniteui

Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens.

00

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

9521,094

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

846846

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

571699

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

548492

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

673466

fastapi-templates

wshobson

Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.

514280

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.