igniteui-react-grids

Ignite UI for React Grids - from Infragistics

Ignite UI for React includes a wide range of easy to use React UI components that have been designed and optimized for high-performance, high-volume data scenarios. Ignite UI for React is designed to enable developers to craft modern web app experiences using the most comprehensive UI library of modular React Components and the fastest data grid optimized for speed and performance.

Browser Support

Latest ✔️	Latest ✔️	Latest ✔️	Latest ✔️	Latest ✔️

Grid Components

This package provides the following grid components:

Component	Status	Documentation
Grid	✅	Docs
Tree Grid	✅	Docs
Pivot Grid	✅	Docs
Hierarchical Grid	✅	Docs

Key Features

• Virtualized rows and columns for unlimited data size
• Column sorting, filtering, pinning, moving, hiding, and resizing
• Row selection, cell selection, and clipboard support
• Inline editing with cell, row, and batch editing modes
• Built-in column types and templating support
• Multi-column headers and column groups
• Row and cell conditional styling
• Export to Excel and CSV
• Advanced filtering with filter row and Excel-style filter
• Grouping, summaries, and paging
• Keyboard navigation and accessibility

AI-Assisted Development

Ignite UI for React provides a toolchain to enhance the AI coding workflow — Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server, and the MAKER MCP server — that grounds AI coding assistants in correct component APIs, import paths, and design tokens.

Component	What it provides
Agent Skills	Structured specialized knowledge and workflow files: import paths, component patterns, decision flows, generate from image design
CLI MCP server (igniteui-cli)	Documentation queries, API reference, project scaffolding tools via MCP
Theming MCP server (igniteui-theming)	Design tokens, palette tools, CSS custom property generation, WCAG AA contrast validation
MAKER MCP server (@igniteui/maker-mcp)	Multi-agent orchestration: decomposes complex tasks into validated, executable step plans

Note: All AI toolchain commands require Ignite UI CLI 15.0.0 or newer.

Add AI toolchain to an existing project

Run this command from the root of your project:

ig ai-config

If the Ignite UI CLI is not installed globally, run npm install -g igniteui-cli.

This adds Agent Skills and instructions to agent discovery path(s) and configures MCP server entries.

Start a new project with AI toolchain

Run the Ignite UI CLI to scaffold a new React project with the AI toolchain configured from the start:

ig new

If the Ignite UI CLI is not installed globally, run npm install -g igniteui-cli.

Agent Skills

Ignite UI for React ships with Agent Skills — structured knowledge files that tell AI coding assistants exactly how to use Ignite UI for React. The skill files are included in the igniteui-react package and also live in the skills/ directory.

Skill	Description
components	Identify the right React components (Igr*) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, Next.js setup
customize-theme	Customize styling using CSS custom properties, Sass, and the theming system in React
optimize-bundle-size	Reduce bundle size with granular imports, tree-shaking, and lazy loading
generate-from-image-design	Turn a screenshot, mockup, or wireframe into a React view using Ignite UI components, MCP-guided theming, and screenshot-first layout matching

When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data — which may reference outdated API signatures or import paths.

For full setup instructions, see the AI-Assisted Development documentation.

License

This is a commercial product, requiring a valid paid-for license for use. License details can be found here.

To acquire a license for usage, please register for a trial and acquire a license at Infragistics.com.

(c) Copyright 2026 Infragistics. All Rights Reserved. The Infragistics Ultimate license & copyright applies to this distribution. For information on that license, please go to our website here.