Ignite UI Blazor Grid Lite

IgniteUI.Blazor.GridLite is a Blazor wrapper from Infragistics around the Ignite UI Grid Lite web component. It provides a lightweight, MIT-licensed data grid for Blazor Server and Blazor WebAssembly applications, with column configuration via Razor components, sorting and filtering support, and four built-in themes (Material, Bootstrap, Fluent, Indigo) in light and dark variants. It targets .NET 8, .NET 9, and .NET 10.

This package is the Blazor wrapper for Grid Lite only. It does not include cell editing, grouping, aggregation, paging, advanced filtering, or Excel/PDF export. For those features, use the commercial IgniteUI.Blazor package, which includes the full Ignite UI for Blazor Data Grid. For the underlying web component used in non-Blazor frameworks, see igniteui-grid-lite.

Features

🚀 Lightweight grid component built on web components
📊 Column configuration with custom headers
🔄 Sorting and filtering support
🎨 Multiple built-in themes (Bootstrap, Material, Fluent, Indigo) with light/dark variants
🔌 Easy integration with existing Blazor Server and Blazor WebAssembly applications
🎯 Multi-framework support (.NET 8, 9, and 10)

Installation

Install the NuGet package:

dotnet add package IgniteUI.Blazor.GridLite

Setup

1 - Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

@using IgniteUI.Blazor.Controls

2 - Add the Style Sheet in the appropriate location based on your project type:

<head>
       <link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
</head>

3 - Add the Grid Lite component to your razor page:

<IgbGridLite Data="data" AutoGenerateColumns="true">
</IgbGridLite>

@code {
    private object[] data = new object[]
    {
        new { Name = "John", Age = 30, City = "New York" },
        new { Name = "Jane", Age = 25, City = "Los Angeles" },
        new { Name = "Bob", Age = 35, City = "Chicago" }
    };
}

Include the Theme Stylesheet

Add one theme to your App.razor, _Layout.cshtml, or main layout file. Each theme is available in light and dark variants.

<!-- Light themes -->
																																 
			  
<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/material.css" rel="stylesheet" />

<!-- Or one of: -->
<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/fluent.css" rel="stylesheet" />
	 
<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/indigo.css" rel="stylesheet" />

<!-- Dark variants are available under css/themes/dark/ with the same names -->

JavaScript Module

The JavaScript bundle is automatically included via _content static files - no manual registration is required.

Service Registration

No service registration is required. The component uses standard Blazor JSInterop and is ready to use after installing the NuGet package and including the theme stylesheet.

Basic Usage

@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();
    }
}

Note: The Salary column above uses DataType.Number for clarity. For currency formatting, render the value through a CellTemplate and apply the formatter on the rendered text rather than at the column-type level.

Advanced Configuration

Initial Sort and Filter State

Configure pre-applied sorting and filtering when the grid first renders:

<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" }
    };
}

Sorting

Enable sorting on individual columns and optionally make sorting case-sensitive:

<IgbGridLiteColumn Field="@nameof(Employee.Name)"
                   Header="Name"
                   Sortable
                   Resizable />

Filtering

Enable filtering with optional case-sensitivity:

<IgbGridLiteColumn Field="Department"
                   Header="Department"
                   Filterable
                   FilteringCaseSensitive="@false" />

Event Handling

Handle sorting and filtering events to persist user state, log analytics, or react to grid interactions:

<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)
    {
        // Fires before the sort is applied. Set e.Cancel = true to prevent the sort.
    }

    private void HandleSorted(IgbGridLiteSortedEventArgs e)
    {
        // Fires after the sort is applied. Persist current sort state to a user profile.
        UserPreferences.LastGridSort = (e.Key, e.Direction);
    }

    private void HandleFiltering(IgbGridLiteFilteringEventArgs e)
    {
        // Fires before the filter is applied.
    }

    private void HandleFiltered(IgbGridLiteFilteredEventArgs e)
    {
        // Fires after the filter is applied. Log the filter for analytics.
        Analytics.Track("grid.filter.applied", new { e.Key, e.Condition, e.SearchTerm });
    }
}

Column Configuration Reference

The IgbGridLiteColumn component supports the following properties:

