Using free QuickGrid component with Static Server Rendering Blazor App

 Overview

QuickGrid is a Razor component that quickly and efficiently displays data in tabular form. Visit https://aspnet.github.io/quickgridsamples/ to check out what you can do with this component. In this tutorial, you will discover how easy it is to incorporate in your apps and how versatile it is. I will be using the current version of .NET 8.0.

Source Code: https://github.com/medhatelmasry/BlazorQuickGrid

Companion Video: https://youtu.be/LBoG1WMaFGI

Getting Started

We will create a Static Server rendering (SSR) application with the following terminal command:

dotnet new blazor --name BlazorQuickGrid 

cd BlazorQuickGrid

Add this class to Models/Student.cs to generate some sample student data:

namespace BlazorQuickGrid.Models;

public class Student {

    required public int? Id { get; set; }

    required public string FirstName { get; set; }

    required public string LastName { get; set; }

    required public string School { get; set; }

    public static IQueryable<Student> GetStudents() {

        int ndx = 0;

        List<Student> students = new List<Student>() {

            new Student() { Id = ++ndx, FirstName="Max", LastName="Pao", School="Science" },

            new Student() { Id = ++ndx, FirstName="Tom", LastName="Fay", School="Mining" },

            new Student() { Id = ++ndx, FirstName="Ann", LastName="Sun", School="Nursing" },

            new Student() { Id = ++ndx, FirstName="Joe", LastName="Fox", School="Computing" },

            new Student() { Id = ++ndx, FirstName="Sue", LastName="Mai", School="Mining" },

            new Student() { Id = ++ndx, FirstName="Ben", LastName="Lau", School="Business" },

            new Student() { Id = ++ndx, FirstName="Zoe", LastName="Ray", School="Mining" },

            new Student() { Id = ++ndx, FirstName="Sam", LastName="Ash", School="Medicine" },

            new Student() { Id = ++ndx, FirstName="Dan", LastName="Lee", School="Computing" },

            new Student() { Id = ++ndx, FirstName="Pat", LastName="Day", School="Science" },

            new Student() { Id = ++ndx, FirstName="Kim", LastName="Rex", School="Computing" },

            new Student() { Id = ++ndx, FirstName="Tim", LastName="Ram", School="Business" },

            new Student() { Id = ++ndx, FirstName="Rob", LastName="Wei", School="Mining" },

            new Student() { Id = ++ndx, FirstName="Jan", LastName="Tex", School="Science" },

            new Student() { Id = ++ndx, FirstName="Jim", LastName="Kid", School="Business" },

            new Student() { Id = ++ndx, FirstName="Ben", LastName="Chu", School="Medicine" },

            new Student() { Id = ++ndx, FirstName="Mia", LastName="Tao", School="Computing" },

            new Student() { Id = ++ndx, FirstName="Ted", LastName="Day", School="Business" },

            new Student() { Id = ++ndx, FirstName="Amy", LastName="Roy", School="Science" },

            new Student() { Id = ++ndx, FirstName="Ian", LastName="Kit", School="Nursing" },

            new Student() { Id = ++ndx, FirstName="Liz", LastName="Tan", School="Medicine" },

            new Student() { Id = ++ndx, FirstName="Mat", LastName="Roy", School="Tourism" },

            new Student() { Id = ++ndx, FirstName="Deb", LastName="Luo", School="Medicine" },

            new Student() { Id = ++ndx, FirstName="Ana", LastName="Poe", School="Computing" },

            new Student() { Id = ++ndx, FirstName="Lyn", LastName="Raj", School="Science" },

            new Student() { Id = ++ndx, FirstName="Amy", LastName="Ash", School="Tourism" },

            new Student() { Id = ++ndx, FirstName="Kim", LastName="Kid", School="Mining" },

            new Student() { Id = ++ndx, FirstName="Bec", LastName="Fry", School="Nursing" },

            new Student() { Id = ++ndx, FirstName="Eva", LastName="Lap", School="Computing" },

            new Student() { Id = ++ndx, FirstName="Eli", LastName="Yim", School="Business" },

            new Student() { Id = ++ndx, FirstName="Sam", LastName="Hui", School="Science" },

            new Student() { Id = ++ndx, FirstName="Joe", LastName="Jin", School="Mining" },

            new Student() { Id = ++ndx, FirstName="Liz", LastName="Kuo", School="Agriculture" },

            new Student() { Id = ++ndx, FirstName="Ric", LastName="Mak", School="Tourism" },

            new Student() { Id = ++ndx, FirstName="Pam", LastName="Day", School="Computing" },

            new Student() { Id = ++ndx, FirstName="Stu", LastName="Gad", School="Business" },

            new Student() { Id = ++ndx, FirstName="Tom", LastName="Bee", School="Tourism" },

            new Student() { Id = ++ndx, FirstName="Bob", LastName="Lam", School="Agriculture" },

            new Student() { Id = ++ndx, FirstName="Jim", LastName="Ots", School="Medicine" },

            new Student() { Id = ++ndx, FirstName="Tom", LastName="Mag", School="Mining" },

            new Student() { Id = ++ndx, FirstName="Hal", LastName="Doe", School="Agriculture" },

            new Student() { Id = ++ndx, FirstName="Roy", LastName="Kim", School="Nursing" },

            new Student() { Id = ++ndx, FirstName="Vis", LastName="Cox", School="Science" },

            new Student() { Id = ++ndx, FirstName="Kay", LastName="Aga", School="Tourism" },

            new Student() { Id = ++ndx, FirstName="Reo", LastName="Hui", School="Business" },

            new Student() { Id = ++ndx, FirstName="Bob", LastName="Roe", School="Medicine" },

        };

        return students.AsQueryable();

    }

}

