Migrate to igniteui-grid-lite v0.3.1 with declarative columns API

[Copilot]

Updates the Blazor wrapper from igniteui-grid-lite v0.0.1 to v0.3.1, implementing breaking API changes including the shift from programmatic to declarative column configuration.

Breaking Changes

Declarative Column Configuration

Columns are now defined as child elements instead of via property:

Before:

<IgbGridLite Data="@data" Columns="@columns" />

@code {
    private List<IgbColumnConfiguration> columns = new() {
        new() { Key = "Id", HeaderText = "ID", Type = GridLiteColumnDataType.Number }
    };
}

After:

<IgbGridLite Data="@data">
    <IgbGridLiteColumn Field="Id" Header="ID" DataType="GridLiteColumnDataType.Number" Sortable Filterable />
</IgbGridLite>

API Renames

Models:

• IgbGridLiteSortConfiguration → IgbGridLiteSortingOptions
• IgbGridLiteSortExpression → IgbGridLiteSortingExpression

Properties:

• Column: Key → Field, Type → DataType, HeaderText → Header
• Column: Sort (object) → Sortable (bool) + SortingCaseSensitive (bool?)
• Column: Filter (object) → Filterable (bool) + FilteringCaseSensitive (bool?)
• Grid: SortConfiguration → SortingOptions, SortExpressions → SortingExpressions
• Sorting: Multiple (bool) → Mode (string: "single" | "multiple")

Removed:

• IgbColumnSortConfiguration class
• IgbColumnFilterConfiguration class
• IgbGridLiteSortingOptions.TriState property
• IgbGridLite.UpdateColumnsAsync() method

Implementation

New Components

• IgbGridLiteColumn.razor - Declarative column component
• IgbGridLiteColumn.razor.cs - Column properties (Field, Header, DataType, Sortable, Filterable, etc.)

Updated Files

• Models: Renamed properties in IgbColumnConfiguration, IgbGridLiteSortingExpression, IgbGridLiteSortingOptions, IgbGridLiteFilterExpression
• Grid: Added ChildContent parameter, marked Columns as [Obsolete], removed UpdateColumnsAsync()
• JavaScript: Updated to use sortingOptions/sortingExpressions, removed updateColumns function
• Demo: Converted to declarative columns with conditional rendering for dynamic columns
• Docs: Updated README with declarative examples, added CHANGELOG with migration guide

Dynamic Columns

Conditional rendering replaces imperative column updates:

<IgbGridLite Data="@data">
    <IgbGridLiteColumn Field="Id" Header="ID" />
    @if (showDetails) {
        <IgbGridLiteColumn Field="Details" Header="Details" />
    }
</IgbGridLite>

Screenshots

Grid rendering with declarative columns:

Dynamic column toggling via conditional rendering:

Backward Compatibility

The Columns parameter remains functional but is marked [Obsolete]. Migration to declarative columns is recommended.

Original prompt

Summary

The Blazor wrapper is currently using igniteui-grid-lite version 0.0.1. It needs to be updated to match the latest API changes from version 0.3.1, including the critical shift to declarative columns.

Changes Required

Based on the CHANGELOG.md from igniteui-grid-lite, the following breaking changes need to be applied:

From 0.3.1

• Remove updateColumns method - declarative columns can be updated directly now

From 0.3.0 - Column Property Renames

• key → field - The field from the data that the column references
• type → dataType - The data type of the column's values
• headerText → header - The header text of the column

From 0.2.0 - Sort/Filter Property Changes

• Column sort property replaced with:
  • sortable (boolean)
  • sortingCaseSensitive (boolean)
  • sortConfiguration (object with comparer option)
• Column filter property replaced with:
  • filterable (boolean)
  • filteringCaseSensitive (boolean)
• Remove ColumnFilterConfiguration type (use filteringCaseSensitive boolean directly)

From 0.1.0 - DECLARATIVE COLUMNS (CRITICAL)

Column configuration is now declarative using <igc-grid-lite-column> child elements instead of the columns property.

Before (old API):

<igc-grid-lite .data=${data} .columns=${columns}></igc-grid-lite>

After (new API):

<igc-grid-lite .data=${data}>
  <igc-grid-lite-column field="id" header="User ID" data-type="number" filterable sortable></igc-grid-lite-column>
  <igc-grid-lite-column field="name" filterable sortable></igc-grid-lite-column>
</igc-grid-lite>

The columns property is now read-only and returns the current column configuration.

From 0.1.0 - Sorting API Renames

• GridSortConfiguration type → GridLiteSortingOptions
• IgcGridLite.sortConfiguration property → sortingOptions
• IgcGridLite.sortExpressions property → sortingExpressions
• SortExpression type → SortingExpression
• BaseSortExpression type → BaseSortingExpression
• GridLiteSortingOptions.multiple boolean → mode property ('single' or 'multiple')
• Remove triState property (tri-state sorting always enabled)

Files to Update

1. src/IgniteUI.Blazor.GridLite/package.json

   • Update igniteui-grid-lite dependency from ~0.0.1 to ~0.3.1

2. NEW: Create src/IgniteUI.Blazor.GridLite/IgbGridLiteColumn.razor

   • Create a new Blazor component for declarative column definition
   • Should render as <igc-grid-lite-column> element
   • Properties: Field, Header, DataType, Width, Hidden, Resizable, Sortable, SortingCaseSensitive, Filterable, FilteringCaseSensitive

3. NEW: Create src/IgniteUI.Blazor.GridLite/IgbGridLiteColumn.razor.cs

   • Code-behind for the column component
   • Include all the column properties with appropriate [Parameter] attributes
   • Properties should map to the web component attributes

4. src/IgniteUI.Blazor.GridLite/IgbGridLite.razor

   • Update to support ChildContent for declarative columns
   • Render child <igc-grid-lite-column> elements inside the grid

5. src/IgniteUI.Blazor.GridLite/Models/IgbColumnConfiguration.cs

   • Rename Key → Field (with [JsonPropertyName("field")])
   • Rename Type → DataType (with [JsonPropertyName("dataType")])
   • Rename HeaderText → Header (with [JsonPropertyName("header")])
   • Replace Sort object property with:
     • Sortable (bool) with [JsonPropertyName("sortable")]
     • SortingCaseSensitive (bool?) with [JsonPropertyName("sortingCaseSensitive")]
   • Replace Filter object property with:
     • Filterable (bool) with [JsonPropertyName("filterable")]
     • FilteringCaseSensitive (bool?) with [JsonPropertyName("filteringCaseSensitive")]
   • Update ToJsConfig() method to use new property names

6. src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortConfiguration.cs → Rename to IgbGridLiteSortingOptions.cs

   • Rename class IgbGridLiteSortConfiguration → IgbGridLiteSortingOptions
   • Replace Multiple (bool) with Mode (string) using [JsonPropertyName("mode")] - accepts "single" or "multiple"
   • Remove TriState property entirely

7. src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortExpression.cs → Rename to IgbGridLiteSortingExpression.cs

   • Rename class IgbGridLiteSortExpression → IgbGridLiteSortingExpression
   • Rename Key → Field with [JsonPropertyName("field")]

8. src/IgniteUI.Blazor.GridLite/IgbGridLite.razor.cs

   • Add [Parameter] public RenderFragment? ChildContent { get; set; } for declarative columns
   • Rename parameter SortConfiguration → SortingOptions (type IgbGridLiteSortingOptions)
   • Rename parameter SortExpressions → SortingExpressions (type IEnumerable<IgbGridLiteSortingExpression>)
   • Remove UpdateColumnsAsync method (columns are now declarative)
   • Update all references to use new property/type names
     ...

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.