How to set to row Background color for the ant design blazor table

Question

I'm using my project for ant design blazor table, anyone know how to adding background color for ant design blazor table row ,

code here

@using System.ComponentModel
@using AntDesign.TableModels

<Table TItem="Data" DataSource="@data" OnRowClick="OnRowClick">
    <Column @bind-Field="@context.Name">
        <a>@context.Name</a>
    </Column>
    <Column @bind-Field="@context.Age"></Column>
    <Column @bind-Field="@context.Address">
        <TitleTemplate>
            <span> <Icon Type="environment" /> Address </span>
        </TitleTemplate>
    </Column>
    <Column @bind-Field="@context.Tags">
        @foreach (var tag in context.Tags)
        {
            var color = tag.Length > 5 ? "geekblue" : "green";
            if (tag == "loser")
            {
                color = "volcano";
            }
            <Tag Color="@color">@tag</Tag>
        }
    </Column>
    <ActionColumn Title="Action">
        <Space Size=@("middle")>
            <SpaceItem>
                <a>Invite @context.Name</a>
            </SpaceItem>
            <SpaceItem>
                <a>Delete</a>
            </SpaceItem>
        </Space>
    </ActionColumn>
</Table>

@code{
    Data[] data = new Data[]
    {
        new()
        {
            Key = "1",
            Name = "John Brown",
            Age = 32,
            Address = "New York No. 1 Lake Park",
            Tags = new[] {"nice", "developer"}
        },
        new()
        {
            Key = "2",
            Name = "Jim Green",
            Age = 42,
            Address = "London No. 1 Lake Park",
            Tags = new[] { "loser"}
        },
        new()
        {
            Key = "3",
            Name = "Joe Black",
            Age = 32,
            Address = "Sidney No. 1 Lake Park",
            Tags = new[] { "cool", "teacher" }
        }
    };

    public class Data
    {
        [DisplayName("Key")]
        public string Key { get; set; }

        [DisplayName("Name")]
        public string Name { get; set; }

        [DisplayName("Age")]
        public int Age { get; set; }

        [DisplayName("Address")]
        public string Address { get; set; }

        [DisplayName("Tags")]
        public string[] Tags { get; set; }
    }

    void OnRowClick(RowData<Data> row)
    {
        Console.WriteLine($"row {row.Data.Key} was clicked.");
    }
}

Answer 1

The simplest way which I can think of is adding a RowClassName prop in the Antd blazor Table component, and then add the styles for each row of the table.

You can add a className in rows of table in two ways.

1. Inline classname

<Table RowClassName="@(_=>"classname-for-row"> </Table>

<style> 
  .classname-for-row {
     background-color: blue;
  } 
</style>
// -----------------------------------------------------------

2. When you want to add classname for different rows based on some condition

<Table RowClassName="@(row => row.Data.RowClass"> </Table>
@code {
   public class Data
    {
       [DisplayName("Score")]
        public int Score { get; set; }

        public string RowClass => Score < 70 ? "danger" : "success";
    }
}
<style> 
  .danger {
    background-color: red;
  }

  .success {
    background-color: green:
  }
</style>
//-------------------------------------------------

Remember above showcases/examples is contrived.

Following is the complete example to add background colors for each row in the Antd blazor Table.

@using System.ComponentModel
@using AntDesign.TableModels

<Table TItem="Data" DataSource="@data" RowClassName="@(_=>"row-background")">
    <Column @bind-Field="@context.Name">
        <a>@context.Name</a>
    </Column>
    <Column @bind-Field="@context.Score"></Column>
</Table>

<style>
    .row-background{
        background-color: #fff1f0;
    }
</style>

@code{
    Data[] data = new Data[]
    {
        new()
        {
            Key = "1",
            Name = "John Brown",
            Score = 95,
        },
        new()
        {
            Key = "2",
            Name = "Jim Green",
            Score = 87,
        }
        };

    public class Data
    {
        [DisplayName("Key")]
        public string Key { get; set; }

        [DisplayName("Name")]
        public string Name { get; set; }

        [DisplayName("Score")]
        public int Score { get; set; }
    }
}