Blazorise DataGrid: Sorting

Sorting allows you to arrange data in ascending or descending order. To sort a column, click its header.

Overview

All columns can be sorted automatically if the option Sortable is enabled on the column.

Use SortField if you would like to set a different field or property to be considered by the sorting mechanism on a certain column.

Examples

Single

By default the DataGrid sorting mode is single column based.
#
First Name
Last Name
Email
Salary
1SamuelCollier[email protected]86 030,41 €
2IrvinZiemann[email protected]61 781,31 €
3GeraldPollich[email protected]58 810,75 €
4CoraConn[email protected]84 414,66 €
5AlfonsoD'Amore[email protected]69 318,29 €
6JessieWilkinson[email protected]78 566,12 €
7GregoryRenner[email protected]57 456,82 €
8MaryannHilpert[email protected]89 153,38 €
9MerlePacocha[email protected]55 349,94 €
10AngelinaWard[email protected]73 625,86 €
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive
          Sortable
          SortMode="DataGridSortMode.Single">
    <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>
            <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>

@code{
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Multiple

You may also change the DataGrid sorting mode to multiple, to allow sorting on multiple columns.
#
First Name
Last Name
Email
Salary
1SamuelCollier[email protected]86 030,41 €
2IrvinZiemann[email protected]61 781,31 €
3GeraldPollich[email protected]58 810,75 €
4CoraConn[email protected]84 414,66 €
5AlfonsoD'Amore[email protected]69 318,29 €
6JessieWilkinson[email protected]78 566,12 €
7GregoryRenner[email protected]57 456,82 €
8MaryannHilpert[email protected]89 153,38 €
9MerlePacocha[email protected]55 349,94 €
10AngelinaWard[email protected]73 625,86 €
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive
          Sortable
          SortMode="DataGridSortMode.Multiple">
    <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>
            <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>

@code{
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

SortField

The SortField feature, allows you to define a different Property or Field of the Item to be considered by the sorting mechanism.

In this example, we define the Sort Field of the Childrens Column to be the calculated property ChildrensPerSalary.

#
First Name
Last Name
Email
Salary
Childrens
81PatRohan[email protected]50 151,72 €5
485GinaBruen[email protected]50 564,33 €5
103HelenMueller[email protected]51 704,43 €5
149AlbertoBernhard[email protected]52 655,29 €5
252MarkBins[email protected]52 790,83 €5
40BobbieRogahn[email protected]52 889,16 €5
215DonAltenwerth[email protected]52 897,75 €5
354PaulaKautzer[email protected]53 365,86 €5
498SusieCasper[email protected]53 448,48 €5
314KristenHuel[email protected]54 689,50 €5
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive
          Sortable
          SortMode="DataGridSortMode.Single">
    <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>
            <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
    <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Childrens )" Caption="Childrens" Editable Filterable="false"
                           SortField="@nameof( Employee.ChildrensPerSalary )" SortDirection="SortDirection.Descending" />
</DataGrid>

@code{
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

SortComparer

The SortComparer feature allows you to define a custom sorting logic for a column by specifying an IComparer<TItem> implementation. This is useful when you want to sort data based on complex or calculated criteria that go beyond the default alphabetical or numerical order. Note that this comparer can only be used with in-memory data.

In this example, a custom comparer is applied to sort by the FirstName length, and then, for items with the same first name length, alphabetically by LastName. Sort by Full Name column to see it in action. This demonstrates how to implement a multi-criteria sorting mechanism in Blazorise's DataGrid.

#
Full Name
Email
Salary
1Samuel Collier[email protected]86 030,41 €
2Irvin Ziemann[email protected]61 781,31 €
3Gerald Pollich[email protected]58 810,75 €
4Cora Conn[email protected]84 414,66 €
5Alfonso D'Amore[email protected]69 318,29 €
6Jessie Wilkinson[email protected]78 566,12 €
7Gregory Renner[email protected]57 456,82 €
8Maryann Hilpert[email protected]89 153,38 €
9Merle Pacocha[email protected]55 349,94 €
10Angelina Ward[email protected]73 625,86 €
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive
          Sortable
          SortMode="DataGridSortMode.Single">
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridNumericColumn TItem="Employee" Field="@nameof(Employee.FirstName)" Caption="Full Name" Filterable="false" SortComparer="new EmployeeNameComparer()">
        <DisplayTemplate>
            @($"{context.FirstName} {context.LastName}")
        </DisplayTemplate>
    </DataGridNumericColumn>
    <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>
            <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>

@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }

    public class EmployeeNameComparer : Comparer<Employee>
    {
        public override int Compare( Employee x, Employee y )
        {
            // Null checks
            if ( x is null && y is null ) return 0;
            if ( x is null ) return -1;
            if ( y is null ) return 1;

            // Compare by length of FirstName
            int firstNameLengthComparison = x.FirstName.Length.CompareTo(y.FirstName.Length);

            // If FirstName lengths are the same, compare alphabetically by LastName
            return firstNameLengthComparison != 0
                ? firstNameLengthComparison
                : string.CompareOrdinal(x.LastName, y.LastName);
        }
    }
}

ApplySorting

You can use the ApplySorting method to programmatically specify the columns to sort by.

In this example, there are two buttons to change the sort order programmatically.

#
First Name
Last Name
Email
Salary
Childrens
Gender
1SamuelCollier[email protected]86030.413M
2IrvinZiemann[email protected]61781.313M
3GeraldPollich[email protected]58810.751M
4CoraConn[email protected]84414.665D
5AlfonsoD'Amore[email protected]69318.295F
6JessieWilkinson[email protected]78566.124M
7GregoryRenner[email protected]57456.821F
8MaryannHilpert[email protected]89153.385D
9MerlePacocha[email protected]55349.945F
10AngelinaWard[email protected]73625.863D
1 - 10 of 499 items
499 items
<Button Color="Color.Secondary" Clicked="OnResetClicked">Reset sorting</Button>
<Button Color="Color.Primary" Clicked="OnPredefinedClicked">Apply predefined sorting</Button>

<DataGrid @ref="dataGrid"
          TItem="Employee"
          Data="@employeeList"
          Responsive
          Sortable
          SortMode="DataGridSortMode.Multiple"
          ShowPager="true">
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" />
    <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" />
    <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Childrens )" Caption="Childrens" />
    <DataGridColumn Field="@nameof(Employee.Gender)" Caption="Gender" />
</DataGrid>

@code {
    [Inject] public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private DataGrid<Employee> dataGrid;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }

    private Task OnResetClicked() => dataGrid.ApplySorting(Array.Empty<DataGridSortColumnInfo>());

    private Task OnPredefinedClicked() => dataGrid.ApplySorting(
        new DataGridSortColumnInfo(nameof(Employee.Childrens), SortDirection.Descending),
        new DataGridSortColumnInfo(nameof(Employee.Gender), SortDirection.Ascending)
        );
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page