How to create SAP UI5 Grid table with JSON Data

SAP UI5 Grid table with JSON Data

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);
              }