From 95c160baea9fe1a2fb1e0de519f47baa668340e4 Mon Sep 17 00:00:00 2001
From: Phillip Hoff <phillip@orst.edu>
Date: Fri, 30 May 2025 16:09:23 -0700
Subject: [PATCH 1/3] Sketch implementation of FluentDataGrid
 HeaderCellTitleTemplate.

---
 .../Examples/DataGridCustomHeader.razor       | 52 +++++++++++++++++++
 .../DataGridColumnHeaderGenerationPage.razor  |  9 ++++
 .../DataGrid/Columns/ColumnBase.razor         | 33 ++++++++++--
 .../DataGrid/Columns/ColumnBase.razor.cs      |  7 +++
 4 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomHeader.razor

diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomHeader.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomHeader.razor
new file mode 100644
index 0000000000..6dd4e5cce1
--- /dev/null
+++ b/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();
+}
\ No newline at end of file
diff --git a/examples/Demo/Shared/Pages/DataGrid/Pages/DataGridColumnHeaderGenerationPage.razor b/examples/Demo/Shared/Pages/DataGrid/Pages/DataGridColumnHeaderGenerationPage.razor
index 8846b0ee25..845a61f54d 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Pages/DataGridColumnHeaderGenerationPage.razor
+++ b/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>
diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor
index fac2fb8d67..f77e151c8d 100644
--- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor
+++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor
@@ -22,7 +22,16 @@
                 @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">
+                            @if (HeaderCellTitleTemplate is not null)
+                            {
+                                @HeaderCellTitleTemplate(this)
+                            }
+                            else
+                            {
+                                @Title
+                            }
+                        </div>
 
                         @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
                         {
@@ -44,7 +53,16 @@
                 else
                 {
                     <div class="col-title">
-                        <div class="col-title-text" title="@tooltip">@Title</div>
+                        <div class="col-title-text" title="@tooltip">
+                            @if (HeaderCellTitleTemplate is not null)
+                            {
+                                @HeaderCellTitleTemplate(this)
+                            }
+                            else
+                            {
+                                @Title
+                            }
+                        </div>
                     </div>
                 }
                 <FluentMenu Anchor="@_columnId" @bind-Open="@_isMenuOpen" HorizontalViewportLock="false" HorizontalPosition="HorizontalPosition.End">
@@ -122,7 +140,16 @@
                 {
                     <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">
+                                @if (HeaderCellTitleTemplate is not null)
+                                {
+                                    @HeaderCellTitleTemplate(this)
+                                }
+                                else
+                                {
+                                    @Title
+                                }
+                            </div>
 
                             @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
                             {
diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
index 3bcaa0431e..4f634c117e 100644
--- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
+++ b/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.

From 585666a0311a24b36dd3eb0b59ccdf31d6bbd51e Mon Sep 17 00:00:00 2001
From: Phillip Hoff <phillip@orst.edu>
Date: Mon, 2 Jun 2025 15:34:31 -0700
Subject: [PATCH 2/3] Consolidate header title rendering.

---
 .../DataGrid/Columns/ColumnBase.razor         | 41 ++++++++-----------
 .../DataGrid/Columns/ColumnBase.razor.cs      |  3 ++
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor
index f77e151c8d..9e3d813df5 100644
--- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor
+++ b/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)
@@ -23,14 +35,7 @@
                 {
                     <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">
-                            @if (HeaderCellTitleTemplate is not null)
-                            {
-                                @HeaderCellTitleTemplate(this)
-                            }
-                            else
-                            {
-                                @Title
-                            }
+                            @HeaderTitleContent
                         </div>
 
                         @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
@@ -54,14 +59,7 @@
                 {
                     <div class="col-title">
                         <div class="col-title-text" title="@tooltip">
-                            @if (HeaderCellTitleTemplate is not null)
-                            {
-                                @HeaderCellTitleTemplate(this)
-                            }
-                            else
-                            {
-                                @Title
-                            }
+                            @HeaderTitleContent
                         </div>
                     </div>
                 }
@@ -141,14 +139,7 @@
                     <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">
-                                @if (HeaderCellTitleTemplate is not null)
-                                {
-                                    @HeaderCellTitleTemplate(this)
-                                }
-                                else
-                                {
-                                    @Title
-                                }
+                                @HeaderTitleContent
                             </div>
 
                             @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
@@ -173,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;">
diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
index 4f634c117e..f6c151c5e0 100644
--- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
+++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
@@ -228,6 +228,8 @@ protected internal virtual Task OnCellKeyDownAsync(FluentDataGridCell<TGridItem>
     /// </summary>
     protected internal RenderFragment HeaderContent { get; protected set; }
 
+    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
@@ -254,6 +256,7 @@ protected void HandleKeyDown(FluentKeyCodeEventArgs e)
     public ColumnBase()
     {
         HeaderContent = RenderDefaultHeaderContent;
+        HeaderTitleContent = RenderDefaultHeaderTitle;
     }
 
     private async Task HandleColumnHeaderClickedAsync()

From 4acc061f139e6fd42721b886134b9e0a3201b604 Mon Sep 17 00:00:00 2001
From: Phillip Hoff <phillip@orst.edu>
Date: Mon, 2 Jun 2025 15:36:32 -0700
Subject: [PATCH 3/3] Updated docs.

---
 src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
index f6c151c5e0..4e5060c87a 100644
--- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
+++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
@@ -228,6 +228,12 @@ 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>