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.

Loading live grid…

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.Blazor

NuGet package with the JavaScript included as static web assets.

View Blazor documentation

02 / 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