Support conditional row background color in DataGrid

[FarjamFathollahi]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I'm using DataGrid in a Blazor project and I noticed that currently there's no built-in feature to customize the background color of a row based on the data content of that row.

For example, if I have a column like Status, I would like to color each row differently based on whether the status is "Completed", "Pending", or "Failed".

Describe the solution you'd like

A possible way to achieve this would be to have a RowClassSelector or RowStyleSelector parameter that allows us to inject a function like:

<BitDataGrid Items="@myData"
             RowClassSelector="GetRowClass">
</BitDataGrid>

@code {
    private string GetRowClass(MyModel item)
    {
        return item.Status switch
        {
            "Completed" => "bg-green-100",
            "Pending" => "bg-yellow-100",
            "Failed" => "bg-red-100",
            _ => string.Empty
        };
    }
}

This pattern is commonly supported in other data grid frameworks like MudBlazor, Syncfusion, or Telerik.

Currently, the only way to do this is to manually use JavaScript and query DOM elements after the grid is rendered, which is not ideal or reliable.

Please consider adding a feature to customize row styles or classes conditionally, based on the data in each row.

Thanks for your great work!

[msynk]

Thanks for contacting us. We're investigating this issue.
We'll let you know if it's possible to work on this issue.

[msynk]

The issue is accepted and planned. Resolving it will start ASAP.

[msynk]

Resolving this issue has started. It will be announced when this issue is resolved.