How to merge two column header cells in sapui5 table

[arijit_das]

Hi,

I have a table like below:

No I want to merge the two header cells with value "SALES" like below:

Any idea how to do this ?

Code for the current view:

sap.ui.jsview("views.salesTrendTable", {
          /** Specifies the Controller belonging to this View.
          * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
          * @memberOf views.salesTable
          */
          getControllerName : function() {
                    return null;  
          },
          /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
          * Since the Controller is given to this method, its event handlers can be attached right away.
          * @memberOf views.salesTable
          */
          createContent : function(oController) {
        	  var oLayout = new sap.ui.commons.layout.MatrixLayout({width:"100%"});
 
        	  var oModel = new sap.ui.model.json.JSONModel();
        	  oModel.loadData("services/SalesTrend.xsjs?mthkey=201604");      
 
        	  var oControl;
        	  this.oSHTable = new sap.ui.table.Table("soTable1",{
        		  visibleRowCount: 10,
        	  });
        	  //Table Column Definitions
        	  oControl = new sap.ui.commons.TextView().bindProperty("text","month_no");
        	  oControl.setTextAlign("End");
        	  this.oSHTable.addColumn(new sap.ui.table.Column({
        		  label:new sap.ui.commons.Label({text: "MONTH_NO"}),
        	  template: oControl, flexible: true,hAlign: sap.ui.commons.layout.HAlign.End }));
 
        	  oControl = new sap.ui.commons.TextView().bindProperty("text", "month_name");
        	  //oControl.setTextAlign("End");
        	  this.oSHTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "MONTH_NAME"}),
        	  template: oControl }));
   
        	  oControl = new sap.ui.commons.TextView().bindProperty("text","sales_ytd");
        	  oControl.setTextAlign("End");
        	  this.oSHTable.addColumn(new sap.ui.table.Column({
        		  multiLabels: [
        		    			new sap.ui.commons.Label({text: "SALES"}),
        		    			new sap.ui.commons.Label({text: "YTD"})
        		    		],
        		  //label:new sap.ui.commons.Label({text: "YTD SALES"}),
        	  template: oControl, hAlign: sap.ui.commons.layout.HAlign.End}));
   
        	  oControl = new sap.ui.commons.TextView().bindProperty("text","sales_lytd");
        	  oControl.setTextAlign("End");
        	  this.oSHTable.addColumn(new sap.ui.table.Column({
        		  multiLabels: [
        		    			new sap.ui.commons.Label({text: "SALES"}),
        		    			new sap.ui.commons.Label({text: "LY YTD"})
        		    		],
        		  //label:new sap.ui.commons.Label({text: "LYTD SALES"}),
        	  template: oControl, hAlign: sap.ui.commons.layout.HAlign.End}));
 
        	  this.oSHTable.setModel(oModel);
        	  this.oSHTable.bindRows("/");
 
        	  this.oSHTable.setTitle("Sales Trend");
        	  oLayout.createRow(this.oSHTable);
 
        	  return oLayout;
          }
});

Thanks

[Former Member · Accepted solution]

I hope this will get you started

http://jsbin.com/xoyomer/edit?js,output

thanks

-D