SAPUI5 - Typescript - TheLazy.Dev

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);
    }
}

Blog

SAPUI5 - Typescript

KIranuknow

Join Our Newsletter. No Spam, Only the good stuff.

Related