Mobile Design - Showing Multiple Column Table

Question

We are developing an application for phone, wherein we need to show multiple columns of data on the mobile. Consider one such example below:

Commodity Name|Qty at A|Qty at B|Qty at C|Qty at D|Qty at E|
==============|========|========|========|========|========|
Sugar         |      10|     500|       -|       -|  100000|
============================================================
Rice          |     100|     100|       -|       -|  100000|
============================================================
Pulses        |     100|     100|       -|       -|  100000|

Now this table view is required to be displayed side-by-side for comparision. If we display this in a phone, then the user is required to be scroll horizontally to see the data. Now there can be more than 20 items and hence there will be vertical scroll for sure.

What is the standard way of display such data in mobile where the user can compare the data side-by-side. This application will be targeted for both Android and iOS, and be built using Appcelerator for added information.

Answer 1

Once, I did it in two different ways for Android an iOS. On Android:

1. I've created a scrollView with scrollType : 'horizontal' Then got the number of rows of the table and defined the scroll height based on that: scroll.setHeight(60*(number_of_rows+1)); //60 is the row height

2. Inside a for loop, instead of creating a table and a tableviewRow, I've just created a large view (width : 600) and added it inside the scrollView. So this will produce a quite tall and large horizontal scrollView.

3. Finally, I added this horizontal scrollView inside another scrollView, now with my device height (or just Ti.UI.FILL)

Summing up will be like: ``` var rowsArray = yourContent; var verticalScroll = Ti.UI.createScrollView({ top: 0, width: Ti.UI.FILL, height: Ti.UI.FILL });

var horizontalScroll = Ti.UI.createScrollView({
    top: 0,
    width: Ti.UI.FILL,
    scrollType : 'horizontal',
});

horizontalScroll.setHeight(60*(rowsArray.length+1)); //60 is the row height
var posY = 60;
for (var i = 0; i < rowsArray.length; i++) {
    var rowView = Ti.UI.createView({
        top: posY,
        width: 600, 
        height: 60, 
        left: 0
    });
    posY += 60;
    horizontalScroll.add(rowView);
}

verticalScroll.add(horizontalScroll);
win.add(verticalScroll);

For iOS, you can just put your table inside a scrollView ;)