[DataGrid] Provide new way to render column actions

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -1332,6 +1332,56 @@
             Constructs an instance of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1" />.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnOptionsLabels.OptionsMenu">
+            <summary>
+            Gets or sets the text shown in the column menu
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnOptionsLabels.Default">
+            <summary>
+            Gets the default labels for the options UI.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnResizeLabels.ResizeMenu">
+            <summary>
+            Gets or sets the text shown in the column menu 
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnResizeLabels.DiscreteLabel">
+            <summary>
+            Gets or sets the label in the discrete mode resize UI
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnResizeLabels.ExactLabel">
+            <summary>
+            Gets or sets the label in the exact mode resize UI
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnResizeLabels.GrowAriaLabel">
+            <summary>
+            Gets or sets the aria label for the grow button in the discrete resize UI
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnResizeLabels.ShrinkAriaLabel">
+            <summary>
+            Gets or sets the aria label for the shrink button in the discrete resize UI
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnResizeLabels.ResetAriaLabel">
+            <summary>
+            Gets or sets the aria label for the reset button in the resize UI
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnResizeLabels.SubmitAriaLabel">
+            <summary>
+            Gets or sets the aria label for the submit button in the resize UI
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnResizeLabels.Default">
+            <summary>
+            Gets the default labels for the resize UI.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnResizeOptions`1.Grid">
             <summary>
             Gets a reference to the enclosing <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1" />.
@@ -1350,6 +1400,26 @@
             The display of this component is dependant on a ResizeType being set
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnSortLabels.SortMenu">
+            <summary>
+            Gets or sets the text shown in the column menu 
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnSortLabels.SortMenuAscendingLabel">
+            <summary>
+            Gets or sets the text shown in the column menu when in ascending order
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnSortLabels.SortMenuDescendingLabel">
+            <summary>
+            Gets or sets the text shown in the column menu when in descending order
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnSortLabels.Default">
+            <summary>
+            Gets the default labels for the sort UI.
+            </summary>
+        </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.GridSort`1">
             <summary>
             Represents a sort order specification used within <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.
@@ -1794,6 +1864,21 @@
             (Aria) Labels used in the column resize UI.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ColumnSortLabels">
+            <summary>
+            Labels used in the column sort UI.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ColumnOptionsLabels">
+            <summary>
+            Labels used in the column options UI.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.HeaderCellAsButtonWithMenu">
+            <summary>
+             If true, enables the new style of header cell that includes a button to display all column options through a menu.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ItemKey">
              <summary>
              Optionally defines a value for @key on each rendered row. Typically this should be used to specify a
