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();
    }
}

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