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" AutoGenerate="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. Cell templates are not available yet, so values that need custom formatting (currency, units) are best exposed pre-formatted from the data source, e.g. a string property.

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)
    {
        // Raised as a sort starts in UI. A notification: can't cancel the sort,
        // which may already be applied by the time this runs.
    }

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

    private void HandleFiltering(IgbGridLiteFilteringEventArgs e)
    {
        // Raised as a filter starts in UI. A notification: can't cancel the filter,
        // which may already be applied by the time this runs.
    }

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

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` or `Boolean`.
`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.

Publishing with trimming

The library is trim-compatible. With Blazor WebAssembly's default TrimMode=partial nothing is needed. With TrimMode=full, the grid keeps the public properties of its item type automatically, while complex types nested in the item type have to be preserved by the app. See docs/TRIMMING.md for the details, including components that wrap the grid with their own generic parameter.

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 SDK 10.0.100 or later in the 10.0.x band (pinned by global.json; it builds all three target frameworks and the .NET 8/9 runtimes are only needed to run the tests on those).
Node.js 22.12 or later (required by the Vite build of the JavaScript bundle).

Build

npm ci
npm run build
dotnet build

npm run build at the repository root produces the JavaScript bundle and the theme CSS under wwwroot, plus THIRD-PARTY-LICENSES.md. The .NET build does not run it, so run it again after changing the JavaScript side or the npm dependencies. The library packs on every build, and the pack fails while THIRD-PARTY-LICENSES.md is missing.

For debugging, npm run build:dev builds the bundle unminified and with a source map; the next npm run build removes the map again.

Tests

Unit tests (xUnit + bUnit, run against net8.0, net9.0 and net10.0) and browser integration tests (NUnit + Playwright against the tests/IgniteUI.Blazor.GridLite.TestBed app):

dotnet build -c Release
dotnet test tests/IgniteUI.Blazor.GridLite.Tests --settings .runsettings --no-build -c Release
pwsh tests/IgniteUI.Blazor.GridLite.IntegrationTests/bin/Release/net10.0/playwright.ps1 install
dotnet test tests/IgniteUI.Blazor.GridLite.IntegrationTests --settings .runsettings --no-build -c Release

Formatting

Run npm ci once at the repository root: it installs the JS toolchain (Vite, Prettier) and activates the pre-commit hook that formats staged JS/JSON/YAML/CSS files. C# whitespace is formatted with

dotnet format whitespace . --folder --exclude node_modules

Only this folder-mode whitespace command is safe here — the full dotnet format (and its style/analyzers verbs) corrupts multi-targeted projects by writing conflict markers into sources (dotnet/format#1634). Both checks run in CI.

Demo Application

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

Supply chain

Every release publishes an SPDX 2.2 SBOM, an SPDX 3.0 SBOM, and a CycloneDX SBOM covering both the NuGet and the npm dependencies the package ships, together with three Sigstore attestations — build provenance, the SPDX SBOM, and the CycloneDX SBOM — each bound to the SHA-256 digest of the signed package that was pushed to NuGet.org. They are attached to the corresponding GitHub release alongside the package and its checksum. To verify the package downloaded from the GitHub release:

gh attestation verify IgniteUI.Blazor.GridLite.<version>.nupkg -R IgniteUI/IgniteUI.Blazor.GridLite

The two SBOM attestations carry distinct predicate types, so either can be requested on its own:

gh attestation verify IgniteUI.Blazor.GridLite.<version>.nupkg -R IgniteUI/IgniteUI.Blazor.GridLite --predicate-type https://spdx.dev/Document
gh attestation verify IgniteUI.Blazor.GridLite.<version>.nupkg -R IgniteUI/IgniteUI.Blazor.GridLite --predicate-type https://cyclonedx.org/bom

The package's signatures can be checked on either copy, from the GitHub release or from NuGet.org:

dotnet nuget verify IgniteUI.Blazor.GridLite.<version>.nupkg

A copy from NuGet.org also carries NuGet.org's repository signature, which this checks as well. That signature changes the file's digest, so the attestations match only the package from the GitHub release.

The package itself contains THIRD-PARTY-LICENSES.md, with the license texts of the JavaScript dependencies bundled into the grid's script.

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
.config		.config
.githooks		.githooks
.github		.github
demo/GridLite.DemoApp		demo/GridLite.DemoApp
docs		docs
eng		eng
src/IgniteUI.Blazor.GridLite		src/IgniteUI.Blazor.GridLite
tests		tests
.editorconfig		.editorconfig
.git-blame-ignore-revs		.git-blame-ignore-revs
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.runsettings		.runsettings
CHANGELOG.md		CHANGELOG.md
Directory.Build.props		Directory.Build.props
Directory.Build.targets		Directory.Build.targets
Directory.Packages.props		Directory.Packages.props
IgniteUI.Blazor.GridLite.Library.slnf		IgniteUI.Blazor.GridLite.Library.slnf
IgniteUI.Blazor.GridLite.slnx		IgniteUI.Blazor.GridLite.slnx
LICENSE		LICENSE
README.md		README.md
SECURITY.MD		SECURITY.MD
global.json		global.json
nuget.config		nuget.config
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Navigation Menu

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

Publishing with trimming

AI-Assisted Development

Building from Source

Prerequisites

Build

Tests

Formatting

Demo Application

Supply chain

Support

Community Support

Commercial Support

Contributing

License

About

Releases

Packages

Used by

Contributors

Languages

Latest commit

History

Folders and files

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

Publishing with trimming

AI-Assisted Development

Building from Source

Prerequisites

Build

Tests

Formatting

Demo Application

Supply chain

Support

Community Support

Commercial Support

Contributing

License

About

Resources

Contributing

Security policy

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages