BlazorGrid: A Reusable Grid Component for Blazor

DZone 's Guide to

BlazorGrid: A Reusable Grid Component for Blazor

Take your applications UI/UX to the nexts level by adding pagination to your app using the Blazor development framework.

· Web Dev Zone ·
Free Resource


In this article, we will create a reusable grid component for Blazor called BlazorGrid. It will display the user data in a grid and supports client-side pagination.

Take a look at the final application.

To learn how to publish BlazorGrid component to the NuGet Gallery refer to Publishing a Blazor Component to Nuget Gallery


  • Install the .NET Core 2.1 or above SDK from here.
  • Install latest version of Visual Studio 2017 from here.
  • Install ASP.NET Core Blazor Language Services extension from here.
  • Install Blazor templates on the command-line using the following command :
dotnet new -i Microsoft.AspNetCore.Blazor.Templates

Source Code

Get the source code from GitHub.

Creating Blazor Library Project

To create a Blazor library project follow the steps mentioned below:

  1. Navigate to the folder where you want to create your project.
  2. Open the command prompt or Windows PowerShell as an administrator.
  3. Run the following command:
dotnet new blazorlib -o BlazorGridComponent

It will create a Blazor library project with the name BlazorGridComponent.

Open this project using Visual Studio. You will see a folder structure as shown in the image below:

There are some predefined files provided in this project. We will delete the Component1.cshtml, ExampleJsInterop.cs, exampleJsInterop.cs, and background.png files to make our solution clean. Do not delete styles.css as we will put the CSS definitions for our custom component in this file.

Creating a BlazorGrid Component

Now we will add the component view page to our project.

Right-click on BlazorGridComponent project and then select Add >> New Item. An "Add New Item" dialog box will open, select "Web" from the left panel, then select "Razor View" from the templates panel and name it BlazorGrid.cshtml. Click Add. Refer to the image below.

Open the BlazorGrid.cshtmlfile and put the following code into it.

@typeparam TableItem

        <tr class="jsgrid-grid-header">@GridHeader</tr>
        @foreach (var item in ItemList)
            <tr class="jsgrid-row-item">@GridRow(item)</tr>
<div class="pagination">

    <button class="btn pagebutton btn-info" onclick=@(async () => SetPagerSize("back"))>&laquo;</button>
    <button class="btn pagebutton btn-secondary" onclick=@(async () => NavigateToPage("previous"))>Prev</button>

    @for (int i = startPage; i <= endPage; i++)
        var currentPage = i;
        <button class="btn pagebutton @(currentPage==curPage?"currentpage":"")" onclick=@(async () => updateList(currentPage))>

    <button class="btn pagebutton btn-secondary" onclick=@(async () => NavigateToPage("next"))>Next</button>
    <button class="btn pagebutton btn-info" onclick=@(async () => SetPagerSize("forward"))>&raquo;</button>

    <span class="pagebutton btn btn-link disabled">Page @curPage of @totalPages</span>