Add this QuickGrid package to your server-side blazor app:

dotnet add package Microsoft.AspNetCore.Components.QuickGrid

Add this to Components/_Imports.razor:

@using Microsoft.AspNetCore.Components.QuickGrid

@using BlazorQuickGrid.Models

Replace Components/Pages/Home.razor with the following:

@page "/"

@rendermode InteractiveServer

<PageTitle>Students</PageTitle>

<h1>Students</h1>

<QuickGrid Items="@students">

    <PropertyColumn Property="@(_ => _.Id)" Sortable="true" />

    <PropertyColumn Property="@(_ => _.FirstName)" Sortable="true" />

    <PropertyColumn Property="@(_ => _.LastName)" Sortable="true" />

    <PropertyColumn Property="@(_ => _.School)" Sortable="true" />

</QuickGrid>

@code {

    IQueryable<Student> students = Student.GetStudents();

}

You can now run your app with:

dotnet watch

The following page would load in your browser:

One of the quick wins that you get out of the box is the ability to sort. Click on the column titles and you will see that the data in the column sorts.

Pagination

Add this variable inside the @code { . . .  } block in Components/Pages/Home.razor.

private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Add this parameter in to the opening <QuickGrid> tag:

Pagination="@pagination"

To provide for paging, add this pagination component under </QuickGrid>:

<Paginator State="@pagination" />

Pagination will appear at the bottom of the table:

TemplateColumn

Suppose we want to combine first and last names into the same column. This is a good example of why you would use TemplateColumn. 

Replace:

<PropertyColumn Property="@(_ => _.FirstName)" Sortable="true" />

<PropertyColumn Property="@(_ => _.LastName)" Sortable="true" />

WITH

<TemplateColumn Title="Name">

  <div class="flex items-center">

    <nobr>

      @context.FirstName @context.LastName

    </nobr>

  </div>

</TemplateColumn>

Although we succeeded in putting the full name under one column, unfortunately, the Name column is not sortable. Let us fix that.Add this sortByName variable into the @code {  . . . } code block:

GridSort<Student> sortByName = GridSort<Student>

    .ByAscending(_ => _.FirstName).ThenAscending(_ => _.LastName);

Also, add this parameter to the opening <TemplateColumn> tag for Name:

SortBy="@sortByName"

It is now possible to sort the Name column.

There is much more you can do with the QuickGrid component. Consider this a small taste of what is possible.