Skip to Content

Changing color of table cells

We have created a SAPUI5 application using the SAPUI5 "table" control and with a gateway service for oData and I'd like to change the background color of the cells based on the data. If D1 red if D2 blue if D3 yellow.

So far I can do this only based on a menu event, click on a menu button to change the color. I've tried parsing the DOM with

document.getElementsByTagName(SPAN'), and looping thru the DOM and changing the background color but the data is not there until the bindrows has completed. I've tried window.onload and still the data is not there. Is there an event after when oTable.bindrows() gets the data?

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

3 Answers

  • Best Answer
    May 18, 2013 at 08:30 AM

    Hi Jesse,

    You could try using the formatter function of the bindProperty method, this is called for each row in your table, for example...

    var oControl = new sap.ui.commons.TextView().bindProperty("text", "bindpath",function(cellValue){          switch(cellValue){                    case 'D1':                              backgroundColor = 'red';                              break;                    case 'D2':                              backgroundColor = 'blue';                              break;                     case 'D3':                              backgroundColor = 'yellow';                              break;                    default:                              backgroundColor = 'white';          }          cellId = this.getId();           $("#"+cellId).parent().parent().css("background-color",backgroundColor);          return cellValue;});var oColumn = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Columnhead1"}), template: oControl});oTable.addColumn(oColumn);

    Hope this helps.



    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      Hi Agu,

      I checked your code but wasn't able to get it working as expected using the "CustomData"-approach.

      In my own app I'm using the formatter function of the column binding, and this works OK for me.

      Here's the code of one of the columns of my table:

      //Define the columns and the control templates to be used
      var oColumn = new sap.ui.table.Column({
          label: new sap.ui.commons.Label({text: "Last Name"}),
          template: new sap.ui.commons.TextView().bindProperty("text", "lastName", function(cellVal) {
              if (cellVal === 'Barr' ||cellVal === 'Dente' || cellVal === 'Dewit') {
              return cellVal;
          sortProperty: "lastName",
          filterProperty: "lastName",
          width: "200px"

      I don't know if you are using the customData for other reasons, but if you can I would try to pass them...

      For your second question:

      It seems there's no easy to color the whole row, since the row-element lacks the function "addCustomStyle".

      Maybe you could extend the class sap.ui.table.Row and add the addCustomStyle-method. In this case I think you have to write a custom renderer function, but I'm not an expert with that.

      Maybe it's an good idea to open a seperate topic for this one!



  • avatar image
    Former Member
    Jun 06, 2013 at 08:24 AM

    Hi there,

    I just tried to color a cell using this way, but unfortunately it doesn't work for me.

    When the table data is loaded, none of the cells is colored.

    When using the scrollbar of the table and move it up and down, the first 2 or 3 cells get the background color.

    It seems that at the point of time when jquey tries to access the element, its not sure that it does exist in the DOM.

    Maybe somebody got a solution for that?


    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Ian MacGregor

      Hey Ian,

      thanks a lot for your effort checking out this problem!

      I've just tried it and it works so far - one little problem still exists: if the table has a scrollbar, the coloring of the cells is only visible after scrolling up/down...

      Have a nice weekend,



  • avatar image
    Former Member
    Jul 10, 2014 at 03:40 PM

    Hi Ian,

    That code works fine for me, perfectly actually but, if I navigate away from my the worksetitem page with the table to another worksetitem page in my shell I lose the colours when I come back to the page with the table.

    Does this only work when the model has changed? So i.e. when the model is initially filled with new data and updated but if you have switch between the pages in a shell it loses the css for the cell?


    Add comment
    10|10000 characters needed characters exceeded