Blazor Grid - Sorting
Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.
Client side sorting #
For sorting,
AllowSorting and SortKeySelector parameters are required.Add
AllowSorting="true" parameter to Grid and SortKeySelector to all the GridColumns.Set default sorting #
IsDefaultSortColumn parameter is required to set the default sorting. Add IsDefaultSortColumn="true" parameter to the GridColumn.The default sort direction will be ascending. To change the default sorting of a column, add
SortDirection="SortDirection.Descending" to the GridColumn.INFO
If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column.
The default sorting is enabled on the Employee Name column in the below example, and the sort direction is descending.
Disable specific column sorting #
Add
Sortable="false"parameter the GridColumn to disable the sorting. If sorting is disabled, then the SortKeySelector parameter is not required. The sorting is disabled on the Designation column in the below example.<Grid TItem="Employee1"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
AllowSorting="true">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="@(item => item.Id)">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="@(item => item.Name)">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation" Sortable="false">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="@(item => item.DOJ)">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="@(item => item.IsActive)">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee1>? employees;
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee1> GetEmployees()
{
return new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
};
}
}