SAPUI5 – Typescript

RMAG news

To dynamically add columns to a sap.ui.table.Table in SAPUI5 using TypeScript, you can follow these steps: Create a new column object.

import Column from “sap/ui/table/Column”;
import Label from “sap/m/Label”;
import Text from “sap/m/Text”;

// …

const newColumn = new Column({
label: new Label({ text: “New Column” }), // Column header
template: new Text({ text: “{propertyName}” }), // Binding to a property in your model
width: “100px” // Optional width setting
});

Add the column to the table.

const myTable = this.byId(“myTable”) as sap.ui.table.Table;
myTable.addColumn(newColumn);

Example:

import Controller from “sap/ui/core/mvc/Controller”;
import Column from “sap/ui/table/Column”;
import Label from “sap/m/Label”;
import Text from “sap/m/Text”;

export default class MyController extends Controller {

onAddColumn() {
const newColumn = new Column({
label: new Label({ text: “Dynamic Column” }),
template: new Text({ text: “{myProperty}” }),
width: “150px”
});

const myTable = this.byId(“myTable”) as sap.ui.table.Table;
myTable.addColumn(newColumn);
}
}

Please follow and like us:
Pin Share