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 odata=[
{"ID":"1","col1":false,"Easy":""},
{"ID":"2","col1":false,"Easy":""},
{"ID":"3","col1":false,"Easy":""},
{"ID":"4","col1":false,"Easy":""},
{"ID":"5","col1":false,"Easy":""}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(odata);
sap.ui.getCore().setModel(oModel);
var table = new sap.ui.table.Table({
editable:true,
id:"oTableCust",
selectionMode: sap.ui.table.SelectionMode.MultiToggle,
minAutoRowCount:5,
});
table.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "ID",textAlign: "Center",}),
template : new sap.ui.commons.TextView({textAlign: "Center",}).bindProperty("text","ID"),
width: "100px",
}));
table.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Form",textAlign: "Center",}),
template : new sap.ui.commons.RadioButton({
editable : true ,
enabled : true ,
id : "colm1" ,
groupName : "Grp1" ,
selected : "{col1}",
select : function(oevent){
var items = oevent.getSource().getParent();
var id = items.mAggregations.cells[2].sId;
sap.ui.getCore().byId(id).setEditable(true);
sap.ui.getCore().byId(id).setPlaceholder("Comments please");
oModel.refresh();
}
}),
width: "150px",
name : "col1"
}));
table.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Easy",textAlign: "Center"}),
template : new sap.ui.commons.TextField({
textAlign: "Center",
tooltip:"Enter values from 1 to 6",
editable:false,
}).bindProperty("value","Easy"),
...