<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">
        <title>Table Sort Sample</title>
        <script id="sap-ui-bootstrap" 
                type="text/javascript"
                src="https://sapui5.hana.ondemand.com/resources/sap-ui-cachebuster/sap-ui-core.js"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-libs="sap.ui.commons,sap.ui.table"
                data-sap-ui-xx-bindingSyntax="complex"
        >
        </script>
		
		<style>
		.buttonStyle{
		    margin-left: 47%;
		}
		</style>

        <script>
	
	var dataObject = [
		{
			"Region": "EMEA",
			"Region_ID": "1",
			"Country": "Germany",
			"Country_ID": "1",
			"Location": "Berlin",
			"Location_ID": "1"
		},
		{
			"Region": "APJ",
			"Region_ID": "2",
			"Country": "Japan",
			"Country_ID": "12",
			"Location": "Fukuoka",
			"Location_ID": "48"
		},
		{
			"Region": "AMER",
			"Region_ID": "3",
			"Country": "USA",
			"Country_ID": "36",
			"Location": "Chicago",
			"Location_ID": "99"
		},
		{
			"Region": "APJ",
			"Region_ID": "2",
			"Country": "India",
			"Country_ID": "65",
			"Location": "Bangalore",
			"Location_ID": "458"
		},
		{
			"Region": "EMEA",
			"Region_ID": "1",
			"Country": "France",
			"Country_ID": "35",
			"Location": "Paris",
			"Location_ID": "999"
		},
		{
			"Region": "AMER",
			"Region_ID": "3",
			"Country": "Brasil",
			"Country_ID": "47",
			"Location": "Rio de Janairo",
			"Location_ID": "6"
		}
	];
	
	var model = new sap.ui.model.json.JSONModel();
		model.setData({
			modelData: {
			locationData : []
			}
			});
		sap.ui.getCore().setModel(model);
		sap.ui.getCore().getModel().setProperty("/modelData/locationData", dataObject);
	
	//Create an instance of the table control
var oTable2 = new sap.ui.table.Table("oTable",{
	title: "Table Multiple Columns Sort Example",
	visibleRowCount: 6,
	selectionMode: sap.ui.table.SelectionMode.Single
});

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

oTable2.addColumn(new sap.ui.table.Column({
	label: new sap.ui.commons.Label({text: "Region_ID"}),
	template: new sap.ui.commons.TextView().bindProperty("text", "Region_ID"),
	sortProperty:"Region_ID",
	filterProperty:"Region_ID",
	width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
	label: new sap.ui.commons.Label({text: "Country"}),
	template: new sap.ui.commons.TextView().bindProperty("text", "Country"),
	sortProperty:"Country",
	filterProperty:"Country",
	width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
	label: new sap.ui.commons.Label({text: "Country_ID"}),
	template: new sap.ui.commons.TextView().bindProperty("text", "Country_ID"),
	sortProperty:"Country_ID",
	filterProperty:"Country_ID",
	width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
	label: new sap.ui.commons.Label({text: "Location"}),
	template: new sap.ui.commons.TextView().bindProperty("text", "Location"),
	sortProperty:"Region",
	filterProperty:"Region",
	width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
	label: new sap.ui.commons.Label({text: "Location_ID"}),
	template: new sap.ui.commons.TextView().bindProperty("text", "Location_ID"),
	sortProperty:"Region_ID",
	filterProperty:"Region_ID",
	width: "200px"
}));
oTable2.bindRows("/modelData/locationData");

var oButton = new sap.ui.commons.Button({text:"Sort Table", icon:"sap-icon://sort", style:"Emph",
								press:function(oEvent){
									var oRegionSort = oTable2.getColumns()[0].sort(false);
									var oCountrySort = oTable2.getColumns()[2].sort(false);
									var oLocationSort = oTable2.getColumns()[4].sort(false);
									oTable2.sort([oRegionSort,oCountrySort,oLocationSort]);
								}}).addStyleClass("buttonStyle");

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

     ovLayout.placeAt("content");
        </script>
    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>
// Code goes here

/* Styles go here */