<!DOCTYPE html>
<html>
<head>
<title>OpenUI5 Hello World App</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{"HelloWorld": "./"}'
displayBlock="true">
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.xmlview({
viewName: "HelloWorld.App"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
<mvc:View
controllerName="HelloWorld.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page title="The sap.m.Table"/>
<Table id="tableId" inset="false" items="{/animals}">
<columns>
<Column width="12em">
<ObjectIdentifier text="Name"/>
</Column>
<Column>
<Text text="Favourite Food"/>
</Column>
<Column>
<Text text="Color"/>
</Column>
<Column>
<ObjectNumber number="Number of Legs"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{name}"/>
<Text text="{favouriteFood}"/>
<Text text="{color}"/>
<ObjectNumber
number="{numberOfLegs}" />
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"
], function (Controller, MessageToast) {
"use strict";
return Controller.extend("HelloWorld.App", {
onInit: function () {
var oModel = new sap.ui.model.json.JSONModel(
{"animals": [
{
"name": "Fox",
"favouriteFood": "chicken",
"color": "red",
"numberOfLegs": "4"
},
{
"name": "Pig",
"favouriteFood": "everything",
"color": "pink",
"numberOfLegs": "4"
},
{
"name": "Cat",
"favouriteFood": "mouse",
"color": "grey",
"numberOfLegs": "4"
},
{
"name": "Snake",
"favouriteFood": "mouse",
"color": "green",
"numberOfLegs": "0"
}
]}
);
this.getView().setModel(oModel);
}
});
});
Most basic example of an UI5 sap.m.Table.