Tying changes made in handsontable to another value in the same row in handsontable

I am using handsontable to facilitate changes to a large table, through a web browser. the catch is that the changes need to be tied to a unique ID, like a primary ID in case of RDBMS. for the data in question/example/code, custId is as good as a primary key or unique identifier.

How do i tie the changes: values in the array changes: to the custId..?

It looks like i am trying to call a function on hot5, even as hot5 is being rendered. [looks improbable, and is possibly the root cause] which is why getchangedPin2 returns null, which brings me to the second part pf the question is there a different way to achieve this..?

$(document).ready(function () {
  container = document.getElementById('example');
  hot5 = new Handsontable(container, {
    data: request,
	dataSchema: {custID: null, areaCode: null, pinNo: null, importantStatus: null, subAreaCode: null},
    colHeaders:  ['custID', 'areaCode', 'pinNo', 'importantStatus', 'subAreaCode'],
    columns: [

      { data: 'custID'},
      { data: 'areaCode'},
      { data: 'pinNo'},
      { data: 'importantStatus'},
      { data: 'subAreaCode'}
	  
	    ],

  afterChange: function (changes, source) {
	    if (source=== 'loadData') {
	        return;
	    }
	    showValInConsole(changes);
	    console.log("the changes "+ getchangedpinNo2(changes[0],'custID'));
	  },
    columnSorting: true,
    minSpareRows: 1
  });
  
    var showValInConsole = function(changes){
	    var rowIndex = changes[0];
	    var col = changes[1];
	    var oldCellValue = changes[2];
	    var newCellValue = changes[3];
	    var row_ref = getchangedPin2(changes[0],'custID');

	   	    
	    console.log(rowIndex + " " + col + " "+ oldCellValue + " "+ newCellValue + " " +getchangedPin2(rowIndex,'custID') );
  };
  
  var getchangedPin2 = function(row, col){
	  var urnChanged2 = hot5.getDataAtRowProp(row, col);
	  return urnChanged2;
  }; 
  
  });

<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet"/>
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test1</title>
<meta charset="ISO-8859-1">
    
    <script src="js/handsontable.full.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" media="screen" href="css/handsontable.full.css">
</head>
<body>
 <div id="hoTable"></div>
<input id="SubmitButton" type="button" value="Submit" />

</body>
</html>

Note : unable to add handsontable.full.min.css and handsontable.full.js

Solution

This SO question has an answer which explains your situation. In summary, you can read the documentation here to understand the sorting plugin used by Handsontable. It makes use of what they call logicalIndex since the data array is never mutated; instead, they keep a second data structure with references to physicalIndex-es.

It all boils down to the following line of code:

physicalIndex = instance.sortIndex[logicalIndex][0];

Where your instance should be the Handson instance, and logicalIndex should be your changes[0][0].