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