Open the existing project in eclipse which we have done in the previous blog from here.

Step1:- Open the index.html page in HTML editor & add some more ui5 library(sap.ui.commons & sap.ui.table) into it.

 data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table" 

Now go to the table.view.js & change the column type & add the label,template property with the contents of the column over there as :-

var oCol1 = new sap.ui.table.Column({

label : new sap.m.Label({
text : "Name"
}),
template : new sap.m.Text({

text : "{Name}"
})

});
var oCol2 = new sap.ui.table.Column({

label : new sap.m.Label({
text : "Name"
}),
template : new sap.m.Text({

text : "{Name}"
})

});
var oCol3 = new sap.ui.table.Column({

label : new sap.m.Label({
text : "Name"
}),
template : new sap.m.Text({

text : "{Name}"
})

});

Now let us change the table type too  :-

var oTable = new sap.ui.table.Table({
title : "Simple Animal List",
columns : [

oCol1, oCol2, oCol3 ]

});

Next, we can use another variation of binding without defining the property path  i.e

oTable.bindRows("/names")

Step2:- Now, here comes the output which we can notice is somewhat different as compared to the previous post i.e sap.m.table .

As per your requirement(functionality,device type on which the app will be running) choose which type of table(sap.m.table OR sap.ui.table) you need to implement.

That’s all for now. Stay tuned for more 🙂