This post contains the actual XML View code and the controller javascript code to construct a SAP UI5 Grid table with JSON data of type sap.ui.table.Table and connect it to JSON Model
XML View code with Grid table of type sap.ui.table.Table
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m"
xmlns:uiTable="sap.ui.table"
controllerName="initialView.controller"
displayBlock="true">
<m:Page id="page1" title="Customers1" showHeader="true" enableScrolling="true"
class="sapUiContentPadding">
<uiTable:Table id="Customers" selectionMode="MultiToggle"
visibleRowCount="7"
rows="{/}"
ariaLabelledBy="title">
<uiTable:extension>
<m:OverflowToolbar style="Clear">
<m:Title id="title" text="Customers" />
<m:ToolbarSpacer />
</m:OverflowToolbar>
</uiTable:extension>
<uiTable:columns>
<uiTable:Column>
<m:Label text="Customer ID" />
<uiTable:template>
<m:ObjectStatus text="{Id}" />
</uiTable:template>
</uiTable:Column>
<uiTable:Column>
<m:Label text="Customer Name" />
<uiTable:template>
<m:Text text="{Name}" wrapping="false" />
</uiTable:template>
</uiTable:Column>
</uiTable:columns>
</uiTable:Table>
</m:Page>
</mvc:View>
JSON Model is set on the Grid table as shown below
onInit : function() {
var jsonD = [
{Id : '1000', Name : 'Vikas'},
{Id : '1001', Name : 'Rao'}
];
var jsonM = new sap.ui.model.json.JSONModel(jsonD);
var table1 = this.getView().byId('Customers');
table1.setModel(jsonM);
}