We can color the table cells in SAPUI5's sap.ui.table using css.
There are two ways, one is to use customData in the template and formatter.
//using Javascript code for dynamically adding columns with css coloring.
var oTable = new Table("idMyTable", {
columns: [
new Column({
label: new Label({ text: "City" }),
template: new Text({
text: "{model>city}",
customData: [
new sap.ui.core.CustomData({
key: "color",
value: "{model>color}"
})
]
}).addStyleClass("customText")
})
]
});
//call the below function from the above column addition
oTable.getRows().forEach(function(oRow) {
oRow.getCells().forEach(function(oCell) {
var sColor = oCell.data("color");
if (sColor) {
oCell.addStyleClass("customTextColor-" + sColor.toLowerCase());
}
});
});
Formatter:
var oNewColumn = new Column({
label: new Label({ text: "Weight" }),
template: new Text({
text: {
path: "Weight",
formatter: this.formatColor
}
})
});
oTable.addColumn(oNewColumn);
//Formatter function
formatColor: function(sWeight) {
if (sWeight > 100) {
this.addStyleClass("red");
} else {
this.addStyleClass("green");
}
});
Top comments (0)