How to bind string properties from object in repeat.for

Question

I have a list of arrays in a table displayed using repeat.for. I need to display tr row in blue color when "receiving.supplier === Scrap Separated" and blue color row when the result is "receiving.supplier === Scrap Sorted". Is there any way I can do it with if.bind but for String that I got in network tab. Here is my network and code.

Answer 1

I think this is purely a CSS question. You can have CSS rules based on [data-supplier] and assign a different background color based on the value of the supplier property.

The example CSS rules can be as follows.

tr[data-supplier="Scrap Separated"] {
    background-color: blue;
}

tr[data-supplier="Scrap Sorted"] {
    background-color: green;
}

And then bind the data-supplier property in the markup.

<tr data-supplier="${recieving.supplier}">
...
</tr>

Note that you cannot possibly nest div directly under tbody as that will be evicted by browser being non-conformed element as per the expected schema.