JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("learning");
var view = sap.ui.view({id:"idfirst1", viewName:"learning.first", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
JavaScript
var oItemsData =
[
{ key: "18", text: "18"},
{ key: "19", text: "19" },
{ key: "20", text: "20" },
{ key: "21", text: "21" },
{ key: "22", text: "22" }
]
;
var oModel = new sap.ui.model.json.JSONModel();
var data =[
{"slNo":"1","name":"sap","age":""},
{"slNo":"2","name":"scn","age":""},
{"slNo":"3","name":"community","age":""},
{"slNo":"4","name":"network","age":""},
{"slNo":"5","name":"sapscn","age":""}
];
oModel.setData(data);
sap.ui.getCore().setModel(oModel);
var table = new sap.m.Table({
columns:[
new sap.m.Column({
header:new sap.m.Label({text:"sl no"}),
}),
new sap.m.Column({
header:new sap.m.Label({text:"name"}),
}),
new sap.m.Column({
header:new sap.m.Label({text:"age range"})
}),
new sap.m.Column({
header:new sap.m.Label({text:"age"})
}),
]
});
var oModel1 = new sap.ui.model.json.JSONModel();
oModel1.setData(oItemsData);
sap.ui.getCore().setModel(oModel1,"omodel");
var oItemTemplate = new sap.ui.core.Item({
key:"{omodel>key}",
text:"{omodel>text}",
});
template= new sap.m.ColumnListItem({
cells:[
new sap.m.Text({text:"{slNo}"}),
new sap.m.Text({text:"{name}"}),
new sap.m.ComboBox({
items:{
path:"omodel>/",
template:oItemTemplate,
},
selectionChange:function(event){
var path =event.getSource().getBindingContext().getPath();
console.log(path);
sap.ui.getCore().getModel().setProperty(path+"/age",ovalue);
}
}),
new sap.m.Text({
text:"{age}",
})
...