Table-TabNavigation

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">
  <title>SCN 3821334</title>
  <script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.table, sap.ui.commons" data-sap-ui-xx-bindingSyntax="complex">
  </script>

  <script>
    var aData = [{
      Customer: "1",
      Country: "IN",
      Name: "Anand Krishna",
      Address: "22950"
    }, {
      Customer: "2",
      Country: "IN",
      Name: "Sasthy",
      Address: "22953"
    }, {
      Customer: "3",
      Country: "ES",
      Name: "Sasthy",
      Address: "22954"
    }, {
      Customer: "4",
      Country: "FR",
      Name: "Rajesh Sawant",
      Address: "22958"
    }, {
      Customer: "5",
      Country: "FR",
      Name: "Mayank",
      Address: "22959"
    }, {
      Customer: "6",
      Country: "AU",
      Name: "Mark",
      Address: "21234"
    }, {
      Customer: "7",
      Country: "EU",
      Name: "Steve",
      Address: "11434"
    }, {
      Customer: "8",
      Country: "RS",
      Name: "Vladimirs",
      Address: "51434"
    }];
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData(aData);
    sap.ui.getCore().setModel(oModel);

    //Create an instance of the table control
    var oTable2 = new sap.ui.table.Table("oTable", {
      visibleRowCount: 5
    });

    //Define the columns and the control templates to be used
    oTable2.addColumn(new sap.ui.table.Column({
      label: new sap.ui.commons.Label({
        text: "Customer"
      }),
      template: new sap.ui.commons.TextField().bindProperty("value", "Customer"),
      sortProperty: "Customer",
      filterProperty: "Customer",
      width: "200px"
    }));

    oTable2.addColumn(new sap.ui.table.Column({
      label: new sap.ui.commons.Label({
        text: "Country"
      }),
      template: new sap.ui.commons.TextField().bindProperty("value", "Country"),
      sortProperty: "Country",
      filterProperty: "Country",
      width: "200px"
    }));
    oTable2.addColumn(new sap.ui.table.Column({
      label: new sap.ui.commons.Label({
        text: "Name"
      }),
      template: new sap.ui.commons.TextField().bindProperty("value", "Name"),
      sortProperty: "Name",
      filterProperty: "Name",
      width: "200px"
    }));
    oTable2.addColumn(new sap.ui.table.Column({
      label: new sap.ui.commons.Label({
        text: "Address"
      }),
      template: new sap.ui.commons.TextField().bindProperty("value", "Address"),
      sortProperty: "Address",
      filterProperty: "Address",
      width: "200px"
    }));

    //Tab Logic Starts
    oTable2.addEventDelegate({
      onAfterRendering: function() {
        var oTableID = this.getId();
        $("#" + oTableID).click(function() {
          //Get the Text Field that is selected in table
          jQuery.sap.delayedCall(100, null, function() {
            var oBody = $('#' + oTableID).find('tbody');
            //Find the Text field that is focused
            var oField = oBody.find('.sapUiTfFoc')[0];
            if (oField) {
              var oFieldId = oField.id;
              //Store the Text Field control which is focused
              sap.ui.getCore().getModel().setProperty("/FieldID", oFieldId);
            }
          });
        });
        $('#' + oTableID).on('keyup', function(e) {
          //On TAB press
          if (e.which == 9) {
            var oFieldID = sap.ui.getCore().getModel().getProperty("/FieldID");
            var oSelectedField = sap.ui.getCore().byId(oFieldID);
            var oRow = oSelectedField.getParent();
            var oTable = oRow.getParent();
            var oCells = oRow.getCells();
            var oSelectedIndex;
            //Find the text field that is focused
            for (var i = 0; i < oCells.length; i++) {
              var oID = oCells[i].getId();
              if (oID == oFieldID) {
                oSelectedIndex = i;
              }
            }
            var oCellsLength = oCells.length - 1;
            if (oCellsLength === oSelectedIndex) {
              var oRows = oTable.getRows();
              var oSelectedRow;
              for (var i = 0; i < oRows.length; i++) {
                var oID = oRows[i].getId();
                if (oID == oRow.getId()) {
                  oSelectedRow = i;
                }
              }
              var oRowLength = oTable.getRows().length - 1;
              if (oSelectedRow === oRowLength) {
                //If it is last Row of table, scroll Next Logic
                oTable._scrollNext();
                jQuery.sap.delayedCall(100, null, function() {
                  var oTargetCell = oRows[oSelectedRow].getCells()[0];
                  //Get the next row first cell
                  sap.ui.getCore().getModel().setProperty("/FieldID", oTargetCell.getId());
                  //Get Focus of Next Text Field
                  var oFocusInfo = oTargetCell.getFocusInfo();
                  //Apply Focus of Next Text Field
                  oTargetCell.applyFocusInfo(oFocusInfo);
                });
              } else {
                //If it is last Cell of the Row
                var oTargetCell = oRows[oSelectedRow + 1].getCells()[0];
                sap.ui.getCore().getModel().setProperty("/FieldID", oTargetCell.getId());
                var oFocusInfo = oTargetCell.getFocusInfo();
                oTargetCell.applyFocusInfo(oFocusInfo);
              }
            } else {
              var oTargetCell = oRow.getCells()[oSelectedIndex + 1];
              sap.ui.getCore().getModel().setProperty("/FieldID", oTargetCell.getId());
              var oFocusInfo = oTargetCell.getFocusInfo();
              oTargetCell.applyFocusInfo(oFocusInfo);
            }
          }
        });
      }
    }, oTable2);

    oTable2.bindRows("/");
    oTable2.placeAt('content');
  </script>
</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

// Code goes here

/* Styles go here */