[DataGrid] Add HeaderCellTitleTemplate to ColumnBase

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

@@ -0,0 +1,52 @@
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+@using Microsoft.FluentUI.AspNetCore.Components
+
+<FluentDataGrid Items="@people">
+    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" Title="Identity">
+        <HeaderCellTitleTemplate>
+            <FluentStack Orientation="Orientation.Horizontal"
+                         VerticalAlignment="VerticalAlignment.Center">
+                <FluentIcon Icon="Icons.Regular.Size20.Person" />
+                @context.Title
+            </FluentStack>
+        </HeaderCellTitleTemplate>
+    </PropertyColumn>
+    <PropertyColumn Property="@(p => p.Name)" Sortable="true" Title="Full _name" />
+    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true">
+        <HeaderCellTitleTemplate>
+            <FluentStack Orientation="Orientation.Horizontal"
+                         VerticalAlignment="VerticalAlignment.Center">
+                <FluentIcon Icon="Icons.Regular.Size20.Calendar" />
+                Birth date
+            </FluentStack>
+        </HeaderCellTitleTemplate>
+    </PropertyColumn>
+</FluentDataGrid>
+
+@code {
+    public class Person
+    {
+        public Person(int personId, string name, DateOnly birthDate)
+        {
+            PersonId = personId;
+            Name = name;
+            BirthDate = birthDate;
+        }
+
+        public int PersonId { get; set; }
+
+        public string Name { get; set; }
+
+        public DateOnly BirthDate { get; set; }
+    }
+
+    IQueryable<Person> people = new[]
+    {
+        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
+        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
+        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
+        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
+        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
+        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
+    }.AsQueryable();
+}

examples/Demo/Shared/Pages/DataGrid/Pages/DataGridColumnHeaderGenerationPage.razor

@@ -11,3 +11,12 @@
         See the 'Razor' tab on how these attributes have been applied to the class properties.
     </Description>
 </DemoSection>
+
+<DemoSection Title="Custom headers" Component="@typeof(DataGridCustomHeader)">
+    <Description>
+        The DataGrid can display custom column header titles by setting the <code>HeaderCellTitleTemplate</code> property on columns
+        shown in the grid.
+        <br />
+        See the 'Razor' tab on how these properties have been applied to the columns.
+    </Description>
+</DemoSection>

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

@@ -7,6 +7,18 @@
 }
 @code
 {
+    private void RenderDefaultHeaderTitle(RenderTreeBuilder __builder)
+    {
+        @if (HeaderCellTitleTemplate is not null)
+        {
+            @HeaderCellTitleTemplate(this)
+        }
+        else
+        {
+            @Title
+        }
+    }
+
     private void RenderDefaultHeaderContent(RenderTreeBuilder __builder)
     {
         @if (HeaderCellItemTemplate is not null)
@@ -22,7 +34,9 @@
                 @if (AnyColumnActionEnabled)
                 {
                     <FluentButton Disabled="@(!AnyColumnActionEnabled)" Id="@_columnId" Appearance="Appearance.Stealth" Class="col-sort-button" Style="width: calc(100% - 10px);" @onclick="@HandleColumnHeaderClickedAsync" aria-label="@tooltip" title="@tooltip">
-                        <div class="col-title-text" title="@tooltip">@Title</div>
+                        <div class="col-title-text" title="@tooltip">
+                            @HeaderTitleContent
+                        </div>
 
                         @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
                         {
@@ -44,7 +58,9 @@
                 else
                 {
                     <div class="col-title">
-                        <div class="col-title-text" title="@tooltip">@Title</div>
+                        <div class="col-title-text" title="@tooltip">
+                            @HeaderTitleContent
+                        </div>
                     </div>
                 }
                 <FluentMenu Anchor="@_columnId" @bind-Open="@_isMenuOpen" HorizontalViewportLock="false" HorizontalPosition="HorizontalPosition.End">
@@ -122,7 +138,9 @@
                 {
                     <FluentKeyCode Only="new[] { KeyCode.Ctrl, KeyCode.Enter }" OnKeyDown="HandleKeyDown" class="keycapture" style="width: 100%;" StopPropagation="true" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">
                         <FluentButton Appearance="Appearance.Stealth" Class="col-sort-button" Style="@($"width: calc(100% - {wdelta});")" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip">
-                            <div class="col-title-text" title="@tooltip">@Title</div>
+                            <div class="col-title-text" title="@tooltip">
+                                @HeaderTitleContent
+                            </div>
 
                             @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
                             {
@@ -146,7 +164,7 @@
                 {
                     <div class="col-title" style="@($"width: calc(100% - {wdelta});")">
                         <div class="col-title-text" title="@tooltip">
-                            @Title
+                            @HeaderTitleContent
                             @if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType.HasValue)
                             {
                                 <span style="padding: 0 5px;">

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

@@ -83,6 +83,13 @@ public abstract partial class ColumnBase<TGridItem>
     [Parameter]
     public RenderFragment<ColumnBase<TGridItem>>? HeaderCellItemTemplate { get; set; }
 
+    /// <summary>
+    /// Gets or sets a template for the title content of this column's header cell.
+    /// If not specified, the default header template includes the <see cref="Title" />.
+    /// </summary>
+    [Parameter]
+    public RenderFragment<ColumnBase<TGridItem>>? HeaderCellTitleTemplate { get; set; }
+
     /// <summary>
     /// If specified, indicates that this column has this associated options UI. A button to display this
     /// UI will be included in the header cell by default.
@@ -221,6 +228,14 @@ protected internal virtual Task OnCellKeyDownAsync(FluentDataGridCell<TGridItem>
     /// </summary>
     protected internal RenderFragment HeaderContent { get; protected set; }
 
+    /// <summary>
+    /// Gets or sets a <see cref="RenderFragment" /> that will be rendered for this column's header title.
+    /// This allows derived components to change the header title output. However, derived components are then
+    /// responsible for using <see cref="HeaderCellTitleTemplate" /> within that new output if they want to continue
+    /// respecting that option.
+    /// </summary>
+    protected internal RenderFragment HeaderTitleContent { get; protected set; }
+
     /// <summary>
     /// Gets a value indicating whether this column should act as sortable if no value was set for the
     /// <see cref="ColumnBase{TGridItem}.Sortable" /> parameter. The default behavior is not to be
@@ -247,6 +262,7 @@ protected void HandleKeyDown(FluentKeyCodeEventArgs e)
     public ColumnBase()
     {
         HeaderContent = RenderDefaultHeaderContent;
+        HeaderTitleContent = RenderDefaultHeaderTitle;
     }
 
     private async Task HandleColumnHeaderClickedAsync()