QuickGrid for Blazor

Get started

QuickGrid works with:

Any Blazor hosting model - Server, WebAssembly, or .NET MAUI
.NET 8 or later

Installation

Add the package Microsoft.AspNetCore.Components.QuickGrid. If you're using the command line, that's:

dotnet add package Microsoft.AspNetCore.Components.QuickGrid

Or, if you're using Visual Studio, you can open the NuGet Package Manager and search for Microsoft.AspNetCore.Components.QuickGrid.

Usage

To begin, add the following code to one of your Blazor page components to render a very simple grid:

<QuickGrid Items="@people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
    record Person(int PersonId, string Name, DateOnly BirthDate);

    IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

This will render as follows:


10895	Jean Martin	1985-03-16
10944	António Langa	1991-12-01
11203	Julie Smith	1958-10-10
11205	Nur Sari	1922-04-27
11898	Jose Hernandez	2011-05-03
12130	Kenji Sato	2004-01-09

Next steps

There are many other features and capabilities in QuickGrid. Learn more by exploring the samples in the navigation menu. For example, learn about the data sources you can use or about column options.