dennisseah/gist:9e231fd49893a46e5c70

## gistfile1.js
<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script id="sap-ui-bootstrap"
    type="text/javascript"
    data-sap-ui-libs="sap.m"
    data-sap-ui-theme="sap_bluecrystal"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>

<script>
jQuery(function() {
    sap.m.Table.extend('ColumnClickableTable', {
        metadata: {
            events : {
                columnPress: {}
            }
        },

        renderer: function(oRm, oControl) {
            sap.m.TableRenderer.render(oRm, oControl);
        },

        onAfterRendering: function() {
            var that = this;

            function colClick(idx, col) {
                col.css('cursor', 'pointer');
                col.children().each(function() {
                    $(this).css('cursor', 'pointer');
                });

                col.click(function() {
                    that.fireColumnPress({'columnIndex': idx});
                });
            }

            sap.m.Table.prototype.onAfterRendering.apply(this, arguments);
            var count = 0;
            this.$().find('th.sapMListTblCell').each(function() {
                colClick(count++, $(this));
            });
        }
    });

    var oTable = new ColumnClickableTable({
        mode: sap.m.ListMode.None,
        columns: [
            new sap.m.Column({
                header : new sap.m.Label({
                    text : "Last Name"
                })
            }),
            new sap.m.Column({
                header : new sap.m.Label({
                    text : "First Name"
                })
           })
        ],
        items: {
            path: "/",
            template: new sap.m.ColumnListItem({
                cells : [
                    new sap.m.Text({text : "{lastName}"}),
                    new sap.m.Text({text : "{firstName}"})
                ]
            })
        },
        columnPress: function(e) {
            console.log(e.getParameter('columnIndex'));
        }
    });

    var oModel = new sap.ui.model.json.JSONModel();
    var users = [];
    for (var i = 0; i < 4; i++) {
        users.push({lastName: 'lastName' + i,  firstName: 'firstName' + i});
    }
    oModel.setData(users);

    oTable.setModel(oModel);
    oTable.placeAt("content");
});
</script>

</head>
<body class="sapUiBody">
    <div id="content"></div>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>

	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<script id="sap-ui-bootstrap"
	type="text/javascript"
	data-sap-ui-libs="sap.m"
	data-sap-ui-theme="sap_bluecrystal"
	src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
	</script>

	<script>
	jQuery(function() {
	sap.m.Table.extend('ColumnClickableTable', {
	metadata: {
	events : {
	columnPress: {}
	}
	},

	renderer: function(oRm, oControl) {
	sap.m.TableRenderer.render(oRm, oControl);
	},

	onAfterRendering: function() {
	var that = this;

	function colClick(idx, col) {
	col.css('cursor', 'pointer');
	col.children().each(function() {
	$(this).css('cursor', 'pointer');
	});

	col.click(function() {
	that.fireColumnPress({'columnIndex': idx});
	});
	}

	sap.m.Table.prototype.onAfterRendering.apply(this, arguments);
	var count = 0;
	this.$().find('th.sapMListTblCell').each(function() {
	colClick(count++, $(this));
	});
	}
	});

	var oTable = new ColumnClickableTable({
	mode: sap.m.ListMode.None,
	columns: [
	new sap.m.Column({
	header : new sap.m.Label({
	text : "Last Name"
	})
	}),
	new sap.m.Column({
	header : new sap.m.Label({
	text : "First Name"
	})
	})
	],
	items: {
	path: "/",
	template: new sap.m.ColumnListItem({
	cells : [
	new sap.m.Text({text : "{lastName}"}),
	new sap.m.Text({text : "{firstName}"})
	]
	})
	},
	columnPress: function(e) {
	console.log(e.getParameter('columnIndex'));
	}
	});

	var oModel = new sap.ui.model.json.JSONModel();
	var users = [];
	for (var i = 0; i < 4; i++) {
	users.push({lastName: 'lastName' + i, firstName: 'firstName' + i});
	}
	oModel.setData(users);

	oTable.setModel(oModel);
	oTable.placeAt("content");
	});
	</script>

	</head>
	<body class="sapUiBody">
	<div id="content"></div>
	</body>
	</html>