Amazon.com Widgets

Agile Otaku

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.

$ git clone git@github.com:HugeAim/titanium-list-app.git
$ git checkout part2

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

$ git checkout part3

Comments