Dynamic Binding of SAPUI5 Table Columns and Rows

[Former Member]

          The sap.ui.table.Table control is commonly used in desktop and tablet applications.It provides a comprehensive set of features for displaying and dealing with vast amount of data.

           The Table control reuses its DOM element of the rows.When a user scrolls only the row contexts are changed but the rendered controls remain the same.This is why table control is able to handle vast amount of data.Keep the column number as low as possible to increase the table performance.

           The Table control relies completely on data binding , and its supported feature set is tightly coupled to the data model and binding used.So lets see how to dynamically bind Table rows and columns.We will make it as simple as possible.

Steps

1. First step is to include sap.ui.commons and sap.ui.table libraries in index.html file.
2. First we need data for the Table.Here we need two sets of data.One for binding the column and other for rows.You can Get Data from Odata Service.Here I am using custom data.

3.Create Table control.The default value for visibleRowCount is 10.We will give it 3 .

4.Create a json model instance.Set data to the model.

5.Set the model to Table Control.

6.Bind Columns

7.Bind Rows And place it

Hope You liked it.sharing sample code

http://jsbin.com/xovuhaxegi/1/edit?html,output