knockout.js, jquery: how to sort a list of items that appear on the UI on 3 columns

Question

I have a list of items defined in my viewmodel.js. This list of items are data-bound to a table which has 3 columns. The list of items is ordered alphabetically and the display order is from right to left eg:

AA  AB  AC
BA  BB  BC
CA

but i want to have them sorted alphabetically and displayed top down something like :

AA  BA  BC
AB  BB  CA
AC 

The current sort expression I am using is :

  items.sort(function (l, r) { return l.Name() > r.Name() ? 1 : -1 });

I calculate the rows with the following function :

var calculateRows = function() {
        var result = [], row, colLength = parseInt(columnLength(), 10);
        for (var i = 0, j = options().Options().length; i < j; i++) {
            if (i % colLength === 0) {
                if (row) {
                    result.push(row);
                }
                row = [];
            }
                row.push(options().Options()[k]);


        }

        //push the final row  
        if (row) {
            result.push(row);
        }
        return result;
    };

And the html :

 <table class="footable table-striped" data-bind="foreach: rows()">
                <tr style="width: 33%" data-bind="foreach: $data">
                <td data-bind="value : Name"> </td>
                </tr>
            </table>

Answer 1

You can use a transpose method like this one to modify your array afterwards:

Array.prototype.transpose = function () {
    var array = this;
    return array[0].map(function (col, i) {
        return array.map(function (row) {
            return row[i];
        });
    });
}

Test jsFiddle here.