Grouping the Table View in Titanium Mobile

In my previous posts, you learned how to create a simple list using the Table View component of Titanium.

If you came to this post through Google or through other means, you can get the code for the previous post using the following git command.

Now, I want to show you how to group the list in that table view, given the data shown below

var data = [
	{title:'List Content 1', hasChild:true, toUrl:'window2.js'},
	{title:'List Content 2'},
	{title:'List Content 3'},
	{title:'List Content 4'}
];

By looking at the Kitchen Sink example as reference, the data can just be given a “header” attribute with the desired group’s label as value.

var data = [
	{title:'List Content 1', hasChild:true, toUrl:'window2.js',header:"Header 1"},
	{title:'List Content 2'},
	{title:'List Content 3',header:"Header 2"},
	{title:'List Content 4'}
];

This simple change will display a grouped list.

You may view the finished code through

Part 1: Getting Started with Appcelerator Titanium
Part 2: Sliding Windows with Appcelerator Titanium
Part 3: Grouping the Table View in Titanium Mobile
Part 4: Add/Delete Items in the List with Titanium Mobile
Part 5: Using SQLite Database with Titanium Mobile
Part 6: Create the Database API in Appcelerator Titanium