Coloring cells of a controller generated sap.m.table in UI5

[Francesco]

Hello experts,

As the title implies I need to color the cells of a controller generated sap.m.table.

First I make a GET to a service which returns me results in this here format:

I then proceed to cycle the keys of the response to create my column headers.

In total I now have 4 columns which contain the keys of the response as the Label for each column.

Then I create my cells and columnListItems in which I push the cell items.

How would I go about coloring, let's say the cells of the third column?

Thanks in advance for any help!

Here follows my code:

onReadForRecordsAndBuildTable: function(finalParams){
			var oController = this; 
			var oCell = [];
			var tableRecordsModel = new JSONModel({});
			var oTable = this.getView().byId("overviewTable");
			oController.showBusy();
			
			$.when(oController.readUrlParameters(finalParams))
				.done(function(urlModel) {
					tableRecordsModel.setData(urlModel.getData());
					oController.getView().setModel(tableRecordsModel, "tableRecordsModel");
					var tableData = oController.getView().getModel("tableRecordsModel").getData();
					var aColumns = Object.keys(tableData[0]); 
			
					aColumns.forEach((ele) => {
							var oColumn = new sap.m.Column("col" + ele, {
		            		width: "1em",
		            		header: new sap.m.Label({
		            		text: ele
		            		})
		            	});
		            	oTable.addColumn(oColumn);
							});
							
					tableData.forEach((ele) => {
						
						var aCell= [];
						
							for (var property in ele) {
							var textToInject = (`${ele[property]}`);
							var cell1 = new sap.m.Text({
		                                text: textToInject
		                                });
		        			aCell.push(cell1);
					}
						
						var aColList = new sap.m.ColumnListItem({
		        		cells: aCell
		    		});
					
						oTable.addItem(aColList);
						
					});
					
					oController.hideBusy();
					
				}).fail(function() {
					oController.hideBusy();
				});
		},

[ThorstenHoefer · Accepted solution]

Hi,

you can bind the items with a template. The template can contains ObjectStatus with a defined color.

https://stackoverflow.com/questions/32351337/data-binding-in-sap-m-table

Object Status - Samples - Demo Kit - SAPUI5 SDK (ondemand.com)

Regards
Thorsten