Everything you need to know about QuickGrid in Blazor

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.