LITGRID COMMUNITY EDITION
Open-source Blazor DataGrid
LitGrid brings its Web Component-based core to Blazor with row and column virtualization. Community Edition is MIT licensed. The Blazor NuGet package bundles its static assets, so no Node.js setup is required.
Blazor · .NET · Web Components · MIT
LitGrid / Live example
See LitGrid in action
Explore the real grid using a sample product inventory. Try selecting rows, sorting from a column menu, or resizing a column.
Live grid
Sample product inventory
Generated sample data for exploring LitGrid interactions.
LitGrid shown through the React integration used by the TipoloX site. The Blazor integration uses the same Web Component-based core.
Architecture / Blazor
Why use LitGrid in Blazor?
Use a Blazor-facing component while LitGrid handles grid rendering through its shared Web Component core.
Blazor-facing integration
Use DataGrid<TItem> in a Blazor application instead of working directly with the custom element.
No Node.js setup required
The Tipolox.LitGrid.Blazor NuGet package bundles LitGrid's static assets.
Shared Web Component core
The Blazor integration builds on the same core used by LitGrid's other framework integrations.
Made for data-heavy UI
Row and column virtualization work alongside sorting, filtering, selection, and column controls.
Get started / Blazor
Install LitGrid for Blazor
Add the NuGet package, then render DataGrid<TItem> with rows and columns. The package bundles its static assets; no Node.js setup is required.
01 / Install
Add the Blazor package
Terminal
dotnet add package Tipolox.LitGrid.BlazorNuGet package with the JavaScript included as static web assets.
View Blazor documentation02 / Render
Set up a first grid
UsersGrid.razor
@using Tipolox.LitGrid.Blazor
<DataGrid TItem="User" Data="@users"
Columns="@columns" Height="320" />
@code {
private List<User> users = new()
{
new() { Id = 1, Name = "Ada" }
};
private IReadOnlyList<GridColumn> columns = new List<GridColumn>
{
new() { Key = "Id", Header = "ID" },
new() { Key = "Name", Header = "Name" }
};
private sealed class User
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
}
}LitGrid / Capabilities
Built for data-heavy Blazor applications
LitGrid combines virtualized rendering with controls for working with client-side data in a grid interface.
01 / Capability
Row and column virtualization
Render the visible part of a client-side dataset as you scroll through rows and columns.
02 / Capability
Sorting, filtering, pagination
Explore and organize rows with client-side data operations.
03 / Capability
Selection and keyboard navigation
Select grid content and move through the interface using the keyboard.
04 / Capability
Column controls
Resize, reorder, and show or hide columns to shape a view.
05 / Capability
State persistence
Save and restore column state between visits to a view.
LitGrid / Integrations
One core, multiple frameworks
LitGrid is built around a Web Component core with integrations for React, Angular, Vue, and Blazor. Use the custom element directly or choose the integration that fits your application.
- Web ComponentsCustom element
- ReactIntegration
- AngularIntegration
- VueIntegration
- BlazorNuGet integration
Explore LitGrid
Try the grid in your browser.
Use the live demo, review the source, or follow the Blazor guide.
View Blazor documentation