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 Members

    • HeaderClickAction
    • SortByMultipleColumnsTriState
    • SortByMultipleColumns
    • SortByOneColumnOnlyTriState