QuickGrid:

-Adds Multi column sorting capability
-Exposes SortColumns so that individual columns can easily apply their own logic based on whether or not they're currently being sorted by.  Use cases like swapping an icon out in markup, changing available options, etc.

Author: ashortland-eqix

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/Columns/GridSort.cs

@@ -15,6 +15,7 @@ public sealed class GridSort<TGridItem>
     private const string ExpressionNotRepresentableMessage = "The supplied expression can't be represented as a property name for sorting. Only simple member expressions, such as @(x => x.SomeProperty), can be converted to property names.";
 
     private readonly Func<IQueryable<TGridItem>, bool, IOrderedQueryable<TGridItem>> _first;
+    private readonly Func<IOrderedQueryable<TGridItem>, bool, IOrderedQueryable<TGridItem>> _thenFirst;
     private List<Func<IOrderedQueryable<TGridItem>, bool, IOrderedQueryable<TGridItem>>>? _then;
 
     private (LambdaExpression, bool) _firstExpression;
@@ -23,10 +24,14 @@ public sealed class GridSort<TGridItem>
     private IReadOnlyCollection<SortedProperty>? _cachedPropertyListAscending;
     private IReadOnlyCollection<SortedProperty>? _cachedPropertyListDescending;
 
-    internal GridSort(Func<IQueryable<TGridItem>, bool, IOrderedQueryable<TGridItem>> first, (LambdaExpression, bool) firstExpression)
+    internal GridSort(
+        Func<IQueryable<TGridItem>, bool, IOrderedQueryable<TGridItem>> first, 
+        (LambdaExpression, bool) firstExpression,
+        Func<IOrderedQueryable<TGridItem>, bool, IOrderedQueryable<TGridItem>> thenFirst)
     {
         _first = first;
         _firstExpression = firstExpression;
+        _thenFirst = thenFirst;
         _then = default;
         _thenExpressions = default;
     }
@@ -39,7 +44,8 @@ internal GridSort(Func<IQueryable<TGridItem>, bool, IOrderedQueryable<TGridItem>
     /// <returns>A <see cref="GridSort{T}"/> instance representing the specified sorting rule.</returns>
     public static GridSort<TGridItem> ByAscending<U>(Expression<Func<TGridItem, U>> expression)
         => new((queryable, asc) => asc ? queryable.OrderBy(expression) : queryable.OrderByDescending(expression),
-            (expression, true));
+            (expression, true),
+            (queryable, asc) => asc ? queryable.ThenBy(expression) : queryable.ThenByDescending(expression));
 
     /// <summary>
     /// Produces a <see cref="GridSort{T}"/> instance that sorts according to the specified <paramref name="expression"/>, descending.
@@ -49,7 +55,8 @@ public static GridSort<TGridItem> ByAscending<U>(Expression<Func<TGridItem, U>>
     /// <returns>A <see cref="GridSort{T}"/> instance representing the specified sorting rule.</returns>
     public static GridSort<TGridItem> ByDescending<U>(Expression<Func<TGridItem, U>> expression)
         => new((queryable, asc) => asc ? queryable.OrderByDescending(expression) : queryable.OrderBy(expression),
-            (expression, false));
+            (expression, false),
+            (queryable, asc) => asc ? queryable.ThenByDescending(expression) : queryable.ThenBy(expression));
 
     /// <summary>
     /// Updates a <see cref="GridSort{T}"/> instance by appending a further sorting rule.
@@ -85,9 +92,9 @@ public GridSort<TGridItem> ThenDescending<U>(Expression<Func<TGridItem, U>> expr
         return this;
     }
 
