Get the right column of letters on a table view

TableViewIndex.js

/* Ever wondered how to get the nice column of letters in the right side
 * of the table view?
 * 
 * Here is an example:
 * 	1. We take a list of names from a json file
 * 	2. We need to sort them by either first name or last name
 * 	3. We need to create a row header once in a while, when the first letter changes
 * 	4. We need to create a table index
 * 
 */
 
// function taken from:
// http://stackoverflow.com/questions/979256/how-to-sort-a-json-array
var sort_by = function(field, reverse, primer){
	reverse = (reverse) ? -1 : 1;
	return function(a,b){
		a = a[field];
		b = b[field];
		if (typeof(primer) != 'undefined'){
			a = primer(a);
			b = primer(b);
		}
		if (a<b){ return reverse * -1;}
		if (a>b){ return reverse * 1;}
		return 0;
	};
};
 
// create the window
var win = Ti.UI.createWindow({
	title:'List of Names'
});
// this is the url containing 415 random names or people
var url = 'https://s3.amazonaws.com/pedruqui/tests/listofnames.json';
// create the table
var table = Ti.UI.createTableView({
	search:Ti.UI.createSearchBar(),
	searchHidden:true
});
 
table.addEventListener('indexclick', function (e) {
	if(e.index == -1) {
		table.setContentOffset({x:0, y:0});
	}
})
 
// add the table to the window
win.add(table);
// open the window
win.open({modal:true})
 
//================================================================
 
// get the list of names from a json file
var xhr = Ti.Network.createHTTPClient();
xhr.onload = function(){
	// get the json and extract the name array within
	var list = JSON.parse(this.responseText).name;
	// sort by firstname
	list.sort(sort_by('firstname',false));
 
	// this is where the table rows will live
	var tableData = [];
	// this is to set a header on the rows when the first letter on the name changes
	var header = '';
	// this is for the index of the table view
	var index = [];
	// add the search icon to the table index
    index.push({title:Ti.UI.iOS.TABLEVIEW_INDEX_SEARCH, index: -1});

	for(var i=0;i<list.length;i++){
 
		// declare the rows title
		var rowTitle = list[i].firstname + ' ' + list[i].lastname;
 
		// create the rows
		var row = Ti.UI.createTableViewRow({
			title:rowTitle,
			hasChild:true,
		});
 
		// magic... set the header on the rows and create the index for the table
		if (header != rowTitle.substr(0,1)){
			header = rowTitle.substr(0,1);
			// set the header on the specific row
			row.header = header;
			// populate the index array
			index.push({title:header,index:i});
		}
		// add the row to it's array
		tableData[i] = row;
 
	}
	// when loop is over add the rows to the table
	table.data = tableData;
	// and the index to the table
	table.index = index;
	table.addEventListener('click', function(e){
		alert(e.index);
	});
};
xhr.onerror = function(){
	alert(this.responseText);
};
xhr.open('GET',url);
xhr.send();