Blazorise DataGrid: Getting Started

The DataGrid component is used for displaying tabular data. Features include sorting, filtering, paging, inline editing, and row selection.

See DataGrid specifications for behavior details and edge cases.

📊 The Community License has a limitation of 1000 items. Unlock full access to all features with our premium plans.

To create a basic grid in Blazorise, define the columns that describe the grid structure and behavior.

<DataGrid> the main container
- <DataGridColumns> container for datagrid columns
  - <DataGridColumn> column template for text editor
  - <DataGridNumericColumn> column template for numeric values
  - <DataGridDateColumn> column template for datetime values
  - <DataGridCheckColumn> column template for boolean values
  - <DataGridSelectColumn> column template for selectable values
  - <DataGridCommandColumn> column template for editing commands like Edit, Save, Cancel, etc.
- <DataGridAggregates> container for datagrid aggregates
  - <DataGridAggregate> defines the column and aggregation function type

To use the DataGrid component, install the Blazorise.DataGrid package first.

Installation

NuGet

Install extension from NuGet.

dotnet add package Blazorise.DataGrid

Imports

In your main _Imports.razor add:

@using Blazorise.DataGrid

Usage

Every DataGrid example is presented as one self-contained Example.razor file. The model and sample data are included in its @code block, so the entire example can be copied into a configured Blazorise project at once.

Basic DataGrid

Bind the grid to an in-memory collection and define the columns that should be displayed.

#	First Name	Last Name	Email	Salary
1	John	Doe	john.doe@example.com	80 000,00 €
2	Jane	Doe	jane.doe@example.com	75 000,00 €
3	David	Smith	david.smith@example.com	100 000,00 €

@using System.Collections.Generic

<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive>
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof( Employee.Id )" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof( Employee.Email )" Caption="Email" Editable />
    <DataGridColumn Field="@nameof( Employee.Salary )" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo( "fr-FR" )" Editable>
        <EditTemplate>
            <NumericInput TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@(v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>

@code {
    private readonly List<Employee> employeeList =
    [
        new() { Id = 1, FirstName = "John", LastName = "Doe", Email = "john.doe@example.com", Salary = 80000m },
        new() { Id = 2, FirstName = "Jane", LastName = "Doe", Email = "jane.doe@example.com", Salary = 75000m },
        new() { Id = 3, FirstName = "David", LastName = "Smith", Email = "david.smith@example.com", Salary = 100000m }
    ];

    private Employee selectedEmployee;

    private sealed class Employee
    {
        public int Id { get; set; }

        public string FirstName { get; set; } = string.Empty;

        public string LastName { get; set; } = string.Empty;

        public string Email { get; set; } = string.Empty;

        public decimal Salary { get; set; }
    }
}

DataGrid

For DataGrid the required fields are TItem typeparam and Data attribute. Other attributes on the DataGrid are optional.

Columns

Next you must set the Columns that you want to see in the grid. When defining the columns the required fields are:

TItem this is always the same model as on DataGrid. And you should be able to omit this on recent versions of Blazorise

Field

Caption

Throughout our examples you may see the usage of nameof when defining the Field Parameter. Note that nameof produces only the name of the variable, type or member as the string constant. It is used as a way to strongly type the string that represents our field. Please note, that this is not mandatory. And you may provide a regular string that represents the path to the field you want to be binding.

Nested fields

Field attribute also supports nested fields. You can define a column with field name like "City.Country.Name" and it will work. Just keep in mind that when editing nested fields they must be initialized first or otherwise they will raise an exception.

Note: DataGrid supports the CascadingTypeParameter feature. We've found out, that there might be a few caveats when using the feature. For most cases you'll be just fine with removing the explicit references to the Generic Type on the children component. But for the very few cases that Blazor complains that it cannot compile, just explicitly define the Generic Type. Here's an example:

This will not work:

<DataGridAggregate Field="@nameof( Employee.IsActive )" AggregationFunction=@(DataGridAggregate<Employee>.TrueCount) />

These will work:

<DataGridAggregate Field="@nameof( Employee.IsActive )" AggregationFunction=@((x,y) => DataGridAggregate<Employee>.TrueCount(x,y)) />

<DataGridAggregate TItem="Employee" Field="@nameof( Employee.IsActive )" AggregationFunction=@(DataGridAggregate<Employee>.TrueCount) />

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.