Dynamic Binding of SAPUI5 Table Columns and Rows

Tweet

Pre-requisites

1.sapui5 framework

2.basic javascript knowledge
       We will see how to  do dynamic binding of columns and Rows of a table.Since commonly used table control is sap.ui.table.Table we will use this control for our example.
       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.You have to add sap.ui.commons or sap.m library otherwise the Table control will not be rendered.

 data-sap-ui-libs='sap.ui.commons,sap.ui.table'

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.Our Data Looks like below. 

   var columnData = [{
       columnName: "firstName"
   }, {
       columnName: "lastName"
   }, {
       columnName: "department"
   }];

   var rowData = [{
       firstName: "Sachin",
       lastName: "Tendulkar",
       department: "Cricket"
   }, {
       firstName: "Lionel",
       lastName: "Messi",
       department: "Football"
   }, {
       firstName: "Mohan",
       lastName: "Lal",
       department: "Film"
   }];

3. Create Table control.The default value for visibleRowCount is 10.We will give it 3 to make things simple and clear.

 var oTable = new sap.ui.table.Table({
    visibleRowCount: 3
});

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

 var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
    rows: rowData,
    columns: columnData
});

5. Set the model to Table Control.

 oTable.setModel(oModel);

6. Bind Columns.Here we will use a factory function for iterating the columndata and setting it to the template.The factory function is a more powerful approach for creating controls from model data.The factory function is called for each entry to create the controls necessary to represent the current entry.The factory function gets the parameters sId.These parameters must be used ash they identify the created control and the context object oContext , which allows accessing data from the list entry.It returns an instance of sap.ui.core.Element.

  oTable.bindColumns("/columns", function(sId, oContext) {
     var columnName = oContext.getObject().columnName;
     return new sap.ui.table.Column({
         label: columnName,
         template: columnName,
     });
 });

7. Bind Rows.

 oTable.bindRows("/rows");



8. Place the control.

 oTable.placeAt("content");

9. See it in Action.Boom....

SAPUI5 Dynamic Binding of Table Columns and Rows

If you enjoyed this post, Please Share!!