Skip to Content

Dynamic cell color in sap.ui.table.Table using XML views

Dear UI5 Developers,

I was looking for a way to set the color of cell in a sap.ui.table.Table dynamically. First thing I did was searching for an example on SCN. Most of them were using javascript to create the table. For example:

Changing color of table cells | SCN

All of them are good examples but I’m using XML views with bindings to a JSON model. I was looking for a smoother and cleaner way to do this. This is my solution:

1) Create the JSON model

Add a property to control the color for every column to you JSON model. For example:

     First column “col1”           ==> Property to manipulate the color “col1Color”

     Second column “col2”      ==> Property to manipulate the color “col2Color”

I can give this property a different color for every row.

This is how my JSONModel looks like:

        var data =
          {col1:"red cell",col1Color:"red",col2:"orange cell",col2Color:"orange"},
            {col1:"no color cell",col1Color:"",col2:"green",col2Color:"green"}
        var json = new JSONModel(data);


2) XML View

Create your table using colums and templates. In every template you add your preferred control, in my example “sap.m.Text”. In this control I’ve added “CustomData” to add the color property. I give it a key and a value. The value is connected with my JSON model using bindings to the color property.

<Text text="{col1}">
                <core:CustomData key="colorClass" value="{ path:'col1Color'}" writeToDom="true" />

This code will generate a custom attribute into the HTML SPAN element.

span data colorclass.png

Full code of my XML view:

<t:Table id="table" visibleRowCount="17" rows="{/data}" >
  <t:Column id="col1"  >
  <Label text="Col1"/>
     <Text text="{col1}">
   <core:CustomData key="colorClass" value="{ path:'col1Color'}" writeToDom="true" />
  <t:Column id="col2"  >
  <Label text="Col2"/>
     <Text text="{col2}">
   <core:CustomData key="colorClass" value="{ path:'col2Color'}" writeToDom="true" />

3) CSS Style

This custom attribute in the span element can be used to access the span element from CSS.

For example:

span[data-colorclass="red"] {
background-color:#F00000 !important;

The result and full example of my code at Plunker:


Now you have another option for dynamic cell colors in sap.ui.table.Table 🙂

Kind regards,


You must be Logged on to comment or reply to a post.
  • Interesting idea, thank you!


    It worked for me. It’s good to have a possibility to change the color of the cell’s background.

    @Wouter Lemaire, how to add a custom attribute to the “TR” HTML element?


    • It's not possible to choose the dom elements to add the custom data. This depends on the control that you're using. But you can use css tricks to find and change children dom elements. For the TR tag, you could try adding it to the column control.



          • True. Now with the input the DOM element that's rendered is an DIV, so the css changes ... and work! 🙂


            Do you know why this error in console " CustomData with key mydata should be written to HTML of Element sap.m.Input#application-Test-url-component---object--__clone116 but the value is not a string. " ??

            I have a String in value CustomData in the model: <core:CustomData key="mydata" value="{val}" writeToDom="true"></core:CustomData>

            It works well but appears this error.


            Thanks Wouter Lemaire


          • I think this is due to the binding. In the initial load, before "{val}" is filled, it's not a string. As soon as the binding fills the value, it solves. I have them as well... Not sure how to get rid of it..

  • I got an error: CustomData with key mydata should be written to HTML of Element sap.m.Text#__text5-__clone3 but the value is not a string. -

    I am sure that I bind string to the "value"

    Is there any idea how to solve it?