Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 

Dynamic generation of table in SAPUI5

This blog post gives you an idea about generating a table dynamically in the UI5 application based on the oData/Json.

For this we are going to consider sap.m.Table  control and the API information as follows.

Control Sample:


UX Guidelines:

Responsive Table



Module: sap/m/Table

Visibility: public

Available since: 1.16

Application Component: CA-UI5-TBL

You can also get much more information on the UI5 demokit link

How the sap.m.Table works?

Above is the sections involved in the sap.m.Table.

Comprises of Column and ColumnListItem and which results for header and the dynamic values which we bind.

To generate the table dynamically, first create a table element with id in the view.

<Table id="idMyTable"  inset="false" growing="true" growingScrollToLoad="true" alternateRowColors="true">
<!-- Our code in the controller goes here -->


In respective the controller.js

Based on the oData model execution or however you want generate the Column element

var oTable = this.getView().byId("idMyTable");

for (i = 0; i < s; i++) {
var oColumn = new sap.m.Column("col" + i, {
width: "1em",
header: new sap.m.Label({
text: <oData header text binding>

Now add the oColumn you have created to the table within the loop


Now the column part is over and now we have to concentrate on the ColumnListItem

Before that, create an array for cells and use the same count as that of column.

Var oCell = [];
for (i = 0; i < s; i++) {
if (i === 0) {
var cell1 = new sap.m.Text({
text: "{QuestionTx}"

After creating the respective UI’s like Text box in which needs to be shown in the table, push them to the oCell Array.

This should happen within in the array.

Now the final part is creating the columnListItem

var aColList = new sap.m.ColumnListItem("aColList", {
cells: oCell

Add the cell array we have created to the cell of the columnListItem we have created.

Now finally, bind the odataset of to the table along with the columnListItem and this does the magic for us.

oTable.bindItems("<entityset>", aColList);

Now you can generate table based on the odata output and including the columns and rows.

This is very much helpful in scenarios where you are trying to develop apps for surveys and reports for attendance based on the dynamic values.

Labels in this area