TableNewRow-Editable

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>Table RowSelect Sample</title>
  <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
  <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.unified,sap.ui.table" data-sap-ui-xx-bindingSyntax="complex"></script>

  <!-- 2.) Create a UI5 Table and place it onto the page -->
  <script>
    var oButton = new sap.ui.commons.Button({
      text: "Add Row",
      style: sap.ui.commons.ButtonStyle.Emph,
      press: function() {
        var oTable = sap.ui.getCore().byId("oTable");
        var oVisibleRowCount = oTable.getVisibleRowCount()
        var oModel = sap.ui.getCore().getModel().getProperty("/modelData/employeesData");
        var oMaxSNo = oModel.slice(-1).pop().SerialNo;
        oModel.push({
          SerialNo: parseInt(oMaxSNo) + 1,
          Country: "",
          Name: "",
          Address: ""
        });
        sap.ui.getCore().getModel().setProperty("/modelData/employeesData", oModel);
        jQuery.sap.delayedCall(500, null, function() {
          oTable._scrollPageDown();
          var oNewItem = oTable.getRows()[oVisibleRowCount - 1];
          var oCells = oNewItem.getCells();
          for (var i = 0; i < oCells.length; i++) {
            oNewItem.getCells()[i].setEditable(true);
          }
        });
      }
    });

    var aData = [{
      Country: "IN",
      Name: "Anand Krishna",
      Address: "22950"
    }, {
      Country: "IN",
      Name: "Sasthy",
      Address: "22953"
    }, {
      Country: "ES",
      Name: "Sasthy",
      Address: "22954"
    }, {
      Country: "FR",
      Name: "Rajesh Sawant",
      Address: "22958"
    }, {
      Country: "FR",
      Name: "Mayank",
      Address: "22959"
    }, {
      Country: "FR",
      Name: "Vinod",
      Address: "42959"
    }];

    //Create an instance of the table control
    var oTable2 = new sap.ui.table.Table("oTable", {
      title: "Table Serial Number",
      visibleRowCount: 5,
      selectionMode: sap.ui.table.SelectionMode.Single,
      navigationMode: sap.ui.table.NavigationMode.ScrollBar,
    });

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

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

    //Create a model and bind the table rows to this model
    var model = new sap.ui.model.json.JSONModel();
    model.setData({
      modelData: {
        employeesData: {}
      }
    });
    sap.ui.getCore().setModel(model);
    for (var i = 0; i < aData.length; i++) {
      aData[i]['SerialNo'] = parseInt(i + 1);
    }
    sap.ui.getCore().getModel().setProperty("/modelData/employeesData", aData)
    oTable2.bindRows("/modelData/employeesData");

    var ovLayout = new sap.ui.layout.VerticalLayout("Layout1", {
      content: [oTable2, oButton]
    });

    ovLayout.placeAt("uiArea");
  </script>
</head>

<body class="sapUiBody">

  <!-- This is where you place the UI5 Table -->
  <div id="uiArea"></div>
</body>

</html>

// Code goes here

/* Styles go here */