First 2 repeat values on the same row - a simple example

I have some data where I want to show records about people in two columns. Even in one column, odd on the other. So like a categorized view, only rather then have each subsidiary datum on it's own row, I want two columns, so like this:

I'm using repeats for this. It's not overly complicated, but I thought it would be nice to post in case anyone wanted to see it. And this is a simple example, since I think those are important.

There may be better ways of doing this, but this is one solution. First, I take a repeat and populate it with 1 through 10 in an array. Then I iterate through that array and if the index of the array element is even, I put it in an array called "evenArray" (naturally). As you can guess, the other is "oddArray". Those arrays are each put in a sessionScope. After this, I create a new array with a single value and return that (the repeat needs to return something). I'm keeping this simple, but you could populate the arrays using a function or whatever.

Then I have a table with one row and two columns. Each column has a repeat in it. One column's repeat uses the oddArray sessionScope, the other uses the even one. There is a computed field returning the collection name of each array.

This can be expanded, of course. But this is a nice simple example of the process. I have the entire XPage below. You can pop it in and run it.

Cheers,
Brian

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:panel>
        <xp:repeat
            id="repeat1"
            rows="30"
            var="rowData">
            <xp:this.value><![CDATA[#{javascript:var headArray = [];
headArray[0] = '1';
headArray[1] = '2';
headArray[2] = '3';
headArray[3] = '4';
headArray[4] = '5';
headArray[5] = '6';
headArray[6] = '7';
headArray[7] = '8';
headArray[8] = '9';
headArray[9] = '10';

var evenArray = [];
var oddArray = [];

for(n = 0; n < headArray.length; n++){
    if (n %2 == 0){
        evenArray.push(headArray[n]);
    } else{
        oddArray.push(headArray[n]);
    }
}

sessionScope.put('evenArray', evenArray);
sessionScope.put('oddArray', oddArray);

var rtnArray=[1];

return rtnArray;}]]></xp:this.value>
            <xp:table>
                <xp:tr>
                    <xp:td>
                        <xp:repeat
                            id="repeat2"
                            rows="30"
                            value="#{sessionScope.evenArray}"
                            style="width:161.0px"
                            var="evenRowData">
                            <xp:text
                                escape="true"
                                id="computedField2"
                                value="#{javascript:evenRowData.toString();}">
                            </xp:text>
                            <xp:br></xp:br>
                        </xp:repeat>
                    </xp:td>
                    <xp:td>
                        <xp:repeat
                            id="repeat3"
                            rows="30"
                            style="width:325.0px"
                            value="#{sessionScope.oddArray}"
                            var="oddRowData">
                            <xp:text
                                escape="true"
                                id="computedField3"
                                value="#{javascript:oddRowData.toString();}">
                            </xp:text>
                            <xp:br></xp:br>
                        </xp:repeat>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:repeat>
        </xp:panel>
    </xp:view>