TableEditToggle

<!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 Model Updation</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.layout,sap.ui.table"
	data-sap-ui-xx-bindingSyntax="complex"></script>
	
	<style>
	.buttonStyle{
	  margin-top: 2%;
    margin-left: 45%;
}
	</style>

    <!-- 2.) Create a UI5 Table and place it onto the page -->
    <script>


	var aData = [
	{Country: "IN", Name: "Rahul Khanna", Address: "22950"},
	{Country: "IN", Name: "Debasis Mohanty", Address: "22953"},
	{Country: "ES", Name: "Maggie Grant", Address: "22954"},
	{Country: "FR", Name: "Andy Chun", Address: "22958"},
	{Country: "FR", Name: "Robert Anderson", Address: "22959"},
	{Country: "IN", Name: "Swetha Singh", Address: "23968"}
];

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

oTable2.addColumn(new sap.ui.table.Column({
	label: new sap.ui.commons.Label({text: "Country"}),
	template: new sap.ui.commons.TextField({editable:"{editModel>/edit}"}).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:"{editModel>/edit}"}).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:"{editModel>/edit}"}).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);
sap.ui.getCore().getModel().setProperty("/modelData/employeesData", aData);
    sap.ui.getCore().setModel(
      new sap.ui.model.json.JSONModel({
        edit:true
      }),
      'editModel'
    );
	
var oButton = new sap.ui.commons.Button({
						text:{
								path: 'editModel>/edit',
								formatter: function formatButton(title){
								return title ? 'NonEditable' : 'Editable';
									} 
								},
						style:"Emph", icon:"sap-icon://action",
						press:function(oEvent){
						var m = sap.ui.getCore().getModel('editModel');
						m.setProperty('/edit', !m.getProperty('/edit'));
						}}).addStyleClass("buttonStyle");
oTable2.bindRows("/modelData/employeesData");

var oVLayout = new sap.ui.layout.VerticalLayout({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 */