Ignite UI GridLite Blazor wrapper
$ dotnet add package IgniteUI.Blazor.GridLiteA Blazor wrapper for the Ignite UI GridLite web component, providing a lightweight and performant data grid for Blazor applications.
Install the NuGet package:
dotnet add package IgniteUI.Blazor.GridLite
In your Program.cs, no special services are required. The component uses standard Blazor JSInterop.
The JavaScript bundle is automatically included via _content static files.
In your App.razor or layout file, include one of the available themes:
<!-- Light themes -->
<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
<!-- or -->
<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/material.css" rel="stylesheet" />
<!-- or -->
<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/fluent.css" rel="stylesheet" />
<!-- or -->
<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/indigo.css" rel="stylesheet" />
<!-- Dark themes also available in css/themes/dark/ -->
@using IgniteUI.Blazor.Controls
<IgbGridLite Data="@employees">
<IgbGridLiteColumn Field="@nameof(Employee.Id)" Header="ID" DataType="GridLiteColumnDataType.Number" Width="100px" />
<IgbGridLiteColumn Field="@nameof(Employee.Name)" Header="Employee Name" DataType="GridLiteColumnDataType.String" />
<IgbGridLiteColumn Field="@nameof(Employee.Department)" Header="Department" DataType="GridLiteColumnDataType.String" />
<IgbGridLiteColumn Field="@nameof(Employee.Salary)" Header="Salary" DataType="GridLiteColumnDataType.Number" Width="150px" />
</IgbGridLite>
@code {
private List<Employee> employees = new();
protected override void OnInitialized()
{
employees = GetEmployees();
}
}
<IgbGridLite Data="@employees"
SortingExpressions="@initialSort"
FilterExpressions="@initialFilter">
<IgbGridLiteColumn Field="@nameof(Employee.Id)" Header="ID" DataType="GridLiteColumnDataType.Number" />
<IgbGridLiteColumn Field="@nameof(Employee.Name)" Header="Name" Sortable Filterable />
<IgbGridLiteColumn Field="@nameof(Employee.Department)" Header="Department" Sortable Filterable />
</IgbGridLite>
@code {
private List<IgbGridLiteSortingExpression> initialSort = new()
{
new() { Key = nameof(Employee.Name), Direction = GridLiteSortingDirection.Ascending }
};
private List<IgbGridLiteFilterExpression> initialFilter = new()
{
new() { Key = nameof(Employee.Department), Condition = "contains", SearchTerm = "Sales" }
};
}
Enable sorting on specific columns:
<IgbGridLiteColumn Field="@nameof(Employee.Name)"
Header="Name"
Sortable
Resizable />
Enable filtering on columns:
<IgbGridLiteColumn Field="Department"
Header="Department"
Filterable
FilteringCaseSensitive="@false" />
Handle sorting and filtering events:
<IgbGridLite Data="@employees"
Sorting="@HandleSorting"
Sorted="@HandleSorted"
Filtering="@HandleFiltering"
Filtered="@HandleFiltered">
<IgbGridLiteColumn Field="Name" Sortable Filterable />
<IgbGridLiteColumn Field="Department" Sortable Filterable />
</IgbGridLite>
@code {
private void HandleSorting(IgbGridLiteSortingEventArgs e)
{
// Handle on sorting
}
private void HandleSorted(IgbGridLiteSortedEventArgs e)
{
// Handle after sort
}
private void HandleFiltering(IgbGridLiteFilteringEventArgs e)
{
// Handle on filtering
}
private void HandleFiltered(IgbGridLiteFilteredEventArgs e)
{
// Handle after filter
}
}
The IgbGridLiteColumn component supports:
Field: Property name to bind to (use nameof() for type safety)Header: Column header display textWidth: Column width (CSS value)DataType: Data type (String, Number, Boolean, Date)Hidden: Hide columnResizable: Allow column resizingSortable: Enable sortingSortingCaseSensitive: Make sorting case sensitiveFilterable: Enable filteringFilteringCaseSensitive: Make filtering case sensitiveRestore dependencies:
dotnet restore
Build project:
dotnet build
The build process (configured in IgniteUI.Blazor.GridLite.csproj) automatically:
A demo application is available in demo/GridLite.DemoApp/ showcasing various grid features and configurations.