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 + + + + + + + @context.Title + + + + + + + + + Birth date + + + + + +@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 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. + + + + The DataGrid can display custom column header titles by setting the HeaderCellTitleTemplate property on columns + shown in the grid. +
+ See the 'Razor' tab on how these properties have been applied to the columns. + + diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index fac2fb8d67..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) @@ -22,7 +34,9 @@ @if (AnyColumnActionEnabled) { -
@Title
+
+ @HeaderTitleContent +
@if (Grid.SortByAscending.HasValue && IsActiveSortColumn) { @@ -44,7 +58,9 @@ else {
-
@Title
+
+ @HeaderTitleContent +
} @@ -122,7 +138,9 @@ { -
@Title
+
+ @HeaderTitleContent +
@if (Grid.SortByAscending.HasValue && IsActiveSortColumn) { @@ -146,7 +164,7 @@ {
- @Title + @HeaderTitleContent @if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType.HasValue) { diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs index 3bcaa0431e..4e5060c87a 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 [Parameter] public RenderFragment>? HeaderCellItemTemplate { get; set; } + /// + /// Gets or sets a template for the title content of this column's header cell. + /// If not specified, the default header template includes the . + /// + [Parameter] + public RenderFragment>? HeaderCellTitleTemplate { get; set; } + /// /// 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 /// protected internal RenderFragment HeaderContent { get; protected set; } + /// + /// Gets or sets a 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 within that new output if they want to continue + /// respecting that option. + /// + protected internal RenderFragment HeaderTitleContent { get; protected set; } + /// /// Gets a value indicating whether this column should act as sortable if no value was set for the /// 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()