SAPUI5 – Typescript

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”;

// …


This content originally appeared on DEV Community and was authored by KIranuknow

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






This content originally appeared on DEV Community and was authored by KIranuknow


Print Share Comment Cite Upload Translate Updates
APA

KIranuknow | Sciencx (2024-07-23T01:54:53+00:00) SAPUI5 – Typescript. Retrieved from https://www.scien.cx/2024/07/23/sapui5-typescript/

MLA
" » SAPUI5 – Typescript." KIranuknow | Sciencx - Tuesday July 23, 2024, https://www.scien.cx/2024/07/23/sapui5-typescript/
HARVARD
KIranuknow | Sciencx Tuesday July 23, 2024 » SAPUI5 – Typescript., viewed ,<https://www.scien.cx/2024/07/23/sapui5-typescript/>
VANCOUVER
KIranuknow | Sciencx - » SAPUI5 – Typescript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/23/sapui5-typescript/
CHICAGO
" » SAPUI5 – Typescript." KIranuknow | Sciencx - Accessed . https://www.scien.cx/2024/07/23/sapui5-typescript/
IEEE
" » SAPUI5 – Typescript." KIranuknow | Sciencx [Online]. Available: https://www.scien.cx/2024/07/23/sapui5-typescript/. [Accessed: ]
rf:citation
» SAPUI5 – Typescript | KIranuknow | Sciencx | https://www.scien.cx/2024/07/23/sapui5-typescript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.