<!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>