The table is the most used element in UI5 library.We will use the table in almost all of our development work.

 

Step1:- Open the eclipse IDE File–>New–>Other–>UI5 application project–>project name–>name.In the table.view.js change the code as below :-

createContent : function(oController) {
var oPage = new sap.m.Page({
title: "Title",
content: [
 
]
});
return oPage;
}

Step2:- Now let us create the data after the createContent

var oData = {
"names": [{

id: 1,
Name: "Dinosaurus",
Place: "Mountain"
}, {

id: 2,
Name: "Elephant",
Place: "Forest"
}, {
id: 3,
Name: "Whale",
Place: "Sea"
}, {
id: 4,
Name: "Duck",
Place: "Water"
},{
id: 5,
Name: "Monkey",
Place: "Tree"
}]

};

Let us create the model:-

var oModel = new sap.ui.model.json.JSONModel(oData);

Now let us create three columns and pass the headers inside it with the label :-

var oCol1 = new sap.m.Column({

 header : new sap.m.Label({text:"Name"})

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

 header : new sap.m.Label({text:"Place"})

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

 header : new sap.m.Label({text:"Id"})

 });

Now let us create the table & inside it we will pass the title & the columns :-

var oTable = new sap.m.Table({

title:"Simple Animal List",
columns:[
oCol1,
oCol2,
oCol3
]

})

Now let us create the view of the template and we will provide the cells & the text content of the each row:-

var oTemp = new sap.m.ColumnListItem({
cells:[
 
new sap.m.Text({
text:"{Name}"
 
}),
new sap.m.Text({
text:"{Place}"
 
}),
new sap.m.Text({
text:"{id}"
 
}),
]
 
})

Next, let us set the binding & mention the path where our data is present & also the template :-

var oPage = new sap.m.Page({
title : "Title",
content : [
oTable
]
});

Now let us do the coding of the view part in the controller too as we are following the MVC architecture(table.controller.js in my case) in the onInit function i.e when the controller is initialized:-

onInit: function() {

var oData = {
 "names" : [ {

id : 1,
 Name : "Dinosaurus",
 Place : "Mountain"
 }, {

id : 2,
 Name : "Elephant",
 Place : "Forest"
 }, {
 id : 3,
 Name : "Whale",
 Place : "Sea"
 }, {
 id : 4,
 Name : "Duck",
 Place : "Water"
 }, {
 id : 5,
 Name : "Monkey",
 Place : "Tree"
 } ]

};
 
 },

Now let us set the global model:-

 
sap.ui.getCore().setModel(oModel); 

Step3:- Here comes the final output:-

That’s all,stay tuned for more 🙂