Highlighting a select MudTable row

To highlight a row in a MudTable when clicking that row, define an “OnRowClick” event to select the row, and a “RowStyleFunc” to do the row formatting, and assign those methods to the table:

    <MudTable T="Coaster" Items="coasters" OnRowClick="RowClicked" RowStyleFunc="RowStyleFunc">
        <HeaderContent>
            <MudTh>Park</MudTh>
            <MudTh>Coaster</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd>@context.Park</MudTd>
            <MudTd>@context.Coaster</MudTd></MudTd>
        </RowTemplate>
    </MudTable>

In the RowClicked method, I set a variable of the type of class to which the table is bound to value of the selected row.

The RowStyleFunc function runs for every row in the table and will evaluate if the selected row matches the current row and change the background color based on that result:

code {
    Coaster selectedCoaster = null;

    public void RowClicked(TableRowClickEventArgs<Coaster> c)
    {
        selectedCoaster = c.Item;
    }

    private string RowStyleFunc(SubcontractPhase arg1, int index)
    {
        if (selectedCoaster != null && arg1.Coaster == selectedSP.Coaster)
        {
            return "background-color:#AD744C75";
        }
        else
        {
            return "background-color:white";
        }
    }
}

, ,

  1. Leave a comment

Leave a comment