Blazor Grid Examples with IgbGrid Component Implementation

[Copilot]

Implementation Summary: IgbGrid with Proper Theme

Successfully replaced custom HTML table with IgbGrid component and fixed the theme import to properly style the grid.

Changes Made ✅

Theme Fix (Latest Commit):

• ✅ Fixed CSS path from _content/IgniteUI.Blazor.Trial/ to _content/IgniteUI.Blazor/
• ✅ Fixed JavaScript path from _content/IgniteUI.Blazor.Trial/ to _content/IgniteUI.Blazor/
• ✅ Used grid-specific theme: themes/grid/light/bootstrap.css
• ✅ Grid now displays with proper IgniteUI styling

Previous Changes:

• ✅ Added IgniteUI.Blazor.Trial NuGet package (v25.2.38)
• ✅ Replaced custom HTML <table> with IgbGrid component
• ✅ Configured 8 columns with proper data binding
• ✅ Removed all web components dependencies (igniteui-webcomponents)
• ✅ Removed package.json and npm dependencies

Grid Configuration

<link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>

<IgbGrid Data="FinancialService.Data" 
         AutoGenerate="false"
         AllowFiltering="true"
         Height="calc(100vh - 200px)"
         @ref="grid">
    <IgbColumn Field="Id" Header="Symbol" Width="7%" MinWidth="68px"></IgbColumn>
    <!-- 7 more columns... -->
</IgbGrid>

Screenshots

Before (No Theme):

After (With IgniteUI Grid Theme):

Features

• ✅ Grid properly styled with IgniteUI Bootstrap theme
• ✅ Column headers with filter icons
• ✅ Filtering enabled (click filter icon in headers)
• ✅ Sortable columns
• ✅ Responsive layout
• ✅ Live data updates every 3 seconds
• ✅ Trial watermark overlay (as expected with trial package)

Technical Notes

The IgniteUI.Blazor.Trial package uses IgniteUI.Blazor as its BasePath for static web assets, not IgniteUI.Blazor.Trial. This is defined in the package's static web assets manifest.

Static Asset Mapping:

• Package: IgniteUI.Blazor.Trial
• BasePath: _content/IgniteUI.Blazor (without .Trial suffix)
• Theme: themes/grid/light/bootstrap.css for grid-specific styling

Note

Using IgniteUI.Blazor.Trial package which includes trial watermark overlay. Commercial license required for production use.

Original prompt

I'd like to create a Blazor Grid Examples based on angular grid samples https://github.com/IgniteUI/angular-grid-examples. I'd like those samples to look and feel the same as in angular, but to use IgbGrid instead of igx-grid.(Also apply this to pivot-grid, tree-grid, hierarchical-grid)

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[dkamburov]

• @copilot don't create custom table with tbody and cells. Instead use IgbGrid component from IgniteIU.Blazor/IgniteUI.Blazor.Trial nuget package. Also I want to look exactly the same as angular grid demos and no need for those references:
• igniteui-webcomponents 6.5.1
• igniteui-webcomponents-grids 6.2.2
  Remove them from the project.

[Copilot]

• @copilot don't create custom table with tbody and cells. Instead use IgbGrid component from IgniteIU.Blazor/IgniteUI.Blazor.Trial nuget package. Also I want to look exactly the same as angular grid ...

Replaced the custom HTML table with IgbGrid component from IgniteUI.Blazor.Trial NuGet package (v25.2.38). Also removed all web components dependencies (igniteui-webcomponents and igniteui-webcomponents-grids) from the project.

Changes in commit 084101e:

• Added IgniteUI.Blazor.Trial NuGet package
• Configured IgbGrid with proper columns and data binding
• Removed package.json and all npm dependencies
• Removed wwwroot/lib/igniteui-webcomponents directories
• Grid now updates with live data every 3 seconds

[dkamburov]

@copilot seems that you haven't imported the theme for the grid

[Copilot]

@copilot seems that you haven't imported the theme for the grid

Fixed in commit 86e24d2. The issue was that the static assets path needed to be _content/IgniteUI.Blazor/ (without .Trial suffix) instead of _content/IgniteUI.Blazor.Trial/. Also switched to the grid-specific theme at themes/grid/light/bootstrap.css.

The grid now displays with proper IgniteUI styling including column headers, filter icons, and proper table formatting.