feat: DataGrid: how to create "calculated column"

[JarJasAskom]

I have a FluentDataGrid with a column

<PropertyColumn Property="@(p => p.CreatedAtUtc)" Sortable="true" 
       IsDefaultSortColumn="true" InitialSortDirection="SortDirection.Descending" />

CreatedAtUtc is of type DateTime. Sorting works correctly.

How to create a column that shows value

CreatedAtUtc.ToDateTimeLocal()

and still supports sorting, preferably by CreatedAtUtc.

[rpodevns]

Sorting by the CreatedAtUtc should be functionally similar to sorting by CreatedAtUtc.ToDateTimeLocal(). Here's a sample:

@using Microsoft.FluentUI.AspNetCore.Components
@using System.Collections.Generic

<FluentDataGrid Items="DataItems.AsQueryable()">

    <TemplateColumn SortBy="GridSort<MyItem>.ByAscending(item => item.CreatedAtUtc)" Title="Created At (Local)">
        @context.CreatedAtUtc.ToLocalTime()
    </TemplateColumn>

    <PropertyColumn Property="@(item => item.CreatedAtUtc)" Sortable="true"/>

    <PropertyColumn Property="@(item => item.Name)" Title="Name" Sortable="true" />
</FluentDataGrid>

@code {
    private List<MyItem> DataItems = new()
    {
        new MyItem { Name = "Fluent", CreatedAtUtc = DateTime.UtcNow.AddHours(-1) },
        new MyItem { Name = "Blazor", CreatedAtUtc = DateTime.UtcNow.AddHours(-3) }
    };

    public class MyItem
    {
        public string? Name { get; set; } = "";
        public DateTime CreatedAtUtc { get; set; }
    }
}