How To Change The Color Of Row In Table (SAPUI5)?

I have a table in which data is coming from back end. Based on particular condition(data coming from back end (gateway service)), if that condition is true then that particular row

Solution 1:

Semantic colors for rows are now supported which can be leveraged by using the property highlight

• on ColumnListItem when using sap.m.Table (since 1.44):

  <Table xmlns="sap.m">
    <ColumnListItem highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
    <!-- ... -->
  </Table>
  

• on RowSettings when using sap.ui.table.Table (since 1.48):

  <table:Table>
    <table:rowSettingsTemplate>
      <table:RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
    </table:rowSettingsTemplate>
    <!-- ... -->
  </table:Table>
  

  

---

Samples

• Demo Kit sample (sap.ui.table.Table)
• JSBin sample with indication colors (sap.m.Table and sap.ui.table.Table)

Solution 2:

I think there are few different ways to change the colour, the easiest would be to change the style of the associate control

<control>.addStyleClass(myClass);
<control>.toggleStyleClass(myClass, true);

in the following example JsBin - alert overdue rows i use the following on a table row

row.$().addClass("overdue");

it adds the css style "overdue" to the domRef of the row

Solution 3:

I assume you've got regular HTML table, then:

$("table tr").each(function(){
    if( condition ){ //your condition eg. $(this).children("td:eq(1)").val() == sth
        $(this).css("background":COLOR);
    }
});

Solution 4:

@Ashish its very difficult using only sapui5. you need to use jquery in that case. If that condition is true get the row's index and have a selector of that and then use like

$('.myTable tr:nth-child('+rowindex+')').css("background-color","red")

Try this. not sure

Solution 5:

In UI5, I'm not sure if you can do this for a row at once, but you can certainly do this for a single cell using the valueState property:

var oConditionalColumn = new sap.ui.table.Column({
    label: new sap.ui.commons.Label({
        text: "Some label"
    }),
    template: (new sap.ui.commons.TextField({
        value     : "{myfield}",
        valueState : {
            parts : [myfield],
            formatter : function(oValue) {
                return (oValue === undefined || oValue == null || oValue == "" || isNaN(oValue) || parseInt(oValue) == 0) ? sap.ui.core.ValueState.Error : sap.ui.core.ValueState.None;
            }
        },
    }))
});

Or, when you load the model, set an extra calculated property in advance based on your condition, and use that property to render each cell in your row in a different color for the current row context with a mior modification of the above code.