Skip to Content

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

Feb 20, 2017 at 07:11 AM


avatar image
Former Member


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;
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

avatar image
Former Member Feb 20, 2017 at 07:41 AM

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;
Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Yes . I have the css code for this.

Former Member
Former Member

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
background.png (590.4 kB)
background.png (590.4 kB)