How to set table row class value dynamically in openui5 / sapui5? - sapui5

Question

There is a openui5 offical example about table.
Is there anyway to set class attribute dynamically for table row in the Table.view.xml.
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{Name}"
text="{ProductId}"/>
<Text
text="{SupplierName}" />
<Text
text="{Width} x {Depth} x {Height} {DimUnit}" />
<ObjectNumber
number="{WeightMeasure}"
unit="{WeightUnit}"
state="{
path: 'WeightMeasure',
formatter: 'sap.m.sample.Table.Formatter.weightState'
}" />
<ObjectNumber
number="{
parts:[{path:'Price'},{path:'CurrencyCode'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {showMeasure: false}
}"
unit="{CurrencyCode}" />
</cells>
</ColumnListItem>
Eg.
row 1
<ColumnListItem class="bg-gray">
row 2
<ColumnListItem class="bg-blue">
row 3
<ColumnListItem class="bg-green">
The following code does not meet the requirements：
<ColumnListItem class="{rowStyle}">

Answer 1

Unfortunately, 'class' cannot be bound to a property. But there are easy alternatives.
It involves below steps.
Create a property (Using CustomData) in the DOM using binding.
<ColumnListItem type="Active">
<customData>
<core:CustomData key="background" value="{Country}" writeToDom="true" />
</customData>
<cells>
<ObjectIdentifier title="{CustomerID}"/>
<Text text="{CompanyName}"/>
<Text text="{Address}"/>
<Text text="{Country}"/>
</cells>
</ColumnListItem>
Use Attribute-Value CSS selectors to select the above
written DOM and apply color
tr[data-background="Mexico"] {
background-color: #eaa6a6 !Important;
}
I have written a blog here.
https://blogs.sap.com/2016/12/02/binding-based-dynamic-background-colors-for-sap.m.table-rows/
JS Bin

Answer 2

You can use formatter, function will be like this :
setColour : function(Condition){
if(Condition){
var cellId = this.getId();
$("#"+cellId).parent().parent().parent().css("background-color","Blue");
}
}
your column code will be like this :
<Input value="{path:'Condition',formatter:'formmater_path.setColour'}" />