DEV Community

KIranuknow
KIranuknow

Posted on • Edited on

3

SAPUI5 - Table Cell Coloring

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());
                            }
                        });
                    });
Enter fullscreen mode Exit fullscreen mode

Formatter:

var oNewColumn = new Column({
                label: new Label({ text: "Weight" }),
                template: new Text({
                    text: {
                        path: "Weight",
                        formatter: this.formatColor
                    }
                })
            });

            oTable.addColumn(oNewColumn);
Enter fullscreen mode Exit fullscreen mode
//Formatter function
formatColor: function(sWeight) {
if (sWeight > 100) {
    this.addStyleClass("red");
} else {
    this.addStyleClass("green");
}

});
Enter fullscreen mode Exit fullscreen mode

3rd Method

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay