Viz and table

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta charset="utf-8">
  <title>DEA</title>

  <script id='sap-ui-bootstrap' 
          src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' 
          data-sap-ui-theme='sap_horizon' 
          data-sap-ui-libs='sap.m, sap.viz' 
          data-sap-ui-xx-bindingSyntax='complex'></script>

  <script id="view1" type="sapui5/xmlview">
    <mvc:View controllerName="myController" 
              xmlns:mvc="sap.ui.core.mvc"
              xmlns="sap.m"
              xmlns:viz="sap.viz.ui5.controls"
              xmlns:viz.data="sap.viz.ui5.data"
              xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds">
      <FlexBox direction="Row" justifyContent="SpaceAround" renderType="Div" class="sapUiSmallMargin">
    
        <VBox width="45%">
          <viz:VizFrame
          class="sapUiLargeMarginTop"
            id="donutChart"
            width="100%"
            height="300px"
            vizType="donut"
            selectData="onChartSelectionChanged"
            deselectData="onChartSelectionChanged">
            <viz:dataset>
              <viz.data:FlattenedDataset data="{/chartData}">
                <viz.data:dimensions>
                  <viz.data:DimensionDefinition name="Category" value="{category}" />
                </viz.data:dimensions>
                <viz.data:measures>
                  <viz.data:MeasureDefinition name="Value" value="{value}" />
                </viz.data:measures>
              </viz.data:FlattenedDataset>
            </viz:dataset>
            <viz:feeds>
              <viz.feeds:FeedItem uid="size" type="Measure" values="Value"/>
              <viz.feeds:FeedItem uid="color" type="Dimension" values="Category"/>
            </viz:feeds>
          </viz:VizFrame>
        </VBox>

        <VBox width="50%">
          <Table id="tableId" items="{/tableData}">
            <headerToolbar>
              <Toolbar>
                  <Title id="tableHeader" text="All DEAs"/>
              </Toolbar>
            </headerToolbar>
            <columns>
              <Column><Text text="Name"/></Column>
              <Column><Text text="Status"/></Column>
            </columns>
            <items>
              <ColumnListItem>
                <cells>
                  <Text text="{name}"/>
                  <Text text="{status}"/>
                </cells>
              </ColumnListItem>
            </items>
          </Table>
        </VBox>
      </FlexBox>
    </mvc:View>
  </script>

  <script>
    sap.ui.define([
      "sap/ui/core/mvc/Controller",
      "sap/ui/model/json/JSONModel",
      "sap/ui/model/Filter",
      "sap/ui/model/FilterOperator"
    ], function(Controller, JSONModel, Filter, FilterOperator) {
      "use strict";

      return Controller.extend("myController", {
        onInit: function () {
          var oData = {
            chartData: [
              { category: "Technology", value: 33 },
              { category: "Cloud", value: 33 },
              { category: "Basis", value: 33 }
            ],
            tableData: [
              { name: "Aarav Mehta", status: "Technology" },
              { name: "Lena Thompson", status: "Cloud" },
              { name: "Carlos Ortega", status: "Basis" },
              { name: "Fatima Al-Fulan", status: "Technology" },
              { name: "Junho Park", status: "Cloud" },
              { name: "Nina Kozlova", status: "Cloud" }
            ]
          };
          var oModel = new JSONModel(oData);
          this.getView().setModel(oModel);

          var oVizFrame = this.byId("donutChart");
          oVizFrame.setVizProperties({
            title: { text: "Areas" },
            tooltip: {
                visible: false
            },
            interaction: {
              selectability: {
                mode: "SINGLE",
              }
            }
          });
        },
        
        onChartSelectionChanged: function (oEvent) {
          var oVizFrame = oEvent.getSource(); 
          var oTable = this.byId("tableId");
          var oBinding = oTable.getBinding("items");

          var aSelection = oVizFrame.vizSelection();

          if (aSelection && aSelection.length > 0) {
            var selectedCategory = aSelection[0].data.Category;
            var oFilter = new Filter("status", FilterOperator.EQ, selectedCategory);
            
            this.byId("tableHeader").setText("DEAs for: " + selectedCategory);
            oBinding.filter([oFilter]);
          } else {
            this.byId("tableHeader").setText("All DEAs");
            oBinding.filter([]);
          }
        }
      });
    });

    var myView = sap.ui.xmlview({
      viewContent: jQuery('#view1').html()
    });

    myView.placeAt('content');
  </script>

</head>
<body id='content' class='sapUiBody'>
</body>
</html>