BlazorDataGrid 6.0.1

dotnet add package BlazorDataGrid --version 6.0.1                
NuGet\Install-Package BlazorDataGrid -Version 6.0.1                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="BlazorDataGrid" Version="6.0.1" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorDataGrid --version 6.0.1                
#r "nuget: BlazorDataGrid, 6.0.1"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorDataGrid as a Cake Addin
#addin nuget:?package=BlazorDataGrid&version=6.0.1

// Install BlazorDataGrid as a Cake Tool
#tool nuget:?package=BlazorDataGrid&version=6.0.1                

License Package Version

Lire en français

Warning, version 3.0.0 introduces changes compared to the previous version which requires to review the implementation in your programs

Since version 5.0.0 it's not longer necesary to specified the colection used in each column and cells anymore


It's a Blazor component. A filtered, paged and sorted datagrid.

The Nuget package page can be found at


To install BlazorDataGrid using Package Manager run the following command

Install-Package BlazorDataGrid -Version 6.0.1

To install BlazorDataGrid using .NET CLI run the following command

dotnet add package BlazorDataGrid --version 6.0.1

After you have installed the package add the following line in the _Imports.razor file

@using BlazorDataGrid

And in the Startup.cs file in the method public void ConfigureServices(IServiceCollection services)



  • The <BlazorDataGrid> component accepts following parameters:

    • Items(mandatory): The list with the results to show in the datagrid
    • PageSize: The initial number of results per page. If it is not present, the initial number is the first value of the selector.
    • ShowTotalResult: A boolean to show or not the total number of results.
    • BlazorDataGridColumn: A component to display the header
    • GridRow: Datagrid's row
    • Translation: (optional) A dictionnary with the datagrid's translation. the A dictionnary with the datagrid's translation detail the content of the dictionnary.
    • ShowPageSelector: true or false, show or not the item per page selector
    • PageSelector : A dictionnary (string int). Allows to customize the selector (display / value). The value 0 means all the elements. By default the display is the following:
    • "5", 5
    • "10", 10
    • "25", 25
    • "50", 50
    • "100", 100
    • "*", 0
    • Editable: true or false, allows the datagrid to be editable. If the parameter is not present, the datagrid is not editable.
  • The <BlazorDataGridColumn> component accepts following parameters:

    • DataGridColumn: The header component.
  • The <DataGridColumn> component accepts following parameters:

    • ColumnName: The actual name of the column on which the filter and the sorted are based
    • DisplayColumnName: (non mandatory) The name that will be displayed in the header. It is possible to pass the contents of the header between the tags instead
    • Filter: true or false to show or not the input filter on the column
    • DropdownFilter: true or false. Replacing the filter input text by a list witch contains all different values of the column.
    • Format: Specifies the date format to display
    • ReadOnly: Set a column ReadOnly when the datagrid is editable.
  • The <GridRow> component accepts following parameters:

    • Cell : The component detailing each cell of the row.
  • The Cell component accepts following parameters:

    • Content : The contents of the cell. The parameter of the collection to display is placed in a double brace {{}}
    • ValidationPattern : A regular expression to apply a control on the cell.
    • LabelError : The message to display in case of validation failure.

Example of use:

<BlazorDataGrid Items="@forecasts" ShowTotalResult="true" TheadClass="thead-dark" Translation="@translate"
                ShowPageSelector="true" PageSelector="@PageSelector" Editable="false" RowSelector="true">
        <DataGridColumn ColumnName="Date" Filter="true" Format="dd/MM/yyyy"><strong>Date</strong></DataGridColumn>
        <DataGridColumn ColumnName="TemperatureC" DisplayColumnName="TemperatureC" Filter="true"></DataGridColumn>
        <DataGridColumn ColumnName="TemperatureF" DisplayColumnName="TemperatureF" DropdownFilter="true" ReadOnly="true"></DataGridColumn>
        <DataGridColumn ColumnName="Summary" DisplayColumnName="Summary" Filter="true"></DataGridColumn>
        <Cell Content="{{Date}}"/>
        <Cell Content="<strong>{{TemperatureC}}</strong>" ValidationPattern="^[-]?\d+$" LabelError="@translate["labelError"]"/>
        <Cell Content="{{TemperatureF}}" />
        <Cell Context="ctx" >
private Dictionary<string, string> translate = new Dictionary<string, string>
        {"next", "next" },
        {"previous", "Previous" },
        {"pages", "Page __curpage__ of __totalpages__" },
        {"totalresult", "__totalcount__ item" },
        {"totalresultplural", "__totalcount__ items"},
        {"filteredresults", "__filteredcount__ result of __totalcount__ items" },
        {"filteredresultsplural", "__filteredcount__ results of __totalcount__ items"  },
        {"selector", "Items per page:"}

private Dictionary<string, int> PageSelector = new Dictionary<string, int>
        {"5", 5 },
        {"10", 10 },
        {"20", 20 },
        {"30", 30 },
        {"All", 0 }


The translation is done through a dictionary string string. The different key values ​​are as follows:

  • next: button next in pagination
  • previous: button previous in pagination
  • pages: The display area of ​​the current page and the total number of pages. In the value part, it is possible to enter the following variables:
    • __curpage__: the current page
    • __totalpages__: the total number of pages
  • totalresult: The sentence displays the total number of results in the singular (0 or 1 result). In the value part, it is possible to enter the following variables:
    • __totalcount__: the total number of results
  • totalresultplural: The sentence displays the total number of results in the plural (2 résults or more)
    • __totalcount__: the total number of results
  • filteredresults : allows the display of filtered results in the singular (0 or 1 result).
    • __filteredcount__: the number of filtered results.
    • __totalcount__: the total number of results
  • filteredresultsplural: allows the display of filtered results in the plural (2 résults or more).
    • __filteredcount__: the number of filtered results.
    • __totalcount__: the total number of results
  • selector: Text for the items per page selector
  • loading: The loading message.
  • labelError: Error message when you enter an invalid format in the datagrid.


sortie 1

sortie 2

Release Notes

Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
6.0.1 204 9/1/2023
6.0.1-beta.5 64 9/1/2023
6.0.1-beta.3 65 9/1/2023
6.0.1-beta.2 63 9/1/2023
6.0.1-beta 85 9/1/2023
6.0.0 128 8/25/2023
5.0.1 534 7/7/2022
5.0.0 355 11/19/2021
5.0.0-beta.1 159 8/22/2021
4.1.1 458 2/12/2021
4.1.1-beta.2 148 2/12/2021
4.1.1-beta.1 140 2/12/2021
4.1.0 339 2/12/2021
4.0.0 361 2/10/2021
3.0.0 554 10/16/2020
2.0.2 454 6/11/2020
2.0.1 270 5/14/2020
2.0.0 257 5/4/2020
1.11.0 2,504 12/16/2019
1.10.2 325 10/22/2019
1.10.1 285 10/21/2019
1.10.0 281 10/17/2019
1.9.0 314 10/15/2019
1.8.0 326 9/23/2019
1.7.0 295 9/6/2019
1.6.0 301 9/3/2019
1.5.0 288 9/2/2019
1.4.0 332 8/26/2019
1.3.0 329 8/22/2019
1.2.0 333 8/13/2019
1.1.1 332 8/5/2019
1.1.0 330 8/5/2019
1.0.0 354 8/3/2019