[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
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