Table

<!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 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 button and place it onto the page -->
  <script>
    var trafficLights = {
      "options": [{
        "Key": "",
        "Value": "Please Select..."
      }, {
        "Key": "Red",
        "Value": "Red"
      }, {
        "Key": "Green",
        "Value": "Green"
      }]
    };

    //Create a model and bind the table rows to this model
    var model = new sap.ui.model.json.JSONModel();
    model.setData(trafficLights.options);
    sap.ui.getCore().setModel(model);
    sap.ui.getCore().getModel().setProperty("/tableRow", []);

    var oNewButton = new sap.ui.commons.Button({
      text: "Add",
      icon: "sap-icon://add",
      style: "Accept",
      press: function(oEvent) {
        var oModel = sap.ui.getCore().getModel().getProperty("/tableRow");
        var oNewObject = [{
          "Customer": "",
          "Country": "",
          "Name": "",
          "Address": "",
          "Rating": ""
        },
        {
          "Customer": "",
          "Country": "",
          "Name": "",
          "Address": "",
          "Rating": ""
        },
        {
          "Customer": "",
          "Country": "",
          "Name": "",
          "Address": "",
          "Rating": ""
        },
        {
          "Customer": "",
          "Country": "",
          "Name": "",
          "Address": "",
          "Rating": ""
        },
        {
          "Customer": "",
          "Country": "",
          "Name": "",
          "Address": "",
          "Rating": ""
        }];
        for(var i=0;o<oNewObject.length;i++){
          oModel.push(oNewObject);
        }
        var oModel = sap.ui.getCore().getModel().setProperty("/tableRow", oModel);
      }
    });
    var oSaveButton = new sap.ui.commons.Button({
      text: "Save",
      icon: "sap-icon://action",
      style: "Emph",
      press: function(oEvent) {
        var oModel = sap.ui.getCore().getModel().getProperty("/tableRow");
        alert(JSON.stringify(oModel));
      }
    });
    var oItemTemplate = new sap.ui.core.ListItem({
      text: "{Value}",
      key: "{Key}"
    });
    //Create an instance of the table control
    var oTable2 = new sap.ui.table.Table("oTable", {
      visibleRowCount: 7,
      selectionBehavior: "Row",
      selectionMode: "MultiToggle",
      toolbar: new sap.ui.commons.Toolbar({
        rightItems: [oNewButton, oSaveButton]
      }),
      navigationMode: "Paginator"
    });

    //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"
    }));


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

<body class="sapUiBody">

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

</html>

// Code goes here

/* Styles go here */