Blazor Grid Sorting Overview
The Ignite UI for Blazor Data Table / Data Grid supports ascending and descending column sorting with a Single Column, Multi-Column and Tri-State Column Sorting configuration.
Blazor Grid Sorting Example
Code Snippet
You can sort by a single or multiple column ascending or descending in the Blazor data grid by using the HeaderClickAction
property. If TriState is enabled you can remove the sort applied to a column.
SortByMultipleColumns
SortByMultipleColumnsTriState
SortByOneColumnOnly
SortByOneColumnOnlyTriState
<IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
HeaderClickAction="HeaderClickAction.SortByMultipleColumns"
DataSource="DataSource" />
Sorting through API
@code {
// Using the ref property above:
private IgbDataGrid grid;
private IgbDataGrid DataGridRef
{
get { return grid; }
set
{
grid = value;
OnGridRefChanged();
StateHasChanged();
}
}
private void OnGridRefChanged()
{
if (this.DataGridRef != null)
{
this.DataGridRef.SortDescriptions.Add(new ColumnSortDescription()
{
Field = "Property",
SortDirection = ListSortDirection.Descending
});
}
}
}
API References
HeaderClickAction
SortByMultipleColumnsTriState
SortByMultipleColumns
SortByOneColumnOnlyTriState