JSFiddle - React, Tailwind, and code Playground
HTML
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.ui.commons"></script>
<script id="view1" type="ui5/xmlview">
<mvc:View
controllerName="view1.initial"
xmlns="sap.ui.commons"
xmlns:l="sap.ui.commons.layout"
xmlns:t="sap.ui.table"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" >
<t:Table id="tbl" rows="{/people}">
<t:columns>
<t:Column>
<t:label>
<Label text="Name" />
</t:label>
<t:template>
<TextView text="{name}" />
</t:template>
</t:Column>
<t:Column>
<t:label>
<Label text="Gender" />
</t:label>
<t:template>
<TextView text="{gender}" />
</t:template>
</t:Column>
<t:Column>
<t:label>
<Label text="City" />
</t:label>
<t:template>
<DropdownBox selectedKey="{test}" items="{/cities}">
<items>
<core:ListItem key="{key}" text="{text}" />
</items>
</DropdownBox>
</t:template>
</t:Column>
</t:columns>
</t:Table>
</mvc:View>
</script>
<div id="uiArea"></div>
JavaScript
sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
people : [
{lastName: "Dente", name: "Al", checked: true, gender: "male", test: 1},
{lastName: "Friese", name: "Andy", checked: true, gender: "male", test: 2},
{lastName: "Mann", name: "Anita", checked: false, gender: "female", test: 1},
{lastName: "Schutt", name: "Doris", checked: true, gender: "female", test: 3},
{lastName: "Open", name: "Doris", checked: true, gender: "female", test: 3},
{lastName: "Dewit", name: "Kenya", checked: false, gender: "female", test: 1}
],
cities : [
{key: 1, text: "City 1 ...."},
{key: 2, text: "City 2 ...."},
{key: 3, text: "City 3....."}
]
});
this.getView().setModel(oModel);
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("uiArea");