feat: add `HeaderCellTitleTemplate` to `FluentDataGrid` columns

[philliphoff]

🙋 Feature Request

Customizing a the header cell for a data grid column can be done today via the HeaderCellItemTemplate. However, this is an "all or nothing" option; when used, you are then responsible for any associated sort/filter/resize UX and handling that's currently built-into the base column component.

In cases where there's a need to customize just the title text, e.g. add an icon, badge, or highlight a column in some other way but not customize the existing sort/filter/resize UX, using HeaderCellItemTemplate is a rather onerous. It might be good to have a more targeted ability to override only display of the title, say via a HeaderCellTitleTemplate property a column.

🤔 Expected Behavior

To prefix the header title with an icon, for example, we might do something like:

  <PropertyColumn Title="My Header">
    <HeaderCellTitleTemplate>
      <FluentStack>
        <FluentIcon Icon="..." />
        <FluentLabel>@context.Title</FluentLabel>
      </FluentStack>
    </HeaderCellTitleTemplate>
  </PropertyColumn>

😯 Current Behavior

The current APIs require setting HeaderCellItemTemplate, which means owning the entirety of the header UX.

💁 Possible Solution

Add a HeaderCellTitleTemplate property to ColumnBase that, when set, is used to emit the header title content. If not set, the current ColumnBase.Title text would be emitted as is done today.

A start to a PR branch is here: https://github.com/philliphoff/fluentui-blazor/tree/philliphoff-title-template

🔦 Context

We have received feedback from customers that the sort/filter/resize UX in the data grids is not discoverable. Once found and used, then there's sufficient UX to indicate that filtering/sorting is active. However, there's no current way for customers to see whether/which columns allow filtering. (They have to actually mouse to and click the header to get the drop-down that exposes the filtering/resizing options. While this is fairly standard UX for sorting, I'm not sure it is for filtering/resize.)

💻 Examples