Blazorise DataGrid: Getting Started

Help users explore and edit tabular data with sorting, filtering, and paging.

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.

Structure

A DataGrid defines its columns in the DataGridColumns fragment. Add a DataGridAggregates fragment when the grid needs summary values.

<DataGrid>Displays and manages the records.
- <DataGridColumns>The named fragment containing column definitions.
  - <DataGridColumn>A column with a text editor or custom templates.
  - <DataGridNumericColumn>A column for numeric values.
  - <DataGridDateColumn>A column for date and time values.
  - <DataGridCheckColumn>A column for Boolean values.
  - <DataGridSelectColumn>A column with selectable values.
  - <DataGridCommandColumn>A column with editing commands, such as Save or Cancel.
- <DataGridAggregates>The named fragment containing aggregate definitions.
  - <DataGridAggregate>Defines a column and its aggregation function.

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="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.

Use DisplayFormat with a direct .NET format specifier, such as C or dd.MM.yyyy. Composite formats such as Total: {0:C} remain supported when you need literal text, alignment, or other composite-format features.

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.