QuickGrid for Blazor

Get started

QuickGrid works with:

  • Any Blazor hosting model - Server, WebAssembly, or .NET MAUI
  • .NET 6 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 --prerelease

Or, if you're using Visual Studio, you can open Manage NuGet Packages 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:

10895Jean Martin1985-03-16
10944António Langa1991-12-01
11203Julie Smith1958-10-10
11205Nur Sari1922-04-27
11898Jose Hernandez2011-05-03
12130Kenji Sato2004-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.

An unhandled error has occurred. Reload 🗙