Property	Type	Description
`Field`	`string`	The model property to bind to. Use `nameof()` for compile-time safety.
`Header`	`string`	Column header display text.
`Width`	`string`	Column width as a CSS value (e.g., `"100px"`, `"20%"`, `"auto"`).
`DataType`	`GridLiteColumnDataType`	One of `String`, `Number`, `Boolean`, or `Date`.
`Hidden`	`bool`	Hides the column when `true`.
`Resizable`	`bool`	Allows the user to resize the column.
`Sortable`	`bool`	Enables sorting on the column.
`SortingCaseSensitive`	`bool`	When `true`, sort comparisons are case-sensitive.
`Filterable`	`bool`	Enables filtering on the column.
`FilteringCaseSensitive`	`bool`	When `true`, filter comparisons are case-sensitive.

AI-Assisted Development

Ignite UI ships an AI toolchain that grounds AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude Desktop, Claude Code, JetBrains AI Assistant) in correct component APIs and theming patterns. For Blazor today, the toolchain provides:

Ignite UI Theming MCP (igniteui-theming) - palettes, design tokens, and component theming via MCP. Works with all four built-in themes.
MAKER Framework (@igniteui/maker-mcp, optional, advanced) - multi-agent orchestration for long-horizon tasks.

Agent Skills and the Ignite UI CLI MCP do not currently support Blazor and are roadmapped for a future release. To use the available Theming MCP today, add the following block to your AI client configuration:

VS Code (.vscode/mcp.json):

{
  "servers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients (mcpServers block):

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

For the full setup guide and configuration options, see the Ignite UI Theming MCP documentation.

Building from Source

Prerequisites

.NET 8, .NET 9, or .NET 10 SDK.
Node.js 18 or later (used to build the JavaScript bundle).

Build Steps

Restore dependencies:

dotnet restore

Build the project:

dotnet build

The build process (configured in IgniteUI.Blazor.GridLite.csproj) automatically:

Installs npm dependencies.
Builds the JavaScript bundle using Vite.
Copies theme files to wwwroot.

Demo Application

A demo application is available in demo/GridLite.DemoApp/ showcasing the supported grid features and configurations.

Support

Community Support

GitHub Issues - bug reports and feature requests.
Infragistics Discord - real-time discussion.
Stack Overflow - tag igniteui.

Commercial Support

For 24/5 developer support, an SLA, and access to the full Ignite UI for Blazor suite (commercial Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid, charts, gauges, maps, Dock Manager, Spreadsheet, Excel library):

Contributing

Contributions are welcome. See the Contribution Guide for:

Development workflow.
Coding standards.
Pull request submission.

To contribute:

Fork the repository.
Create a feature branch: git checkout -b feature/your-feature.
Commit your changes: git commit -m 'Add your feature'.
Push the branch: git push origin feature/your-feature.
Open a Pull Request.

License

This project is MIT-licensed. See LICENSE for details.

For the commercial Ignite UI for Blazor product, see the Infragistics Licensing page.

Built by Infragistics

Name		Name	Last commit message	Last commit date
Latest commit History 39 Commits
.github/workflows		.github/workflows
demo/GridLite.DemoApp		demo/GridLite.DemoApp
src/IgniteUI.Blazor.GridLite		src/IgniteUI.Blazor.GridLite
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
IgniteUI.Blazor.GridLite.sln		IgniteUI.Blazor.GridLite.sln
LICENSE		LICENSE
README.md		README.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Ignite UI Blazor Grid Lite

Table of Contents

Features

Installation

Setup

Include the Theme Stylesheet

JavaScript Module

Service Registration

Basic Usage

Advanced Configuration

Initial Sort and Filter State

Sorting

Filtering

Event Handling

Column Configuration Reference

AI-Assisted Development

Building from Source

Prerequisites

Build Steps

Demo Application

Support

Community Support

Commercial Support

Contributing

License

About

Uh oh!

Releases 11

Packages

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

Ignite UI Blazor Grid Lite

Table of Contents

Features

Installation

Setup

Include the Theme Stylesheet

JavaScript Module

Service Registration

Basic Usage

Advanced Configuration

Initial Sort and Filter State

Sorting

Filtering

Event Handling

Column Configuration Reference

AI-Assisted Development

Building from Source

Prerequisites

Build Steps

Demo Application

Support

Community Support

Commercial Support

Contributing

License

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 11

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages