DataGrid | Conditional Cell Styling

CellStyle takes the row item and returns a DataGridCellStyle for that one cell — red negatives, an amber overdue cell — or null to keep the themed default. Each member is independently optional.

@* Blazor — colours are CSS, so a theme token works as well as a hex *@
<PropertyColumn Property="x => x.Salary" DisplayAs="DataGridColumnFormat.Currency" Decimals="0"
                CellStyle="@(p => p.Salary < 100000
                    ? new DataGridCellStyle { TextColor = "var(--shiny-color-error)", Bold = true }
                    : null)" />

// MAUI — expose it from the view model and bind
public Func<object, DataGridCellStyle?> SalaryStyle
    => item => ((Person)item).Salary < 100000
        ? new DataGridCellStyle { TextColor = Colors.Firebrick, FontAttributes = FontAttributes.Bold }
        : null;

<shiny:DataGridColumn Title="Salary" PropertyName="Salary" DisplayAs="Currency" Decimals="0"
                      CellStyle="{Binding SalaryStyle}" />

It runs when a row binds, not when the item changes

CellStyle is evaluated as a row binds — which covers the virtualized list recycling a row onto a different item, but not a property changing on an item already on screen. Re-set the items source if a style has to follow live edits.

On MAUI TextFormatter, CellStyle and Culture are BindablePropertys so {Binding} from a view model works; the grid pushes its BindingContext down to its columns for exactly that reason (columns are BindableObjects, not elements, so they inherit nothing on their own). On Blazor, DataGridCellStyle.CssClass is not scoped to the grid’s isolated stylesheet — declare that class in your app’s CSS.

Next Steps

• Column Formatting — display presets, alignment, wrapping
• Column Widths — pixels, stars and percentages