-    internal IOrderedQueryable<TGridItem> Apply(IQueryable<TGridItem> queryable, bool ascending)
+    internal IOrderedQueryable<TGridItem> Apply(IQueryable<TGridItem> queryable, bool ascending, bool firstColumn)
     {
-        var orderedQueryable = _first(queryable, ascending);
+        var orderedQueryable = ApplyCore(queryable, ascending, firstColumn);
 
         if (_then is not null)
         {
@@ -100,6 +107,21 @@ internal IOrderedQueryable<TGridItem> Apply(IQueryable<TGridItem> queryable, boo
         return orderedQueryable;
     }
 
+    private IOrderedQueryable<TGridItem> ApplyCore(IQueryable<TGridItem> queryable, bool ascending, bool firstColumn)
+    {
+        if (firstColumn)
+        {
+            return _first(queryable, ascending);
+        }
+
+        if (queryable is not IOrderedQueryable<TGridItem> src)
+        {
+            throw new InvalidOperationException($"Expected {typeof(IOrderedQueryable<TGridItem>)} since this is not the first sort column.");
+        }
+
+        return _thenFirst(src, ascending);
+    }
+
     internal IReadOnlyCollection<SortedProperty> ToPropertyList(bool ascending)
     {
         if (ascending)

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/Columns/SortColumn.cs

@@ -0,0 +1,18 @@
+namespace Microsoft.AspNetCore.Components.QuickGrid;
+
+/// <summary>
+/// Provides information about the column that has sorting applied.
+/// </summary>
+/// <typeparam name="TGridItem">The type of data represented by each row in the grid.</typeparam>
+public class SortColumn<TGridItem>
+{
+    /// <summary>
+    /// The column that has sorting applied.
+    /// </summary>
+    public ColumnBase<TGridItem>? Column { get; init; }
+
+    /// <summary>
+    /// Whether or not the sort is ascending.
+    /// </summary>
+    public bool Ascending { get; internal set; }
+}

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/GridItemsProviderRequest.cs

@@ -22,34 +22,25 @@ public readonly struct GridItemsProviderRequest<TGridItem>
     public int? Count { get; init; }
 
     /// <summary>
-    /// Specifies which column represents the sort order.
-    ///
+    /// Specifies which columns are currently being sorted.
+    /// 
     /// Rather than inferring the sort rules manually, you should normally call either <see cref="ApplySorting(IQueryable{TGridItem})"/>
-    /// or <see cref="GetSortByProperties"/>, since they also account for <see cref="SortByColumn" /> and <see cref="SortByAscending" /> automatically.
+    /// or <see cref="GetSortByProperties"/>, since they also account for <see cref="SortColumn{TGridItem}.Column"/> 
+    /// and <see cref="SortColumn{TGridItem}.Ascending"/> automatically.
     /// </summary>
-    public ColumnBase<TGridItem>? SortByColumn { get; init; }
-
-    /// <summary>
-    /// Specifies the current sort direction.
-    ///
-    /// Rather than inferring the sort rules manually, you should normally call either <see cref="ApplySorting(IQueryable{TGridItem})"/>
-    /// or <see cref="GetSortByProperties"/>, since they also account for <see cref="SortByColumn" /> and <see cref="SortByAscending" /> automatically.
-    /// </summary>
-    public bool SortByAscending { get; init; }
+    public IReadOnlyList<SortColumn<TGridItem>> SortColumns { get; init; }
 
     /// <summary>
     /// A token that indicates if the request should be cancelled.
     /// </summary>
     public CancellationToken CancellationToken { get; init; }
 
     internal GridItemsProviderRequest(
-        int startIndex, int? count, ColumnBase<TGridItem>? sortByColumn, bool sortByAscending,
-        CancellationToken cancellationToken)
+        int startIndex, int? count, IReadOnlyList<SortColumn<TGridItem>> sortColumns, CancellationToken cancellationToken)
     {
         StartIndex = startIndex;
         Count = count;
-        SortByColumn = sortByColumn;
-        SortByAscending = sortByAscending;
+        SortColumns = sortColumns;
         CancellationToken = cancellationToken;
     }
 
@@ -58,13 +49,26 @@ internal GridItemsProviderRequest(
     /// </summary>
     /// <param name="source">An <see cref="IQueryable{TGridItem}"/>.</param>
     /// <returns>A new <see cref="IQueryable{TGridItem}"/> representing the <paramref name="source"/> with sorting rules applied.</returns>
-    public IQueryable<TGridItem> ApplySorting(IQueryable<TGridItem> source) =>
-        SortByColumn?.SortBy?.Apply(source, SortByAscending) ?? source;
+    public IQueryable<TGridItem> ApplySorting(IQueryable<TGridItem> source)
+    {
+        for (var i = 0; i < SortColumns.Count; i++)
+        {
+            var sortColumn = SortColumns[i];
+            source = sortColumn.Column.SortBy.Apply(source, sortColumn.Ascending, i == 0);
+        }
+
+        return source;
+    }
 
     /// <summary>
     /// Produces a collection of (property name, direction) pairs representing the sorting rules.
     /// </summary>
     /// <returns>A collection of (property name, direction) pairs representing the sorting rules</returns>
-    public IReadOnlyCollection<SortedProperty> GetSortByProperties() =>
-        SortByColumn?.SortBy?.ToPropertyList(SortByAscending) ?? Array.Empty<SortedProperty>();
+    public IEnumerable<IReadOnlyCollection<SortedProperty>> GetSortByProperties()
+    {
+        foreach (var sortColumn in SortColumns)
+        {
+            yield return sortColumn.Column.SortBy?.ToPropertyList(sortColumn.Ascending) ?? [];
+        }
+    }
 }

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs

@@ -242,6 +242,13 @@ private void FinishCollectingColumns()
         _collectingColumns = false;
     }
 
+    private List<SortColumn<TGridItem>> _sortByColumns = [];
+
+    /// <summary>
+    /// The list of columns that have sorting applied.
+    /// </summary>
+    public IReadOnlyList<SortColumn<TGridItem>> SortColumns => _sortByColumns;
+
     /// <summary>
     /// Sets the grid's current sort column to the specified <paramref name="column"/>.
     /// </summary>
@@ -250,16 +257,28 @@ private void FinishCollectingColumns()
     /// <returns>A <see cref="Task"/> representing the completion of the operation.</returns>
     public Task SortByColumnAsync(ColumnBase<TGridItem> column, SortDirection direction = SortDirection.Auto)
     {
-        _sortByAscending = direction switch
+        _sortByColumns.RemoveAll(sbc => sbc.Column != column);
+        return AddUpdateSortByColumnAsync(column, direction);
+    }
+
+    public Task AddUpdateSortByColumnAsync(ColumnBase<TGridItem> column, SortDirection direction = SortDirection.Auto)
+    {
+        var sortBy = _sortByColumns.FirstOrDefault(sbc => sbc.Column == column);
+
+        if (sortBy == null)
+        {
+            sortBy = new() { Column = column };
+            _sortByColumns.Add(sortBy);
+        }
+
+        sortBy.Ascending = direction switch
         {
             SortDirection.Ascending => true,
             SortDirection.Descending => false,
-            SortDirection.Auto => _sortByColumn != column || !_sortByAscending,
-            _ => throw new NotSupportedException($"Unknown sort direction {direction}"),
+            SortDirection.Auto => !sortBy.Ascending,
+            _ => throw new NotSupportedException($"Unknown sort direction {direction}")
         };
 
-        _sortByColumn = column;
-
         StateHasChanged(); // We want to see the updated sort order in the header, even before the data query is completed
         return RefreshDataAsync();
     }
@@ -320,7 +339,7 @@ private async Task RefreshDataCoreAsync()
             _lastRefreshedPaginationStateHash = Pagination?.GetHashCode();
             var startIndex = Pagination is null ? 0 : (Pagination.CurrentPageIndex * Pagination.ItemsPerPage);
             var request = new GridItemsProviderRequest<TGridItem>(
-                startIndex, Pagination?.ItemsPerPage, _sortByColumn, _sortByAscending, thisLoadCts.Token);
+                startIndex, Pagination?.ItemsPerPage, SortColumns, thisLoadCts.Token);
             var result = await ResolveItemsRequestAsync(request);
             if (!thisLoadCts.IsCancellationRequested)
             {
@@ -356,7 +375,7 @@ private async Task RefreshDataCoreAsync()
         }
 
         var providerRequest = new GridItemsProviderRequest<TGridItem>(
-            startIndex, count, _sortByColumn, _sortByAscending, request.CancellationToken);
+            startIndex, count, SortColumns, request.CancellationToken);
         var providerResult = await ResolveItemsRequestAsync(providerRequest);
 
         if (!request.CancellationToken.IsCancellationRequested)