Everything you need to know about QuickGrid in Blazor

Introduction

We all have worked with data grid at some point in our life right? We all know the pain of designing one from scratch. Well not anymore, Microsoft has designed a data grid named as QuickGrid for Blazor applications, and its as simple as it gets. It provides essential features like column definitions, data binding, virtualization, sorting, filtering, and pagination which I'll explain one by one.

Setup

To use QuickGrid, add the package using either of the following methods.

Use the NuGet Package Manager.

simply use this command

dotnet add package Microsoft.AspNetCore.Components.QuickGrid

Example

I have a great example for you! (Hope you've watched Madagascar).

First, add this namespace at the top of your component.

@using Microsoft.AspNetCore.Components.QuickGrid

Now, you should be able to access QuickGrid.

<QuickGrid Items="Users.AsQueryable()" Virtualize="true" PageSize="5" Class="table table-striped table-hover">
    <PropertyColumn Property="@(user => user.Id)" Title="ID" />
    <PropertyColumn Property="@(user => user.Name)" Title="Name" />
    <PropertyColumn Property="@(user => user.Email)" Title="Email" />
    <PropertyColumn Property="@(user => user.Age)" Title="Age" Sortable="true" />

    <TemplateColumn Title="Actions" Context="user">
        <button class="btn btn-primary btn-sm mx-1" @onclick="() => OnEdit(user)">Edit</button>
    </TemplateColumn>

    <TemplateColumn Title="Actions" Context="user">
        <button class="btn btn-danger btn-sm mx-1" @onclick="() => OnDelete(user)">Delete</button>
    </TemplateColumn>
</QuickGrid>

Code Snippet 1. QuickGrid Component

Here's how it looks. Check the following image for the QuickGrid output of the above snippet.

Output 1. QuickGrid in action

Now, let me explain its features one by one.

Column Definitions

You can see how I am using the PropertyColumn and TemplateColumn.

PropertyColumn: This maps directly to a property in the data model. In this example, our data model is a User with four properties. We can use ID, Name, Email, and Age directly inside the PropertyColumn in our example.

public class User
{
     public int Id { get; set; }
     public string Name { get; set; }
     public string Email { get; set; }
     public int Age { get; set; }
}

Code snippet 2. Model class

<PropertyColumn Property="@(user => user.Id)" Title="ID" />
<PropertyColumn Property="@(user => user.Name)" Title="Name" />
<PropertyColumn Property="@(user => user.Email)" Title="Email" />
<PropertyColumn Property="@(user => user.Age)" Title="Age" Sortable="true" />

Code snippet 3. Usage of Property Column

TemplateColumn: Allows custom templates, which is useful for adding action buttons or custom components to each row. In this example, I am using a TemplateColumn to add Edit and Delete buttons. The Edit button allows the user to edit the row, and the Delete button, well, you know what it does!

<TemplateColumn Title="Actions" Context="user">
    <button class="btn btn-primary btn-sm mx-1" @onclick="() => OnEdit(user)">Edit</button>
</TemplateColumn>

<TemplateColumn Title="Actions" Context="user">
    <button class="btn btn-danger btn-sm mx-1" @onclick="() => OnDelete(user)">Delete</button>
</TemplateColumn>

...

@code
{
    private void OnEdit(User user) 
    { 
        // Your logic 
    }

    private void OnDelete(User user) 
    { 
        // Your logic 
    }
}

Code Snippet 4. Usage of Template Column

Data Binding

QuickGrid binds data to an Items parameter, which accepts an IEnumerable<T> or IQueryable<T>. In this example, the Users list serves as the data source. By binding to a data source like Users, QuickGrid can display data directly, update rows, and even remove rows dynamically.

<QuickGrid Items="Users.AsQueryable()">  
    <!-- Columns defined here -->
</QuickGrid>

Code snippet 5. Data Binding

Virtualization

Virtualization ensures that only the visible rows are rendered, this helps to improve performance for large datasets. Enabling this is as simple as setting the Virtualize attribute to true. I have covered virtualization in detail, if you'd like, check that out here: [Skip loops, use Virtualization in Blazor].

<QuickGrid Items="Users" Virtualize="true">
    <!-- Columns defined here -->
</QuickGrid>

Code snippet 6. Virtualization

Sorting

QuickGrid supports sorting by simply setting Sortable="true" on the PropertyColumn. Users can click on column headers to sort the data. In this example, the Age column is sortable, and clicking the header will sort the users by age in ascending or descending order.

Output 2. Sorting of the age column

Filtering

QuickGrid does not yet support built-in filtering, but you can implement it manually by filtering the Items data source. Below is an example of how to add a basic filter.

First, add an input field for the user to enter the filtering query and bind it to a string property (NameFilter), which will be used as the filter string.

<input type="text" @bind="NameFilter" placeholder="Filter by Name..." />

...

// Filter property
private string NameFilter { get; set; } = "";

Code snippet 7. Adding Filter

Inline Filtering: The Items attribute filters the Users directly with this expression. To implement this, update the Items property on QuickGrid. This expression filters the Users based on the NameFilter every time the filter input changes.

<QuickGrid Items="@(Users.Where(user => user.Name.Contains(NameFilter, StringComparison.OrdinalIgnoreCase)).AsQueryable())">
    <!-- Columns defined here -->
</QuickGrid>

Code snippet 7. Applying Filter

Dynamic Update: Since we use @bind="NameFilter" on the input box, Blazor will automatically update the filtered results in real-time as the user types, without requiring any additional properties.

Output 3. Filtering List by "Alex"

Pagination

QuickGrid allows pagination by setting the PageSize attribute. Here, setting PageSize="5" displays five records per page. I am using custom pagination methods and properties to control the displayed subset of users.

• Paged Users: PagedUsers displays a subset of users based on CurrentPage and PageSize.
• Pagination Controls
  • The Previous and Next buttons control the CurrentPage.
  • TotalPages calculates the maximum number of pages available based on the filtered results.
• QuickGrid without Virtualization: Setting Virtualize="false" prevents QuickGrid from loading everything at once and enables pagination.

This setup limits the displayed records to five per page, with working navigation buttons. The grid now shows filtered, paginated data as expected.

<QuickGrid Items="@PagedUsers.AsQueryable()" PageSize="5">
    <!-- Columns defined here -->
</QuickGrid>

<div class="pagination-controls">
    <button @onclick="PreviousPage" disabled="@(_currentPage == 1)">Previous</button>
    <span>Page @_currentPage of @TotalPages</span>
    <button @onclick="NextPage" disabled="@(_currentPage == TotalPages)">Next</button>
</div>

@code
{
    private int PageSize = 5;

    private IEnumerable<User> PagedUsers => Users
        .Skip((CurrentPage - 1) * PageSize)
        .Take(PageSize);

    private int TotalPages => (int)Math.Ceiling((double)Users.Count() / PageSize);

    private int _currentPage = 1;
    private int CurrentPage
    {
        get => _currentPage;
        set
        {
            _currentPage = value;
            StateHasChanged();
        }
    }

    private void PreviousPage()
    {
        if (_currentPage > 1)
        {
            _currentPage--;
        }
    }

    private void NextPage()
    {
        if (_currentPage < TotalPages)
        {
            _currentPage++;
        }
    }
}

Code snippet 8. Pagination

Output 4. Pagination with Page Size 5

Conclusion

QuickGrid is a powerful component for displaying grid-like data in Blazor. Here’s what we covered.

1. Column Definitions: Define columns with PropertyColumn and TemplateColumn.
2. Data Binding: Bind directly to IEnumerable<T> or IQueryable<T>.
3. Virtualization: Render only visible rows for large datasets.
4. Sorting: Enable sorting on columns with Sortable="true".
5. Filtering: Apply custom filtering to data.
6. Pagination: Manage record display with PageSize.

I’m honored to have recently become a Microsoft MVP (Contribution ID:b5021ca6-c3e6-4e38-bf50-8a4e1520ebc1), and I’d like to thank C# Corner and Microsoft for their support in this journey.