@@ -1948,6 +2033,13 @@
             </summary>
             <param name="column">The column whose options are to be displayed, if any are available.</param>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ShowColumnResizeAsync(Microsoft.FluentUI.AspNetCore.Components.ColumnBase{`0})">
+            <summary>
+            Displays the column resize UI for the specified column, closing any other column
+            resize UI that was previously displayed.
+            </summary>
+            <param name="column">The column whose resize UI is to be displayed.</param>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.RefreshDataAsync">
             <summary>
             Instructs the grid to re-fetch and render the current data from the supplied data source

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor

@@ -11,6 +11,7 @@
                 GridTemplateColumns="0.2fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr"
                 RowClass="@rowClass"
                 RowStyle="@rowStyle"
+                HeaderCellAsButtonWithMenu="true"
                 Style="height: 405px;overflow:auto;"
                 ColumnResizeLabels="@customLabels">
     <TemplateColumn Tooltip="true" TooltipText="@(c => "Flag of " + c.Name)" Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn=true>
@@ -25,8 +26,8 @@
     </PropertyColumn>
     <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="Align.Start" Tooltip="true" TooltipText="@(c => "That is " + c.Medals.Gold + " x GOLD!!")" />
     <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="Align.Center" Tooltip="true" />
-    <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" Align="Align.End" />
-    <PropertyColumn Property="@(c => c.Medals.Total)" Filtered="@(minMedals != 0 || maxMedals != 130)" Align="Align.End" Tooltip="true">
+    <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="false" Align="Align.End" />
+    <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Filtered="@(minMedals != 0 || maxMedals != 130)" Align="Align.End" Tooltip="true">
         <ColumnOptions>
             <div style="width: 100%; height: 150px;">
                 <FluentSlider Label="@($"Min ({minMedals})")" Min="0" Max="150" Step="1" Orientation="Orientation.Horizontal" @bind-Value=minMedals Immediate="true" Style="width: 100%;">
@@ -64,7 +65,7 @@
     int minMedals;
     int maxMedals = 130;
 
-    ColumnResizeLabels customLabels = new ColumnResizeLabels(DiscreteLabel: "Width (+/- 10px)", ResetAriaLabel: "restore");
+    ColumnResizeLabels customLabels = ColumnResizeLabels.Default with { DiscreteLabel = "Width (+/- 10px)", ResetAriaLabel = "Restore" };
 
     GridSort<Country> rankSort = GridSort<Country>
         .ByDescending(x => x.Medals.Gold)

examples/Demo/Shared/Pages/Lab/IssueTester.razor

@@ -1 +1,2 @@
 @page "/issue-tester"
+

src/Core/Components/DataGrid/Columns/ColumnBase.razor

@@ -13,6 +13,53 @@
         {
             @HeaderCellItemTemplate(this)
         }
+        else if (Grid.HeaderCellAsButtonWithMenu)
+        {
+            string? tooltip = Tooltip ? Title : null;
+
+            <FluentKeyCode Only="new [] { KeyCode.Ctrl, KeyCode.Enter}" OnKeyDown="HandleKeyDown" class="keycapture">
+                <span class="col-sort-container" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))" @oncontextmenu:preventDefault>
+                    <FluentButton Disabled="@(!AnyColumnActionEnabled)" Id="@_columnId" Appearance="Appearance.Stealth" class="col-sort-button" @onclick="@HandleColumnHeaderClickedAsync" aria-label="@tooltip" title="@tooltip">
+                        <div class="col-title-text" title="@tooltip">@Title</div>
+
+                        @if (Grid.SortByAscending.HasValue && ShowSortIcon)
+                        {
+                            if (Grid.SortByAscending == true)
+                            {
+                                <FluentIcon Value="@(new CoreIcons.Regular.Size24.ArrowSortUp())" Slot="@(Align == Align.End ? "start" : "end")" Style="opacity: 0.5;" />
+                            }
+                            else
+                            {
+                                <FluentIcon Value="@(new CoreIcons.Regular.Size24.ArrowSortDown())" Slot="@(Align == Align.End ? "start" : "end")" Style="opacity: 0.5;" />
+                            }
+                        }
+                        @if (Grid.ResizeType is not null && ColumnOptions is not null)
+                        {
+                            @if (Filtered.GetValueOrDefault())
+                            {
+                                <FluentIcon Value="@(new CoreIcons.Regular.Size24.Filter())" Slot="@(Align == Align.End ? "start" : "end")" Style="opacity: 0.5;" />
+                            }
+                        }
+                    </FluentButton>
+                    <FluentMenu Anchor="@_columnId" @bind-Open="@_isMenuOpen" HorizontalViewportLock="false" HorizontalScaling="@AxisScalingMode.Anchor">
+                        @if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())
+                        {
+                            <FluentMenuItem OnClick="@(async () => await Grid.SortByColumnAsync(this))" @onkeydown="HandleSortMenuKeyDownAsync">
+                                @GetSortOptionText()
+                            </FluentMenuItem>
+                        }
+                        @if (Grid.ResizeType is not null && Grid.ResizableColumns)
+                        {
+                            <FluentMenuItem OnClick="@(async () => await Grid.ShowColumnResizeAsync(this))" @onkeydown="HandleResizeMenuKeyDownAsync">@Grid.ColumnResizeLabels.ResizeMenu</FluentMenuItem>
+                        }
+                        @if (ColumnOptions is not null)
+                        {
+                            <FluentMenuItem OnClick="@(async () => await Grid.ShowColumnOptionsAsync(this))" @onkeydown="HandleOptionsMenuKeyDownAsync">@Grid.ColumnOptionsLabels.OptionsMenu</FluentMenuItem>
+                        }
+                    </FluentMenu>
+                </span>
+            </FluentKeyCode>
+        }
         else
         {
             string? tooltip = Tooltip ? Title : null;

src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs

@@ -128,6 +128,11 @@ public abstract partial class ColumnBase<TGridItem>
     /// </summary>
     protected FluentDataGrid<TGridItem> Grid => InternalGridContext.Grid;
 
+    protected bool AnyColumnActionEnabled => Sortable is true || IsDefaultSortColumn || ColumnOptions != null || Grid.ResizableColumns;
+
+    private bool _isMenuOpen;
+    private readonly string _columnId = $"column-header{Identifier.NewId()}";
+
     /// <summary>
     /// Event callback for when the row is clicked.
     /// </summary>
@@ -218,4 +223,65 @@ public ColumnBase()
     {
         HeaderContent = RenderDefaultHeaderContent;
     }
+
+    private async Task HandleColumnHeaderClickedAsync()
+    {
+        if ((Sortable is true || IsDefaultSortColumn) && (Grid.ResizableColumns || ColumnOptions is not null))
+        {
+            _isMenuOpen = !_isMenuOpen;
+        }
+        else if ((Sortable is true || IsDefaultSortColumn) && !Grid.ResizableColumns && ColumnOptions is null)
+        {
+            await Grid.SortByColumnAsync(this);
+        }
+        else if (Sortable is not true && !IsDefaultSortColumn && ColumnOptions is null && Grid.ResizableColumns)
+        {
+            await Grid.ShowColumnResizeAsync(this);
+        }
+    }
+
+    private async Task HandleSortMenuKeyDownAsync(KeyboardEventArgs args)
+    {
+        if (args.Key == "Enter" || args.Key == "NumpadEnter")
+        {
+            await Grid.SortByColumnAsync(this);
+            StateHasChanged();                          
+            _isMenuOpen = false;
+        }
+    }
+
+    private async Task HandleResizeMenuKeyDownAsync(KeyboardEventArgs args)
+    {
+        if (args.Key == "Enter" || args.Key == "NumpadEnter")
+        {
+            await Grid.ShowColumnResizeAsync(this);
+            _isMenuOpen = false;
+        }
+    }
+
+    private async Task HandleOptionsMenuKeyDownAsync(KeyboardEventArgs args)
+    {
+        if (args.Key == "Enter" || args.Key == "NumpadEnter")
+        {
+            await Grid.ShowColumnOptionsAsync(this);
+            _isMenuOpen = false;
+        }
+    }
+
+    private string GetSortOptionText()
+    {
+        if (Grid.SortByAscending.HasValue && ShowSortIcon)
+        {
+            if (Grid.SortByAscending is true)
+            {
+                return Grid.ColumnSortLabels.SortMenuAscendingLabel;
+            }
+            else
+            {
+                return Grid.ColumnSortLabels.SortMenuDescendingLabel;
+            }
+        }
+
+        return Grid.ColumnSortLabels.SortMenu;
+    }
 }

src/Core/Components/DataGrid/Columns/ColumnOptionsLabels.cs

@@ -0,0 +1,19 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+public record ColumnOptionsLabels
+{
+    /// <summary>
+    /// Gets or sets the text shown in the column menu
+    /// </summary>
+    public string OptionsMenu { get; set; } = "Filter";
+
+    /// <summary>
+    /// Gets the default labels for the options UI.
+    /// </summary>
+    public static ColumnOptionsLabels Default => new();
+
+}
+

src/Core/Components/DataGrid/Columns/ColumnResizeLabels.cs

@@ -0,0 +1,48 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+public record ColumnResizeLabels
+{
+    /// <summary>
+    /// Gets or sets the text shown in the column menu 
+    /// </summary>
+    public string ResizeMenu { get; set; } = "Resize";
+
+    /// <summary>
+    /// Gets or sets the label in the discrete mode resize UI
+    /// </summary>
+    public string DiscreteLabel { get; set; } = "Column width";
+
+    /// <summary>
+    /// Gets or sets the label in the exact mode resize UI
+    /// </summary>
+    public string ExactLabel { get; set; } = "Column width (in pixels)";
+
+    /// <summary>
+    /// Gets or sets the aria label for the grow button in the discrete resize UI
+    /// </summary>
+    public string? GrowAriaLabel { get; set; } = "Grow column width";
+
+    /// <summary>
+    /// Gets or sets the aria label for the shrink button in the discrete resize UI
+    /// </summary>
+    public string? ShrinkAriaLabel { get; set; } = "Shrink column width";
+
+    /// <summary>
+    /// Gets or sets the aria label for the reset button in the resize UI
+    /// </summary>
+    public string? ResetAriaLabel { get; set; } = "Reset column widths";
+
+    /// <summary>
+    /// Gets or sets the aria label for the submit button in the resize UI
+    /// </summary>
+    public string? SubmitAriaLabel { get; set; } = "Set column widths";
+
+    /// <summary>
+    /// Gets the default labels for the resize UI.
+    /// </summary>
+    public static ColumnResizeLabels Default => new();
+}

src/Core/Components/DataGrid/Columns/ColumnSortLabels.cs

@@ -0,0 +1,29 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+public record ColumnSortLabels
+{
+    /// <summary>
+    /// Gets or sets the text shown in the column menu 
+    /// </summary>
+    public string SortMenu { get; set; } = "Sort";
+
+    /// <summary>
+    /// Gets or sets the text shown in the column menu when in ascending order
+    /// </summary>
+    public string SortMenuAscendingLabel { get; set; } = "Sort (ascending)";
+
+    /// <summary>
+    /// Gets or sets the text shown in the column menu when in descending order
+    /// </summary>
+    public string SortMenuDescendingLabel { get; set; } = "Sort (descending)";
+
+    /// <summary>
+    /// Gets the default labels for the sort UI.
+    /// </summary>
+    public static ColumnSortLabels Default => new();
+
+}
+