How to dynamically create a sap.m.table in SAP UI5

Required steps:

  1. define and initialize a variable with JSON Data ( Key value pairs )
  2. define a JSON Model reference variable and transfer the JSON Data through the constructor
  3. define a sap.m.Table reference and set the column Headings. Use the placeAt method to set the content
  4. Set the JSON Model to the table
  5. Assign the cell values to each row using the columnListItem class. Finally call the bindAggregation method of the Table reference and pass the cell values in the method call.

CODE EXAMPLE

SAP M TABLE

        <script type='text/javascript'>

var jsonData = [ {columnOne : “Data row A1”, columnTwo : “Data row 100”, columnThree : “Data row hundred”},

             {columnOne : "Data row A2", columnTwo : "Data row 200", columnThree : "Data row two hundred"},

             {columnOne : "Data row A3", columnTwo : "Data row 300", columnThree : "Data row three hundred"}  ];

var jsonModel = new sap.ui.model.json.JSONModel(jsonData);

var mTable = new sap.m.Table({

            columns : [

                  new sap.m.Column({ header  :  new sap.m.Label({  text : "Column One" }) }),

                  new sap.m.Column({ header  :  new sap.m.Label({  text : "Column Two" }) }),

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

]

}).placeAt(“content”);

mTable.setModel(jsonModel);

mTable.bindAggregation(“items”, {

path : “/”,

template : new sap.m.ColumnListItem({

cells : [

new sap.m.Text({ text : “{columnOne}” }),

new sap.m.Text({ text : “{columnTwo}” }),

new sap.m.Text({ text : “{columnThree}” }),

]

})

});