Add alphabetic headings to listview

In the past i have added alphabetic headings to tableviews with the below code:

var titleData = listdata[i].title;
 
    if (titleData.charAt(0) !== lastChar) {
        lastChar = titleData.charAt(0);
        detailRowList.header = titleData.charAt(0);
        indexedArray.push({
            index: i,
            title: lastChar
        });
    }

Now i have migrated the tableview into a listview, and would like to add the same alphabetic headings again, but i just can't get it working.

This is the code i'm using:

// Create listsection to be populated and added to listview later
var tblTreesSection = Ti.UI.createListSection();
 
//define rowData as empty array
var rowData = [];
var lastChar = "";
 
// Loop through listdata
for(var i = 0; i < listdata.length; i++){
    rowData.push({
     // Maps data to the template
        englTitle : {text: listdata[i].title},
        latinTitle : {text: listdata[i].scientific},
    // Sets the general list data properties
         properties : {
            itemId: listdata[i].id,
                accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE,
            height: 80,
                searchableText: listdata[i]
        }
    });
    // Create Alphabetic headers
    var titleData = listdata[i].title;
    if (titleData.charAt(0) !== lastChar) {
        lastChar = titleData.charAt(0);
        rowData.headerTitle = titleData.charAt(0);
   }
}
 
listViewSection.setItems(rowData);
listView.sections = [listViewSection];

With this code i only get one listsection for the whole table, which obviously doesn't work. Is there a way to get the 'Create alphabetic headers' script working, or do i have to drop this idea all together and try a different approach? I'd be grateful for any hint into the right direction.