Skip to Content
avatar image
Former Member

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


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;
Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

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;
    Add comment
    10|10000 characters needed characters exceeded

    • 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)