HandsonTable - Save Rearranged Column and Row Order

I am new to HandsOnTable

I have a page that loads data from a MySQL database table into a grid. I also have a function that saves any changed data back to the database when a "saved" button is clicked. This si working fine until I add the ability to re-arrange columns and rows. If I drag around the columns or rows, the data is still saved, but the re-arranged order is lost.

For example below:

Current Grid:

FirstName | MI | Lastname | City
----------------------------------------
John      |    | Smith    | Los Angeles
----------------------------------------
Joe       | Q  | Public   | New Year    

After dragging City to be the first column, I expect this:

City         |  FirstName | MI | Lastname 
----------------------------------------
Los Angeles  |  John      |    | Smith    
----------------------------------------
New Year     |  Joe       | Q  | Public   

Actual results:

City         |  FirstName        | MI     | Lastname |   
--------------------------------------------------------
Smith        |  Los Angeles      | John   | Smith    |  
--------------------------------------------------------
Public       |  New Year         |  Joe   | Q        | Public    

Code:

//Create HOT placeholder table
var placeholder = [
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""]
]; 
var container = document.getElementById('hot_container');
var hot = new Handsontable(container, 
{
    startRows: 8,
    startCols: 8,
    minRows: 8,
    minCols: 8,
    rowHeaders: true,
    colHeaders: true,
    renderAllRows: true,
    filters: true,
    dropdownMenu: true,
    persistentState : true,
    manualColumnResize: true,
    manualRowResize: true,
    manualColumnMove: true,
    manualRowMove: true,
    colHeaders: ["First Name", "Mi", "Last Name", "City"]
});     

//Replace placeholder with existing data if available
loadContent(script);

//Ajax call to retrieve table data from the database and load into HOT table
function loadContent(script)
{
    //alert("here!");

    $.ajax(
    {
        url: script,
        dataType: 'json',
        asynch: false,
        success: function(result)
        {

            //Set up empty array to hold table cell values later
            var table_array = [];   


            //These are all of the cell values in string form
            arr = result.split('],');


            //Convert cell string to multidimensional array
            var i = 0;
            $.each(arr, function( key, value ) 
            {
                //strip out brackets and quotes
                value = value.replace("[[", "");
                value = value.replace("[", "");
                value = value.replace("]]", "");
                value = value.replace("]", "");
                value = value.replace('"', "");

                //Cycle through each value and split at the comma to get subvalues
                //And then iterate through each subvalue and add to array
                table_array[i] = [];
                var v = value.split(",");
                $.each(v, function( key, value )
                {
                    value = value.replace('"', '');
                    value = value.replace("'", '');
                    if(value == '"')
                        value = null;

                    table_array[i][key] = value;
                });

                //Increment counter
                i = i+1;
            }); 

            //alert(table_array);
            hot.loadData(table_array);
        }

    }); 
}


//When save button is clicked, save table changes
$("#save_tracker").click(function()
{       
    //URL for ajax call
    var script = [url goes here]
    //Get existing content
    var data = hot.getData();


    //Ajax call to save data to database
    $.ajax(
    {
        type: 'POST',
        url: script,
        data: {table: JSON.stringify(data)},
        success: function(result){
            var response = result.response;
            //alert(result);
            //alert(response);
        }
    }); 
});

Data in the database is saved in a stringified version of an array. Example: [["abc","def","xyz"],["kkk","hhh",""]]

I am reviewing the documentation. I think this can be accomplished with an onchange hook, but I'm still not clear. Any help would be greatly appreciated.

1. Add a property 'position' to your entity that will be used to store the entity's order.
2. Add a column for position to handsontable. To make it not visible use hiddenColumns setting.
3. Before saving data to server, update entities position:

    for (var rowIdx = 0; rowIdx < hot.getData().length; rowIdx++)
    {
      hot.setSourceDataAtCell(hot.toPhysicalRow(rowIdx), 'position', rowIdx + 1);
    }