Sort "handsontable" and then read data from table

I want to be able to sort the mobile link and then read the data back from the table. I have combined this code which works, but it looks like there is a better way to sort the data on the screen and then be able to retrieve the data in sorted order.

This javascript plugin seems to be optimized for fast screen rendering. "Only the table view is sorted. The data source remains in its original order." For sorting both the table view and the data source to sort, it seems like you need to do both, or the data source and then reapply.

links: http://jsfiddle.net/itp99/paokya7y/6/

The documentation assumes that we are using the sort and render function, but then we still have to deal with the sort order problem.

Documentation: https://github.com/handsontable/jquery-handsontable/wiki/Understanding-column-sorting-plugin http://handsontable.com/demo/sorting.html

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="../jquery/jquery.js" type="text/javascript"></script>     
    <script src="../handsontable/dist/jquery.handsontable.full.js"></script>
    <link rel="stylesheet" media="screen" href="../handsontable/dist/jquery.handsontable.full.css">
    <script type="text/javascript">


    $( document ).ready(function() {

        var sortCol = 0;
        var mySortDirection;

        var myArrayOfArrays = [         
            [66,'AA',1],
            [55,'BB',3],
            [44,'CC',2]
        ];

        // ----------------------------------------------------
        // HandsTable Setup
        // ----------------------------------------------------
        $('#exampleGrid').handsontable({
            data: myArrayOfArrays,
            minSpareRows: 1,
            colHeaders: true,
            contextMenu: true,          
            columnSorting: true,

            // use special listener to get column number, then sort underlying array as this is not default behaviour.          
            afterOnCellMouseDown: function (changes, source) {
                if (source['row'] === -1) { 
                    sortCol = source['col'];                    
                    // get current sort direction
                    mySortDirection =  sortDirection($('#exampleGrid').handsontable('getInstance'));
                    var myTableData = $('#exampleGrid').handsontable('getData');                    
                    // perform sort with custome callback
                    myArrayOfArrays = myArrayOfArrays.sort(fnSortingFunction);
                    // $('#exampleGrid').handsontable('render'); 
                    // display content of original array back to to screen
                    $('#textOut').html("");
                    fnShowArray(myArrayOfArrays);
                }
            }
        });  // end handsontable definition


        // ----------------------------------------------------
        // Sort function - callback
        // ----------------------------------------------------
        function fnSortingFunction(a,b) {           
            if (mySortDirection === 'Ascending'){
                if (a[sortCol] < b[sortCol]) return -1;
                if (a[sortCol] > b[sortCol]) return 1;
            }
            else{
                if (a[sortCol] < b[sortCol]) return 1;
                if (a[sortCol] > b[sortCol]) return -1;         
            }
            return 0;
        }   

        // ----------------------------------------------------
        // Determine which way to sort, TO DO: fix bugs?
        // ----------------------------------------------------
        function sortDirection(thisTable){      
            if (thisTable.sortingEnabled && typeof thisTable.sortColumn != 'undefined') {
                //if sortOrder === false, the order is descending, so make it ascending
                if(thisTable.sortOrder === false){ 
                    thisTable.sortOrder = true;
                    return "Ascending";
                }
                else{
                    thisTable.sortOrder = false;
                    return "Descending";
                }
            }
            else{               
                thisTable.sortOrder = true;
                return "Ascending";
            }
        };

        // ----------------------------------------------------
        // Show content of array back to Screen
        // ----------------------------------------------------
        function fnShowArray(myArrayofArrays){          
            $('#textOut').append("<br/><b>Dump Table Data: </b><br/>");
            $.each( myArrayofArrays, function( index1, myRow ) {                                            
                $.each( myRow, function( index2, myCell ) {                                         
                    $('#textOut').append(myCell + " - " );
                });
                $('#textOut').append("<br/>");
            });
        };

    }) // end jquery

</script>   

<div id="exampleGrid" class="dataTable"></div>
<div id="textOut" ></div>