Dynamic Binding of SAPUI5 Table Columns and Rows
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
- First step is to include sap.ui.commons and sap.ui.table libraries in index.html file.
- 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
Can we achieve correct two-way binding with this approach? AFAIK, it is set to "two-way" by default, in JSON Model...But if you use TextField as a column template and want to change its value in the rendered table, the unnderlying model will remain unchanged...
Yes we can..
Please refer the sample..try editing the input fields and press enter You can see it yourself
JS Bin - Collaborative JavaScript Debugging