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
KIranuknow | Sciencx (2024-07-23T01:54:53+00:00) SAPUI5 – Typescript. Retrieved from 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.