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
1SamuelCollierSamuel.Collier62@gmail.com86 030,41 €
2IrvinZiemannIrvin.Ziemann@gmail.com61 781,31 €
3GeraldPollichGerald82@yahoo.com58 810,75 €
4CoraConnCora27@yahoo.com84 414,66 €
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.com69 318,29 €
6JessieWilkinsonJessie_Wilkinson@gmail.com78 566,12 €
7GregoryRennerGregory63@hotmail.com57 456,82 €
8MaryannHilpertMaryann.Hilpert12@gmail.com89 153,38 €
9MerlePacochaMerle3@gmail.com55 349,94 €
10AngelinaWardAngelina42@gmail.com73 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
1SamuelCollierSamuel.Collier62@gmail.com86 030,41 €
2IrvinZiemannIrvin.Ziemann@gmail.com61 781,31 €
3GeraldPollichGerald82@yahoo.com58 810,75 €
4CoraConnCora27@yahoo.com84 414,66 €
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.com69 318,29 €
6JessieWilkinsonJessie_Wilkinson@gmail.com78 566,12 €
7GregoryRennerGregory63@hotmail.com57 456,82 €
8MaryannHilpertMaryann.Hilpert12@gmail.com89 153,38 €
9MerlePacochaMerle3@gmail.com55 349,94 €
10AngelinaWardAngelina42@gmail.com73 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
81PatRohanPat_Rohan@gmail.com50 151,72 €5
485GinaBruenGina60@gmail.com50 564,33 €5
103HelenMuellerHelen_Mueller@gmail.com51 704,43 €5
149AlbertoBernhardAlberto.Bernhard41@gmail.com52 655,29 €5
252MarkBinsMark.Bins@hotmail.com52 790,83 €5
40BobbieRogahnBobbie.Rogahn7@yahoo.com52 889,16 €5
215DonAltenwerthDon.Altenwerth32@gmail.com52 897,75 €5
354PaulaKautzerPaula73@hotmail.com53 365,86 €5
498SusieCasperSusie.Casper52@yahoo.com53 448,48 €5
314KristenHuelKristen.Huel@gmail.com54 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 CollierSamuel.Collier62@gmail.com86 030,41 €
2Irvin ZiemannIrvin.Ziemann@gmail.com61 781,31 €
3Gerald PollichGerald82@yahoo.com58 810,75 €
4Cora ConnCora27@yahoo.com84 414,66 €
5Alfonso D'AmoreAlfonso.DAmore@hotmail.com69 318,29 €
6Jessie WilkinsonJessie_Wilkinson@gmail.com78 566,12 €
7Gregory RennerGregory63@hotmail.com57 456,82 €
8Maryann HilpertMaryann.Hilpert12@gmail.com89 153,38 €
9Merle PacochaMerle3@gmail.com55 349,94 €
10Angelina WardAngelina42@gmail.com73 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
1SamuelCollierSamuel.Collier62@gmail.com86030.413M
2IrvinZiemannIrvin.Ziemann@gmail.com61781.313M
3GeraldPollichGerald82@yahoo.com58810.751M
4CoraConnCora27@yahoo.com84414.665D
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.com69318.295F
6JessieWilkinsonJessie_Wilkinson@gmail.com78566.124M
7GregoryRennerGregory63@hotmail.com57456.821F
8MaryannHilpertMaryann.Hilpert12@gmail.com89153.385D
9MerlePacochaMerle3@gmail.com55349.945F
10AngelinaWardAngelina42@gmail.com73625.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