React Data Grid Tutorial: Ignite UI CLI, Claude Code & MCP

Description

Build a full-featured React Data Grid using the Ignite UI CLI, Claude Code, MCP servers, and Ignite UI for React. In this demo, you’ll start from an empty folder, create a new React app with the Ignite UI CLI, add a grid route, configure Ignite UI Agent Skills and MCP servers, and then use Claude Code to generate an enterprise-ready data grid. The final React grid includes live data binding, Excel-style filtering, sorting, grouping, paging, column moving, column pinning, row selection, custom columns, conditional formatting, salesperson avatars, theme switching, Export to Excel, a custom Aurora Ops theme, and rich customer tooltips with sparkline-style data. Ignite UI for React gives developers production-ready React components and enterprise grid features so you don’t have to build advanced UI behavior from scratch. With Ignite UI Agent Skills and MCP servers, AI coding tools like Claude Code can work with better component context, theming guidance, and framework-specific patterns. In this video, you’ll learn how to: - Create a React app with the Ignite UI CLI - Add an Ignite UI React Grid component from the CLI - Confirm the required Ignite UI CLI version for AI workflows - Configure Ignite UI Agent Skills and MCP servers - Connect Ignite UI MCP servers in Claude Code - Bind the React Data Grid to live invoice data - Enable filtering, sorting, grouping, paging, and selection - Replace auto-generated columns with custom grid columns - Add pinned columns, avatars, and conditional templates - Switch between Ignite UI themes - Export grouped grid data to Excel - Create a custom Aurora Ops theme with Ignite UI design tokens - Add custom customer tooltips with revenue and shipment data Explore the React Data Grid: https://www.infragistics.com/react-data-grid Ignite UI for React: https://www.infragistics.com/products/ignite-ui-react React Data Grid documentation: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid AI-assisted app development with Ignite UI: https://www.infragistics.com/products/ignite-ui/ai-assisted-development Install Ignite UI for React: npm install igniteui-react-grids igniteui-react Learn more about Ignite UI: https://www.infragistics.com/products/ignite-ui Get the code: https://github.com/react-grids/ignite-ui-react-data-grid-cli #ReactDataGrid #IgniteUI #ClaudeCode #MCP #ReactJS #ReactGrid #AIcoding #WebDevelopment #JavaScript #TypeScript Chapters: 0:00 Introduction to AI-assisted Ignite UI development 0:35 Start from an empty folder in Visual Studio Code 0:55 Check the Ignite UI CLI version 1:15 Create a React app with the Ignite UI CLI 1:55 Add an Ignite UI React Grid component 2:35 Run the app and open the default grid route 3:05 Review generated Agent Skills and MCP setup 3:45 Configure Claude Code MCP settings 4:30 Confirm Ignite UI CLI and theming MCP availability 5:10 Prompt Claude Code to update the grid page 6:10 Bind the React Data Grid to live invoice data 6:55 Review the first generated enterprise grid 7:45 Add custom columns and formatting 8:35 Add theme switching and more grid features 9:30 Add pinned columns, avatars, and conditional templates 10:35 Test grouping, paging, filtering, and column actions 11:35 Export the React Data Grid to Excel 12:25 Add the Aurora Ops custom theme 13:10 Add customer tooltips with sparkline data 14:10 Review the final themed React Data Grid 15:00 Wrap-up: Ignite UI CLI, MCP servers, and Claude Code