[SOLVED] How to style individual cells of FluentDataGrid based on their value?

How to style individual cells of FluentDataGrid based on their value?

I have a Blazor Fluent-UI FluentDataGrid and I want to achieve a heatmap effect. Trying to avoid writing any JavaScript - is there any way I can apply styles to individual cells in order to achieve this?

As bare minimum example, this is the grid definition:

<FluentDataGrid Items="@Items?.AsQueryable()">
    <PropertyColumn Property="@(t => t.MyValue)" Format="F2" Title="Value"/>
</FluentDataGrid>

I would like to color individual cells based on the value of MyValue, since this number is already between 0 and 1. I was hoping I could achieve this with only css by using calc() to work out the heatmap colors, but how can I read MyValue for individual cells in the grid?

<PropertyColumn Class="heatmap" Style="--intensity: ????" Property="@(t => t.MyValue)" ...>

Any better approaches or help would be much appreciated, thanks.

Solution

You will need a TempateColumn. Roughly:

<TemplateColumn Context="item">
    <span style="background-color:rgb(@((int) (item.MyValue * 255)), 50, 50)">
        @item.Value.ToString("F2")
    </span>
</TemplateColumn>