Custom table rows with Titanium

Custom row for TableView in Appcelerator Titanium

In this post  I will try to explain how to create custom rows for TableViews using Titanium Mobile.

If you don’t know what Titanium is about,  take a look here. I suppose you already know how to setup and start a Titanium project so I’ll show only how to create a custom row.

By default a TableView will let you create a row that can have: the left image, the title and the row type decorator set. The next code is an example of the standard data that needs to be passed to a TableView.

var RegData = [
 
{ leftImage:'es.png', title:"Spain", hasChild:true },
{ leftImage:'gb.png', title:"United Kingdom", hasChild:true },
{ leftImage:'us.png', title:"United States", hasChild:true },
{ leftImage:'fr.png', title:"France", hasChild:true }
];
 
var TheTable = Titanium.UI.createTableView({
data:RegData
});

And the result is this:

Ok, we would like to add more data to a row, maybe something like this:

This will require to build the row “by hand”. So we need to add a 2 imageViews, the flag and the trend, and  labelViews for the country and the percent . We also need to change the data array of course.

var CustomData = [
{ flag:'es.png', country:"Spain", trend:'up.png', percent:'28%' ,hasChild:true },
{ flag:'gb.png', country:"United Kingdom", trend:'down.png', percent:'-3%', hasChild:true },
{ flag:'us.png', country:"United States", trend:'up.png', percent:'8%', hasChild:true },
{ flag:'fr.png', country:"France", trend:'down.png', percent:'-40%', hasChild:true }
];

We create a data variable as an array that will hold the row objects generated.

var data=[];

then we walk through the CustomData array, create  a new row , the imageViews and labels and add them to the row.

for (var i = CustomData.length - 1; i <= 0; i--) {
var row = Titanium.UI.createTableViewRow();
 
var flag =  Titanium.UI.createImageView({
url:CustomData[i].flag,
width:32,
height:32,
left:4,
top:2
});
 
var country = Titanium.UI.createLabel({
text:CustomData[i].country,
font:{fontSize:16,fontWeight:'bold'},
width:'auto',
textAlign:'left',
top:2,
left:40,
height:16
});
 
var percent =  Titanium.UI.createLabel({
text:CustomData[i].percent,
font:{fontSize:12,fontWeight:'bold'},
width:'auto',
textAlign:'left',
bottom:0,
left:60,
height:12
});
 
var trend =  Titanium.UI.createImageView({
url:CustomData[i].trend,
width:16,
height:16,
right:10
});
 
row.add(flag);
row.add(country);
row.add(percent);
row.add(trend);
row.hasChild=CustomData[i].hasChild;
 
row.className = 'coutry_row';
 
data.push(row);
};

As you see we also add a className to the row to improve the rendering performance, as the iPhone will reuse the row template with every new data when rendering the table.

The obtained result is this:

You can download the complete Titanium project from here. You will have to create a new project in Titanium and replace the resource folder with the one in the archive.

Let me know your thoughts.

Check the Spanish version of this post:
Como crear filas personalizadas para TableViews usando Titanium Móvil

58 thoughts on “Custom row for TableView in Appcelerator Titanium”

  1. At the end if the article there is a link where you can download the whole project for Titanium. Create your own project and replace the resources folder with the one you find in archive.

  2. Thanks for this great tutorial!

    But Your code is something wrong. Your For() statement always returns false.

    Please See below code.
    ————————————————

    for (var i = CustomData.length – 1; i <= 0; i–) {

    for (var i = CustomData.length – 1; 0 <= i; i–) {

    or

    var length = CustomData.length;

    for(var i = 0;i<length;i++) {

    —————————

  3. Maybe you can provide me a pastie (pastie.org) with your code because for me is working ok. I suspect something is wrong with your CustomData declarations.

  4. another great tutorial, thanks for sharing.

    I’m trying to add an event listener for the links but I keep getting this error when I click on a row:
    [WARN] Exception in event callback. {
    expressionBeginOffset = 2110;
    expressionCaretOffset = 2119;
    expressionEndOffset = 2119;
    line = 79;
    message = “Can’t find variable: newWindow”;
    name = ReferenceError;
    sourceId = 204767424;
    sourceURL = “file://localhost/Users/xxx/Development/xxx/Resources/view.js”;
    }

    Could you please have a quick look? http://pastie.org/1543977 . Thank you!

  5. you are trying to open newWindow even if the if above is false – and so there is no newWindow. Put the open statement inside the if structure and it will work.

  6. appreciate your quick reply.

    When I move the newWindow into the ‘if’ it doesn’t do anything, nothing is shown in the debug window either. I’ve noticed if I comment out the line about the listener, “tableview.setData(data);”, the links work fine, however the rows are not populated with any of images / text / etc… Any idea where the conflict is? I have events firing on other windows fine but I cant figure this one out..

  7. You are not adding anyway the link to the row.

    Try something like this:

    var row = Titanium.UI.createTableViewRow({
    hasChild: true,
    height: ‘auto’,
    link:customData[i].link
    });

Comments are closed.