React Data Grid CRUD Tutorial with Ignite UI for React and .NET API

Description

Build a full React Data Grid CRUD app with Ignite UI for React and a .NET Core API. In this demo, you’ll see a complete Northwind Operations Console with create, read, update, and delete behavior powered by the Ignite UI React Data Grid. The app uses Ignite UI for React on the front end, a .NET Core back end, and a SQLite database, although the same architecture can work with PostgreSQL, SQL Server, or other databases. The React Data Grid handles much of the enterprise UI experience, including inline editing, row actions, delete confirmation, dropdown editors, date editors, search, filtering, paging, column pinning, summaries, grouped headers, themes, and API-driven updates. In this video, you’ll learn how to: - Build a full CRUD app with React, Ignite UI, and .NET Core - Use the Ignite UI React Data Grid for create, read, update, and delete workflows - Add row actions for edit and delete - Edit data directly inside the grid - Use dropdown editors and date editors in grid cells - Save changes through a .NET Core Web API - Connect grid events like row edit and row delete to API services - Use a SQLite database with a Northwind-style data model - Work with multiple entities, including Orders, Customers, Products, Shippers, and Salespeople - Add Excel-style filtering, full grid search, paging, and column pinning - Use column summaries and grouped headers for product inventory data - Switch between Ignite UI themes like Indigo, Material, and Fluent - Customize the CRUD experience with inline editing, dialogs, or row action strips - Use Ignite UI MCP servers and AI skills with Claude Code or GitHub Copilot to help build enterprise React apps The key takeaway: the React Data Grid does most of the heavy lifting for enterprise CRUD applications. Instead of building custom edit forms, filter panels, paging, search, and row actions from scratch, you can use Ignite UI for React to deliver a rich data experience faster. Get the code: https://github.com/react-grids Read the blog: https://www.infragistics.com/blogs/react-data-grid-crud-dotnet 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 Ignite UI for React components: https://www.infragistics.com/products/ignite-ui-react/react/components #ReactDataGrid #ReactCRUD #IgniteUI #ReactJS #DotNet #DotNetCore #WebAPI #Northwind #ClaudeCode #MCP #AIcoding #JavaScript #TypeScript #WebDevelopment Chapters: 0:00 Introduction to the React Data Grid CRUD app 0:25 Northwind app architecture: React, .NET Core, and SQLite 0:50 Dashboard overview and salesperson order details 1:20 Customers, products, and shippers pages 1:50 CRUD inside the React Data Grid 2:20 Row actions for edit and delete 2:50 Inline editing with dropdown and date editors 3:25 Saving updates through the .NET API 3:55 Double-click editing and autocomplete 4:25 Editing customer data directly in the grid 4:55 Custom CRUD actions with dialogs 5:25 Switching Ignite UI themes 6:05 Swagger API overview 6:35 React Data Grid code walkthrough 7:05 Grid events for row edit and delete 7:35 Enterprise grid features: search, filtering, pinning, and paging 8:05 Wrap-up: full CRUD with Ignite UI, MCP, and AI skills