May 3
Loading video player...
Learn how to build an enterprise React Data Grid with Claude Code, MCP servers, and Ignite UI for React. This demo shows an AI-assisted workflow for creating a React grid with data binding, grouping, filtering, paging, pinned columns, custom templates, theming, tooltips, and Export to Excel. Ignite UI for React gives you production-ready React components, including a high-performance data grid, charts, themes, design tokens, and enterprise UI features that developers can use directly instead of building everything from scratch. In this video, you’ll learn how to: - Create a new React app - Install Ignite UI for React and Ignite UI React Grids - Configure Ignite UI agent skills and MCP servers for Claude Code - Generate a React Data Grid from a JSON data source - Add grouping, filtering, paging, sorting, and selection - Pin columns to the left and right - Format currency and percentage columns - Add avatars, icons, custom cell templates, and tooltips - Use Ignite UI themes and create a custom Aurora Ops theme - Export grouped React Data Grid data to Excel - Accelerate enterprise React UI development with AI agents 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 Install Ignite UI for React: npm install igniteui-react-grids igniteui-react Learn more about Ignite UI: https://www.infragistics.com/products/ignite-ui #ReactDataGrid #ClaudeCode #MCP #IgniteUI #React #ReactGrid #AIcoding #WebDevelopment #JavaScript #typescript Chapters: 0:00 Introduction to AI-assisted Ignite UI development 0:30 Create a new React app 1:00 Install Ignite UI for React and React Grid packages 1:30 Configure Ignite UI Agent Skills and MCP servers 2:20 Open the project in Visual Studio Code 2:50 Connect Ignite UI MCP servers in Claude Code 3:40 Define the React Data Grid project goal 4:35 Prompt Claude Code to build the invoices grid 5:40 Run the React app locally 6:20 Review the first generated grid 7:00 Fix the missing data issue 7:45 Add custom columns and formatting 8:50 Add grouping, selection, paging, and pinned columns 10:00 Add avatars and custom cell templates 11:00 Review the generated Ignite UI React Grid 12:00 Test grouping, paging, themes, and Excel export 13:20 Add the Aurora Ops theme and custom tooltip 14:30 Review the final React Data Grid experience 15:30 Wrap-up: Claude Code, MCP servers, and Ignite UI