Showing results for 
Search instead for 
Did you mean: 

How to color the columns of sap.ui.table.Table ?

Former Member
0 Kudos


I am developing a UI5 application , I need to color the columns of the table based on the condition .

Here I need to color the columns based on the Editable value.



Code :

var oPriceProcedureTable = null;
oPriceProcedureTable = new sap.ui.table.Table({
       id: "table-quotation",
       selectionMode: sap.ui.table.SelectionMode.Single,
	visibleRowCount: 8
oView.getModel().read(serviceURL, {
	success: function(oData) {
	    var rowData = oData.results;
            var Staic_Feilds = [{
		"Fieldname": "Kschl",
		"Edit": false,
		"ScrtextS": "Condition Type"
	    }, {
	        "Fieldname": "Kbetr",
		"Edit": true,
		"ScrtextS": "Unit Price"
	    }, {
		"Fieldname": "Kpein",
		"Edit": false,
		"ScrtextS": "Per"
	    }, {
		"Fieldname": "Kmein",
		"Edit": false,
		"ScrtextS": "Price Unit"
	    }, {
		"Fieldname": "Kwert",
		"Edit": false,
		"ScrtextS": "Total"

	    var Column_name = Staic_Feilds;
            var oModel = new sap.ui.model.json.JSONModel();
			    columns: Column_name,
			    rows: rowData
            that.oPriceProcedureTable.bindColumns("/columns", function(sId, oContext) {
                  var columnName = oContext.getObject().Fieldname;
		  var Editable = oContext.getObject().Edit;
		  var ScrtextS = oContext.getObject().ScrtextS;
                  return new sap.ui.table.Column({
			label: ScrtextS,
			template: new sap.ui.commons.TextField({
			   value: {
				path: columnName
			   editable: Editable,
			   formatter: function(Editable) {
 			        if (Editable === "true") {
				} else {
			        return Editable;

Accepted Solutions (0)

Answers (1)

Answers (1)

Former Member
0 Kudos

Do you have a corresponding CSS that tells the DOM to change the background color to the required color.

.yellow {       background-color: yellow;}

.cyan {
       background-color: cyan;
Former Member
0 Kudos

Yes . I have the css code for this.

Former Member
0 Kudos

So, to start debugging,

  1. Could you please check if your classes ("yellow" & "cyan") are added to rendered HTML at the right position. (Right click on the table cell where you want to see a background color & do an inspect element. You should see the classes you are trying to add displayed in the control attributes)
  2. Check also if your css classes are hooked correctly with the css code