<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script defer id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.table,sap.ui.layout"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-resourceroots='{"demo": "./"}'
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<script>
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
viewName: "demo.view.App",
height: "100%",
models: new JSONModel(sap.ui.require.toUrl("demo/data.json")),
}).then(view => view.placeAt("content")));
</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
{
"myCollection": [
{
"key": 1,
"text1": "Text 1",
"text2": "Text 1"
},
{
"key": 2,
"text1": "Text 2",
"text2": "Text 2"
},
{
"key": 3,
"text1": "Text 3",
"text2": "Text 3"
},
{
"key": 4,
"text1": "Text 4",
"text2": "Text 4"
},
{
"key": 5,
"text1": "Text 5",
"text2": "Text 5"
},
{
"key": 6,
"text1": "Text 6",
"text2": "Text 6"
},
{
"key": 7,
"text1": "Text 7",
"text2": "Text 7"
},
{
"key": 8,
"text1": "Text 8",
"text2": "Text 8"
}
]
}
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:table="sap.ui.table"
xmlns:layout="sap.ui.layout"
displayBlock="true">
<App autoFocus="false">
<Page showHeader="false" enableScrolling="false">
<layout:FixFlex fixContentSize="auto">
<layout:fixContent>
<Panel headerText="Fix Panel"
expandable="true"
expanded="true">
<ObjectAttribute text="Some fixed content ..." />
<ObjectAttribute text="Some more content ..." />
<ObjectAttribute text="More content ..." />
<ObjectAttribute text="More content ..." />
</Panel>
</layout:fixContent>
<layout:flexContent>
<Panel headerText="Flex Panel"
height="100%"
expandable="true"
expanded="true">
<table:Table
visibleRowCountMode="Auto"
rows="{
path: '/myCollection',
templateShareable: false,
key: 'key'
}">
<table:Column label="Column 1" template="text1" />
<table:Column label="Column 2" template="text2" />
</table:Table>
</Panel>
</layout:flexContent>
</layout:FixFlex>
</Page>
</App>
</mvc:View>