UI5-Table

UI5-Table

 

 

---

Create a UI5 project.

---

Choose SAPUI5 Application project.

---

Provide a name choose marked library and options.

---

The below screen appears with Index.html page.

---

The task is to display a table with static data.

First include the ‘sap.ui.table’ library in the first script section.

---

Code Snippet:

// Prepare static data set
oData = [
{firstName: “Test1”, lastName: “Demo1”},
{firstName: “Test2”, lastName: “Demo2”},
{firstName: “Test3”, lastName: “Demo3”},
{firstName: “Test4”, lastName: “Demo4”},
{firstName: “Test5”, lastName: “Demo5”},
{firstName: “Test6”, lastName: “Demo6”},
{firstName: “Test7”, lastName: “Demo7”},
{firstName: “Test8”, lastName: “Demo8”},
];
// Instantiate Table
oTable= new sap.ui.table.Table({
title: “Simple Table Demo”,
visibleRowCount: 5,
selectionMode: sap.ui.table.SelectionMode.Single
});
// Instantiate Column
oCol1 = new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: “First Name”}),
template: new sap.ui.commons.TextView().bindProperty(“text”, “firstName”)
});

oCol2 = new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: “Last Name”}),
template: new sap.ui.commons.TextView().bindProperty(“text”, “lastName”)
});
// Add columns to the Table
oTable.addColumn(oCol1);
oTable.addColumn(oCol2);
// Instantitae JSON Model
oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: oData});
// Add model to the table
oTable.setModel(oModel);
oTable.bindRows(“/modelData”);
oTable.placeAt(“content”);

---

Here we have the table.

---

To enable sort property for the first column, add the SortProperty and pass the data field name.

---

Click on the first column name.

---

The sort options appear.

---

To Enable the filter property, add the filterProperty to the column and pass the data field name.

---

Click on the first column name.

---

---

---