Apply CSS on a table cell based on the content in SAPUI5

You are having one of the most common requirements in the case of the table. You can achieve the end result using formatter function exposed on the cells of a table. This approach allows you to conditionally apply CSS styles based on the content value of each cell.

Implementation Example

Here is a complete code snippet for your reference which you can alter as per your use case ?

cells: [
   new sap.m.Text({
      text: {
         path: "/name",
         formatter: function(name) {
            if (name == "<your value>") {
               // you can add style class or do your own logic here
               this.addStyleClass("Total");
            } else {
               this.removeStyleClass("Total");
            }
            return name;
         }
      }
   })
]

Enhanced Example with Multiple Conditions

For more complex scenarios, you can handle multiple conditions and apply different styles ?

cells: [
   new sap.m.Text({
      text: {
         path: "/status",
         formatter: function(status) {
            // Remove any existing style classes
            this.removeStyleClass("statusSuccess statusError statusWarning");
            
            // Apply style based on content
            switch(status) {
               case "Active":
                  this.addStyleClass("statusSuccess");
                  break;
               case "Inactive":
                  this.addStyleClass("statusError");
                  break;
               case "Pending":
                  this.addStyleClass("statusWarning");
                  break;
            }
            return status;
         }
      }
   })
]

CSS Style Classes

Define the corresponding CSS classes in your application ?

.Total {
   font-weight: bold;
   background-color: #f0f0f0;
}

.statusSuccess {
   color: green;
   font-weight: bold;
}

.statusError {
   color: red;
   font-weight: bold;
}

.statusWarning {
   color: orange;
   font-weight: bold;
}

Conclusion

Using formatter functions with addStyleClass() method provides a flexible way to apply conditional CSS styling to table cells based on their content values in SAPUI5 applications.