Data is not correct while editing cells after moving columns in Handsontable

I was testing one of the fiddles of handsontable and found the issue while moving columns. Please go to the following fiddle and perform the mentioned steps. http://jsfiddle.net/5u5vczcg/

var hot = new Handsontable(container, {
  data: financeData,
  colHeaders: ["Price", "Date", "1D Chg", "YTD Chg", "Vol BTC"],
  rowHeaders: true,
  stretchH: 'all',
  sortIndicator: true,
  columnSorting: true,
  contextMenu: true,
  manualColumnMove : true,
  columns: [
    {type: 'numeric', format: '$0,0.00'},
    {type: 'date', dateFormat: 'DD/MM/YYYY', correctFormat: true},
    {type: 'numeric', format: '0.00%'},
    {type: 'numeric', format: '0.00%'},
    {type: 'numeric', format: '0.00'}
  ]
});

Move the column Price in place of date. Double Click on any price cell and you will see that the value in cell is of date only. Also when you double click on date cells they will also not displaying data correctly. Could you please check and resolve.

Solution

What your facing on this is supposed to be a pretty old fixed issue. After several test/research, I have indeed the same behavior on my project if I active the manualColumnMove option.

So what I am proposing to you is to pick one of these two solutions :

Re-open the issue for the recent version of Handsontable on their git.
Use the older version and the workaround I did for you (version 0.15.0) :

Your JS Fiddle uptaded

I think you can start with that and get the idea of how to custom your Handsontable. For your case, what I did is to update the two modified column with the event 'afterColumnMove' :

hot.addHook('afterColumnMove', function(sourceIndex, targetIndex) {
  var
  sourceValues = hot.getData(0,sourceIndex,hot.getData().length,sourceIndex),
  sourceProperties =hot.getSettings().columns[sourceIndex],
  sourceHeader=hot.getSettings().colHeaders[sourceIndex],
  targetValues = hot.getData(0,targetIndex,hot.getData().length,targetIndex),
  targetProperties =hot.getSettings().columns[targetIndex],
  targetHeader=hot.getSettings().colHeaders[targetIndex],

  newColumns=hot.getSettings().columns,
  newHeaders=hot.getSettings().colHeaders;

  newHeaders[sourceIndex]=targetHeader;
  newHeaders[targetIndex]=sourceHeader;
  newColumns[sourceIndex]=targetProperties;
  newColumns[targetIndex]=sourceProperties;

  hot.updateSettings({columns:newColumns,colHeaders:newHeaders});
  hot.populateFromArray(0,sourceIndex,sourceValues,hot.getData().length,sourceIndex);
  hot.populateFromArray(0,targetIndex,targetValues,hot.getData().length,targetIndex);
});

There is however a third option :

Use something else. Depending of your budget, the Editor version of DataTables is IMHO the best thing you can use where Handsontable, as good looking as it can be, contain many remaining bugs when you tried to edit your data & use other function. (This issue is the perfect example).