@functions {
int totalPages;
int curPage;
int pagerSize;
int startPage;
int endPage;

RenderFragment GridHeader { get; set; }
RenderFragment<TableItem> GridRow { get; set; }
IEnumerable<TableItem> Items { get; set; }
int PageSize { get; set; }

IEnumerable<TableItem> ItemList { get; set; }

protected override async Task OnInitAsync()
    pagerSize = 5;
    curPage = 1;

    ItemList = Items.Skip((curPage - 1) * PageSize).Take(PageSize);
    totalPages = (int)Math.Ceiling(Items.Count() / (decimal)PageSize);


public void updateList(int currentPage)
    ItemList = Items.Skip((currentPage - 1) * PageSize).Take(PageSize);
    curPage = currentPage;

public void SetPagerSize(string direction)
    if (direction == "forward" && endPage < totalPages)
        startPage = endPage + 1;
        if (endPage + pagerSize < totalPages)
            endPage = startPage + pagerSize - 1;
            endPage = totalPages;
    else if (direction == "back" && startPage > 1)
        endPage = startPage - 1;
        startPage = startPage - pagerSize;

public void NavigateToPage(string direction)
    if (direction == "next")
        if (curPage < totalPages)
            if (curPage == endPage)
            curPage += 1;
    else if (direction == "previous")
        if (curPage > 1)
            if (curPage == startPage)
            curPage -= 1;

Let's understand this code.

In the HTML section of the code, we have defined a table. The <thead> section of the table will display the header of the grid as defined in the GridHeader parameter. Similarly, the <tbody> section will iterate through the content of the GridRow parameter to display the data in rows.

We have also defined the HTML of the pagination section. It contains Next and Prev buttons to move through the pages. We have also defined the buttons to navigate to the next set of pages. The default pager size is set to five. This means the page buttons will be displayed in a set of five buttons.

In the functions section, we have defined four parameters for the BlazorGridcomponent:

  • Items: The list of items supplied to the BlazorGrid.
  • PageSize: Size of each page of BlazorGrid.
  • GridHeader: Header for BlazorGrid.
  • GridRow: Rows for BlazorGrid.

Inside the OnInitAsync method, we are initializing the pagerSize to five and setting the curPage to one. We will calculate the total number of pages and bind the data to the first page of the grid.

The updateList method will be invoked when we click on a page button. It will bind the data to the current page of the grid.

The SetPagerSize method will set the page number in every pager set. The page buttons will be displayed in a set of five buttons and if the number of pages is more than five, the page button will be displayed in next pager set. This method will accept string parameters and, based on the value, it will set the page buttons for the next or previous set of five buttons. A demo of pager set is shown below:

The NavigateToPage method will be invoked on clicking the Next or Prev button. It will navigate the user to the immediately next or immediately previous page in the grid.

Adding CSS for BlazorGrid Component

Open the /content/styles.css file and put the following code into it:

.jsgrid-grid-header {
    text-align: center;
    border-collapse: collapse;
    background: #ebebeb;

.jsgrid-row-item:hover {
    background: #9fcdf4;

th, td {
    padding: 15px;
    border: 1px solid #d1d1d1;
    text-align: center;

.pagebutton {
    margin-right: 5px;
    margin-top: 5px;

.currentpage {
    background-color: dodgerblue;
    color: white;

In this file, we have defined the styling for the BlazorGrid component.

Now we will use this component in a Blazor project.

Create a Blazor Web Application

Open Visual Studio and select File >> New >> Project.

After selecting the project, a "New Project" dialog will open. Select .NET Core inside the Visual C# menu from the left-hand panel. Then, select "ASP.NET Core Web Application" from the available project types. Put the name of the project as TestApplication and press OK.

After clicking on OK, a new dialog will open asking you to select the project template. You can observe two drop-down menus at the top-left of the template window. Select ".NET Core" and "ASP.NET Core 2.1" from these dropdowns. Then, select the "Blazor" template and press OK. Refer to the image below:

Adding the BlazorGrid Component to the Blazor Project

To include the BlazorGridComponent project in this Blazor project, follow the steps mentioned below:

  1. Right-click on the solution and select Add >> Existing item.
  2. Browse to the BlazorGridComponent library, select the BlazorGridComponent.csproj file, and click Add.

This will include the BlazorGridComponent project in current solution. Refer to the image below:

The next step is to add the reference to the shared component. Right-click "TestApplication\Dependencies." Select Add Reference... Then, select the BlazorGridComponent project and click OK. Refer to the image below:

The final step is to add the following line to TestApplication\ _ViewImports.cshtml file.

@addTagHelper *,BlazorGridComponent

This will allow us to use the shared BlazorGridComponent in our TestApplication project.

Using the BlazorGrid Component

Open TestApplication\Pages\FetchData.cshtml file. In the HTML section of the code put the following lines inside the else section.

<BlazorGrid Items="@forecasts" PageSize="4">

The name of HTML tag will be same as the file name of our component, which is <BlazorGrid> in this case. We are setting the value of the Items parameter to the forecasts. We have set the PageSize to 4 which means the grid will display four items in each page. The headers for the Grid are defined in <GridHeader>.

Inside the <GridRow> we have declared the row items for our grid using the implicit parameter "context". The Blazor framework provides this and we need to use it to initialize the arguments of type RenderFragment<T>, which is GridRow in this case.

Execution Demo

Run the application and navigate to the Fetch data page. You will see the data is being displayed in a Grid fashion as shown in the image below:


We have created a shared Blazor — BlazorGrid. It displays the user data in a grid. This component also provides client-side pagination. We learned how to reference and use the shared component in a Blazor application.

Please get the source code from GitHub and play around to get a better understanding.

Get my book Blazor Quick Start Guide to learn more about Blazor.

blazor tutorial, pagination, web application development, web dev

Published at DZone with permission of Ankit Sharma , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}