Creating TableView with multiple sections and section headers

If you open your settings in iPod/iPhone, the view you will see over there is a perfect example of TableView with multiple section. There each section contains grouped table rows with different items. Now you can easily create a similar one in Titanium. Check out the following code

var win = Ti.UI.currentWindow;
var view = Titanium.UI.createView({
	backgroundColor: "#FFFEEE",
	top:0
});
var section1 = Titanium.UI.createTableViewSection({
	headerTitle:"Section Header One"
});
var section2 = Titanium.UI.createTableViewSection({
	headerTitle:"Section Header Two"
});
var data = [];
for(i=1;i<4;i++){
	data[i] = Ti.UI.createTableViewRow({
		title:"Test Row "+i,
		height:40
	});
	section1.add(data[i]);
};
for(i=4;i<8;i++){
	data[i] = Ti.UI.createTableViewRow({
		title:"Test Row "+i,
		height:40
	});
	section2.add(data[i]);
};
var table = Ti.UI.createTableView({
	data:[section1, section2],
    style: Ti.UI.iPhone.TableViewStyle.GROUPED
});
view.add(table);
win.add(view);

And here is the output

TableView with Sections

About these ads