I rebuilt the classic Northwind admin console in less than 30 minutes \u2014 full CRUD across orders, customers, products, shippers, and salespeople \u2014 using the Ignite UI React Data Grid<\/a><\/strong> for the UI and a tiny .NET 10 + EF Core SQLite<\/strong> API for the back end. Total UI code: about 1,500 lines of TypeScript. Total time spent fighting the grid: ~0 minutes.<\/p>\n\n\n\n If you’re evaluating a React Data Grid<\/strong> for a real admin app, this is the use case that matters: inline editing, filtering, relational dropdowns, validation, master-detail, summaries, and theming that all hold together once the page stops being a toy.<\/p>\n\n\n\n Repo: react-grids\/react-data-grids-crud<\/a><\/strong><\/p>\n\n\n\n That’s the screenshot I want you to walk away with. Hover any row \u2192 an action strip slides in with Edit and Delete. Click Edit \u2192 the row becomes editable inline, Save\/Cancel chips appear. Click into the dropdown \u2192 a search-as-you-type combo with grouped headers. Select a row \u2192 a master-detail panel opens below it with the joined data.<\/p>\n\n\n\n That’s not a custom build. That’s Internal admin apps are everywhere. Every company has them. They never make the demo reel. And yet \u2014 line for line \u2014 they’re some of the hardest UI you can build, because users actually use<\/em> them every day and notice every rough edge.<\/p>\n\n\n\n A real CRUD page needs:<\/p>\n\n\n\n Most teams ship 60% of that, declare victory, and hand it to ops with a shrug. That’s the work the Ignite UI React Data Grid is meant to disappear.<\/p>\n\n\n\n The back end is pure boilerplate. Five entities, one EF Core DbContext, five tiny CRUD controllers, Swashbuckle for OpenAPI:<\/p>\n\n\n\n The controllers are exactly what you’d guess:<\/p>\n\n\n\n The TypeScript types match the JSON shape ASP.NET serializes by default, so there’s no mapping layer to maintain.<\/p>\n\n\n\n Here is the\u00a0entire<\/em>\u00a0CRUD wiring for the Products page.<\/p>\n\n\n\n That gives you, in one component<\/strong>:<\/p>\n\n\n\n The piece I want to call out is The other piece is the render-as-you-want<\/em> Inline editing is great for primitives, but if your row has foreign keys ( Enter <\/p>\n\n\n\n Enterprise features in Ignite UI that your users will love – type-ahead filtering, multi-select with chip rendering, virtualization for thousands of items, and a slot for custom item templates. <\/p>\n\n\n\n Combine\u00a0 When I started to build this app, I had a single theme – the built-in\u00a0Material Light<\/strong>\u00a0theme, applied with one CSS import per file:<\/p>\n\n\n\n Every Ignite UI surface \u2014 chevrons, the action strip, the edit pencil, paginator buttons, dialog headers \u2014 picks up the theme automatically. As the app evolved, I added a selector to swap themes based on the the four design systems out of the box (Material, Fluent, Indigo, Bootstrap) and dark variants for each. Swap one CSS import and the whole app re-themes.<\/p>\n\n\n\n I built this using the Ignite UI MCP servers<\/a> for\u00a0components and theming<\/strong>. Instead of hand-wiring every page from scratch, I used prompting to generate and refine the app structure, (front-end and back-end), component usage, and visual setup in about\u00a020 minutes total<\/strong>.<\/p>\n\n\n\n If you want to see exactly how it was done, the prompt is in the GitHub repo here: docs\/PROMPTS.md<\/a><\/strong>. The MCP setup I used is the Ignite UI CLI MCP<\/a><\/strong> plus the theming MCP workflow.<\/p>\n\n\n\n To make the comparison concrete \u2014 here’s what I didn’t<\/em> have to write:<\/p>\n\n\n\n That’s the value prop. The Ignite UI React Data Grid is shaped exactly like the work you don’t want to do twice.<\/p>\n\n\n\n The full source is at github.com\/react-grids\/react-data-grids-crud<\/a><\/strong>. Clone it, run the .NET API, run the Vite dev server, and you’ll have a working CRUD console in two terminals.<\/p>\n\n\n\n If you want to use the React Data Grid<\/strong> in your own app, start with the Ignite UI React Data Grid page<\/a><\/strong> and grab a free trial from there.<\/p>\n\n\n\n Watch the video on YouTube:<\/p>\n\n\n\n![\"React](\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/05\/react-grid-crud-demo-home-page-1024x499.png\")
<\/figure>\n\n\n\n<IgrGrid rowEditable><\/code> plus <IgrActionStrip><IgrGridEditingActions \/><\/IgrActionStrip><\/code>. We’ll get to the code in a minute.<\/p>\n\n\n\nCRUD demos are easy. CRUD apps are not.<\/strong><\/h2>\n\n\n\n
\n
Setting up the CRUD backend with .NET Core, SQLite.<\/h2>\n\n\n\n
\/\/ server\/Program.cs\nbuilder.Services.AddDbContext<AppDbContext>(opts =>\n opts.UseSqlite(\"Data Source=northwind.db\"));\nbuilder.Services.AddControllers();\nbuilder.Services.AddSwaggerGen();\n<\/pre>\n\n\n\n
\/\/ server\/Controllers\/ProductsController.cs\n[ApiController, Route(\"api\/[controller]\")]\npublic class ProductsController(AppDbContext db) : ControllerBase\n{\n [HttpGet] public Task<List<Product>> GetAll() => db.Products.AsNoTracking().ToListAsync();\n [HttpPost] public async Task<Product> Create(Product p) { db.Add(p); await db.SaveChangesAsync(); return p; }\n [HttpPut(\"{id:int}\")]public async Task Update(int id, Product p) { db.Update(p); await db.SaveChangesAsync(); }\n [HttpDelete(\"{id:int}\")] public async Task Delete(int id) { db.Remove(await db.Products.FindAsync(id)); await db.SaveChangesAsync(); }\n}\n<\/pre>\n\n\n\ndotnet run<\/code>\u00a0and you get a Swagger UI at\u00a0\/swagger<\/code>. Now you can see \u2014 and call \u2014 every endpoint without writing a frontend yet. This is the contract that makes the React side easy: a typed REST API the frontend can mirror line for line.<\/p>\n\n\n\nThe frontend service layer mirrors the API<\/h2>\n\n\n\n
\/\/ client\/src\/api\/types.ts\nexport interface Product {\n productID: number;\n productName: string;\n unitPrice: number;\n stockLevel: number;\n}\n\n\/\/ client\/src\/api\/services.ts\nexport const ProductsService = {\n list: () => api.get<Product[]>('\/api\/Products'),\n get: (id: number) => api.get<Product>(`\/api\/Products\/${id}`),\n create: (p: Omit<Product, 'productID'>) => api.post<Product>('\/api\/Products', p),\n update: (p: Product) => api.put<void>(`\/api\/Products\/${p.productID}`, p),\n remove: (id: number) => api.del(`\/api\/Products\/${id}`),\n};\n<\/pre>\n\n\n\nThe part this whole post is about: the React Data Grid<\/h2>\n\n\n\n
import {\n IgrGrid, IgrColumn, IgrPaginator,\n IgrActionStrip, IgrGridEditingActions,\n} from 'igniteui-react-grids';\n\n<IgrGrid\n data={filtered}\n primaryKey=\"productID\"\n rowEditable={true}\n allowFiltering={true}\n filterMode=\"excelStyleFilter\"\n moving={true}\n\n onRowEditDone={async (e: CustomEvent) => {\n const row = (e.detail as { newValue?: Product })?.newValue;\n if (!row) return;\n try {\n await ProductsService.update(row);\n toast.success(`Product \"${row.productName}\" saved.`);\n products.refetch();\n } catch (err) {\n toast.error(`Save failed: ${(err as Error).message}`);\n }\n }}\n\n onRowDeleted={async (e: CustomEvent) => {\n const row = (e.detail as { data?: Product })?.data;\n if (!row) return;\n try {\n await ProductsService.remove(row.productID);\n toast.success(`Deleted \"${row.productName}\".`);\n products.refetch();\n } catch (err) {\n toast.error(`Delete failed: ${(err as Error).message}`);\n }\n }}\n>\n <IgrColumn field=\"productID\" header=\"ID\" editable={false} \/>\n <IgrColumn field=\"productName\" header=\"Product\" editable={true} hasSummary \/>\n <IgrColumn field=\"unitPrice\" header=\"Price\"\n dataType=\"number\" editable={true}\n bodyTemplate={(c) => <span>{currency(c.cell.value)}<\/span>} \/>\n <IgrColumn field=\"stockLevel\" header=\"Stock\"\n dataType=\"number\" editable={true} hasSummary \/>\n\n <IgrPaginator perPage={10} \/>\n\n <IgrActionStrip>\n <IgrGridEditingActions addRow={false} \/>\n <\/IgrActionStrip>\n<\/IgrGrid>\n<\/pre>\n\n\n\n\n
onRowEditDone<\/code> fires with the merged new row \u2192 PUT it to the API<\/li>\n\n\n\nonRowDeleted<\/code> fires when the user confirms delete \u2192 DELETE it from the API<\/li>\n<\/ul>\n\n\n\nrowEditable={true}<\/code> plus the IgrActionStrip + IgrGridEditingActions<\/code> combo. You don’t track edit state yourself.<\/strong> No isEditing<\/code> flag, no “dirty cells” map, no “did the user press Escape” handler. The React Data Grid manages it; you just listen for the commit and push it to your service.<\/p>\n\n\n\nbodyTemplate<\/code>. I’m formatting unitPrice<\/code> as currency in the example above. Same hook lets you render status pills, avatars, badges, color-coded stock levels \u2014 anything React can render \u2014 without giving up sort or filter on the underlying value.<\/p>\n\n\n\nRelational lookups belong in a Combo, not a number input<\/h2>\n\n\n\n
salesPersonID<\/code>, productID<\/code>, shipperID<\/code>), you don’t want users typing IDs. You want a searchable, grouped dropdown.<\/p>\n\n\n\nIgrCombo<\/code>:<\/p>\n\n\n\n<IgrCombo\n data={salespeople.map((s) => ({\n id: s.salesPersonID,\n name: fullName(s.salesPersonFirstName, s.salesPersonLastName),\n subtitle: s.salesPersonTitle ?? '',\n }))}\n valueKey=\"id\"\n displayKey=\"name\"\n groupKey=\"subtitle\" \/\/ \u2190 grouped headers come for free\n singleSelect\n value={form.salesPersonID != null ? [form.salesPersonID] : []}\n onChange={(e) => {\n const arr = (e.detail as { newValue?: unknown[] }).newValue ?? [];\n setForm((f) => ({ ...f, salesPersonID: (arr[0] as number) ?? null }));\n }}\n\/>\n<\/pre>\n\n\n\n![\"\"](\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/05\/orders-new-dialog-1024x704.png\")
<\/figure>\n\n\n\nIgrCombo<\/code>\u00a0with\u00a0IgrDatePicker<\/code>\u00a0and\u00a0IgrInput<\/code>\u00a0and you’ve got the whole “rich create form” story handled by Ignite UI React components.<\/p>\n\n\n\nTheming \u2014 one import, done<\/h2>\n\n\n\n
\/\/ main.tsx\nimport 'igniteui-webcomponents\/themes\/light\/material.css';\nimport 'igniteui-react-grids\/grids\/themes\/light\/material.css';\n<\/pre>\n\n\n\n
I also used the Ignite UI MCP servers<\/h2>\n\n\n\n
What I didn’t have to build<\/h2>\n\n\n\n
\n
Try it<\/h2>\n\n\n\n
![\"React](\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2026\/05\/react-grid-crud-demo-1-1024x496.png\")
<\/figure>\n\n\n\n