Change MudBlazor table background color by row item condition

Question

I am trying to change the color of a row in a mudblazor table. The problem is, I can't add a functionality to change the color by the condition of the element of the row.

 <MudTable Items="@context.orderPositions" Context="AddressContext" Hover="true" Breakpoint="Breakpoint.Sm" Elevation="0" Style="background-color: @(AddressContext.OrderPositionStatus == PositionStatus.rdy ? yellowgreen : blue;">

Harshman

Answer 1

I have a solution but it feels kinda dirty...

<RowTemplate>
    <MudTd DataLabel="Menge" Style="@(AddressContext.OrderPositionStatus == PositionStatus.rdy ? $"background:{Colors.BlueGrey.Darken4};" : $"background:{Colors.Cyan.Darken1};")">@AddressContext.orderItem.ItemQuantity</MudTd>
    <MudTd DataLabel="Itemcode" Style="@(AddressContext.OrderPositionStatus == PositionStatus.rdy ? $"background:{Colors.BlueGrey.Darken4};" : $"background:{Colors.Cyan.Darken1};")">@AddressContext.orderItem.ItemCode</MudTd>
    <MudTd DataLabel="Itemname" Style="@(AddressContext.OrderPositionStatus == PositionStatus.rdy ? $"background:{Colors.BlueGrey.Darken4};" : $"background:{Colors.Cyan.Darken1};")">@AddressContext.orderItem.ItemName</MudTd>
</RowTemplate>

As shown, it is possible to change the color within the row template. So the context is available. Its annoying work for each row/colum- combination but in the end it works.

Harshman

Answer 2

You can:

<MudTable Items="@Items" Hover="true" RowStyleFunc="RowStyleFunc">

And then

private string RowStyleFunc(Item arg1, int index)
{
    switch (arg1.Title)
    {
        case string a when a.Contains("1/4"):
            return "background-color:blue";
        case string b when b.Contains("2/4"):
            return "background-color:red";          
        default: return "background-color:white";

    }
}

Mcnally

Answer 3

I wanted to be able to hide row items marked for deletion by default and then show them in red when when a toggle switch was enabled. So on my component I appended a switch:

<MudSwitch @bind-Checked="@blnShowDeleted" Color="Color.Warning">Show deleted</MudSwitch>

@Nadav Hury's answer told me about RowStyleFunc which led me to the MudBlazor documentation and RowClassFunc which I thought might be a better bet. So I changed the code for the table declaration:

<MudTable Items="objVmCustomers" RowClassFunc="ShowDeleted">

I created a ShowDeleted method in the code-behind razor.cs class:

public string ShowDeleted(VmCustomer objVmCustomer, int index)
        {
        if(objVmCustomer.dtDeleted != null)
            {
            if (blnShowDeleted == true)
                {
                return "show-deleted";
                }

            return "hide-deleted";
            }

        return "";
        }

Then I created two CSS classes to suit the code above:

.show-deleted td { --mud-palette-text-primary: red; }
.hide-deleted { display: none; visibility: collapse; }

There is a gotcha here: you can't just go color:red; in the show-deleted declaration because the CSS variable --mud-palette-text-primary will override it. You have to override the CSS variable (I discovered this by inspecting the element).

By using a CSS class that operates on all the TD elements within a row, this gets over the 'dirtiness' that @T0bi complains of when using multiple style attributes.

Jeramey

Where exactly would you include the two classes for the the CSS? app.css? – Maier

I was doing this as a little experiment so I tacked it onto the end of the site.css file. If it was going into a component, it might be better off in a code-behind css file. – Jeramey

Answer 4

It's not a complete answer, but in your code, style in <MudTable> will change all background color. You need to determine RenderFragment's color like, <MudTd Style="background-color:yellow;</MudTd>"

https://try.mudblazor.com/snippet/cYcFEMkdVtcQQNnQ

Rink

This answer, including the link, doesn't demonstrate how to do what you're suggesting. The link only loads a basic example of using the MudTable component, which doesn't address the OP's question or your suggested direction of inquiry. Further, the link may not even be "shelf-stable", so not advised or very useful to use. – Lyssa