Element Binding w/ JSONModel (https://stackoverflow.com/a/51192293/5846045)

<!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 id="sap-ui-bootstrap"
      src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_fiori_3"
      data-sap-ui-async="true"
      data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
      data-sap-ui-compatversion="edge"
      data-sap-ui-resourceroots='{ "demo": "./" }'
      data-sap-ui-xx-componentpreload="off"
      data-sap-ui-xx-waitfortheme="init"
    ></script>
  </head>
  <body id="content" class="sapUiBody">
    <div style="height: 100%;"
      data-sap-ui-component
      data-id="rootComponentContainer"
      data-name="demo"
      data-height="100%"
      data-settings='{ "id": "rootComponent" }'
    ></div>
  </body>
</html>

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/Device",
], function(UIComponent, Device) {
  "use strict";

  return UIComponent.extend("demo.Component", {
    metadata: {
      manifest: "json",
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      this.setDensityClass().getRouter().initialize();
    },

    setDensityClass: function({
      styleClass = Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact",
      targetElement = document.body,
    } = {}) {
      targetElement?.classList?.add(styleClass);
      return this;
    },

  });
});

{
  "_version": "1.10.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "Demo",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {
      "myDataSource": {
        "type": "JSON",
        "uri": "localData/demoData.json"
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.52.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "resources": {
      "js": [
        
      ],
      "css": [
        
      ]
    },
    "models": {
      "data": {
        "dataSource": "myDataSource",
        "preload": true
      }
    },
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "XML",
      "async": true
    },
    "routing": {
      "routes": [{
        "name": "home",
        "pattern": "",
        "target": "home"
      }],
      "targets": {
        "home": {
          "viewId": "homeView",
          "viewName": "Home",
          "transition": "fade",
          "viewLevel": 1
        },
        "notFound": {
          "viewName": "Home",
          "transition": "slide",
          "viewLevel": 98
        }
      },
      "config": {
        "async": true,
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "demo.view",
        "controlId": "rootApp",
        "controlAggregation": "pages",
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        },
        "homeRoute": "home"
      }
    }
  }
}

<mvc:View
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true"
>
  <App id="rootApp">
    <pages>
      <!-- will be added by Router -->
    </pages>
  </App>
</mvc:View>

<mvc:View
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core"
  controllerName="demo.controller.Home"
>
  <Page id="homePage" title="Items of ...">
    <headerContent>
      <Select
        autoAdjustWidth="true"
        forceSelection="false"
        items="{
          path: 'data>/',
          templateShareable: false,
          key: 'type'
        }"
        change=".onSelectChange"
      >
        <core:Item
          key="{data>type}"
          text="Type {data>type}"
        />
      </Select>
    </headerContent>
    <Table id="myTable"
      items="{
        path: 'data>items',
        key: 'key',
        templateShareable: false
      }"
    >
      <columns>
        <Column id="payTypeColumn">
          <Label
            text="Pay Type"
            labelFor="payTypeColumn"
            wrapping="true"
          />
        </Column>
        <Column id="amountColumn">
          <Label
            text="Amount"
            labelFor="amountColumn"
            wrapping="true"
          />
        </Column>
      </columns>
      <ColumnListItem>
        <Text text="{data>paytype}"/>
        <Text text="{data>amount}"/>
      </ColumnListItem>
    </Table>
  </Page>
</mvc:View>

sap.ui.define([
  "sap/ui/core/mvc/Controller",
], function(Controller) {
  "use strict";

  return Controller.extend("demo.controller.Home", {
    onInit: function() {
      
    },

    onSelectChange: function(event) {
      const selectedItem = event.getParameter("selectedItem");
      this.byId("myTable").bindObject({
        path: selectedItem.getBindingContext("data").getPath(),
        model: "data",
      });
    },

  });
});

[
    {
        "type": "01",
        "items": [
            {
                "key": 1,
                "date": "20150720",
                "amount": 53.20,
                "paytype": "Cash"
            },
            {
                "key": 2,
                "date": "20150720",
                "amount": 23.20,
                "paytype": "Cash"
            }
        ]
    },
    {
        "type": "02",
        "items": [
            {
                "key": 3,
                "date": "20150720",
                "amount": 515.6,
                "paytype": "Credit Card"
            },
            {
                "key": 4,
                "date": "20150720",
                "amount": 3,
                "paytype": "Something else"
            }
        ]
    }
]