Bootstrap Table - 'this' context in formatter

Bootstrap table - looking at issue with 'this' context not updating unless different `data-field` (believed cause, not confirmed) and workarounds. See https://github.com/wenzhixin/bootstrap-table/issues/1986

HTML

<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<table id="table">
    <thead>
    <tr>
        <th data-field="name">Project Name</th>
        <th data-field="currency">Currency</th>
        <th data-field="receivables.1" data-formatter="App.receivableCounterAny" data-monthid="1">January</th>
        <th data-field="receivables.2" data-formatter="App.receivableCounterAny" data-monthid="2">February</th>
        <th data-field="receivables.3" data-formatter="App.receivableCounterAny" data-monthid="3">March</th>
        <!--
        <th data-field="receivables" data-formatter="App.receivableCounterAny" data-monthid="4">April</th>
        <th data-field="receivables" data-formatter="App.receivableCounterAny" data-monthid="5">May</th>
        <th data-field="receivables" data-formatter="App.receivableCounterAny" data-monthid="6">June</th>
        <th data-field="receivables" data-formatter="App.receivableCounterAny" data-monthid="7">July</th>
        <th data-field="receivables" data-formatter="App.receivableCounterAny" data-monthid="8">August</th>
        <th data-field="receivables" data-formatter="App.receivableCounterAny" data-monthid="9">September</th>
        <th data-field="receivables" data-formatter="App.receivableCounterAny" data-monthid="10">October</th>
        <th data-field="receivables" data-formatter="App.receivableCounterAny" data-monthid="11">November</th>
        <th data-field="receivables" data-formatter="App.receivableCounterAny" data-monthid="12">December</th>
        -->
    </tr>
    </thead>
</table>

JavaScript

// Bootstrap table - looking at issue with 'this' context not updating unless different `data-field` (believed cause, not confirmed) and workarounds. See https://github.com/wenzhixin/bootstrap-table/issues/1986

// NOTE - this is not ideal but can use `responseHandler` to achieve similar format so that columns use unique data-field and `this` is now updated properly
//		  - obviously a workaround, at least until decide how best to fix or reaproach this issue in core code

window["App"] = {};

App.receivableCounterAny = function (value, row, index) {
  console.log(this);
  return App.receivableCounter(this.monthid, value, row, index);
}

App.receivableCounter = function (month, value, row, index) {
  var total = 0;
  
  /*, month;

	console.log('receivableCounter start',[value, row, index,total,this]);
  month = monthid.match(/month-([0-9]+)/);
  console.log('receivableCounter month #1',month);
  month = parseInt(month[1]);
  console.log('receivableCounter month #2',month);
  */
  
  $.each(value, function (key, receivable) {
    // if (receivable.month == month) {
        total += receivable.amount;
    // }
  });
  
  return total;
}

var data = [
    {
        "name": "Logo Design",
        "currency": "USD",
    },
    {
        "name": "Social Media Campaign",
        "currency": "CAD",
    },
    {
        "name": "Internal Application",
        "currency": "EUR",
    },
];

$(function () {
        // Generate 3 random receivables for each month
        for (var i in data) {
        data[i]["receivables"] = new Array();
        for (var month=1; month<=12; month++) {
        /*
        data[i]["receivables"].push({
            amount: Math.round(Math.random() * 1000),
          month: month
        },{
            amount: Math.round(Math.random() * 1000),
          month: month
        },{
            amount: Math.round(Math.random() * 1000),
          month: month
        });
        */
        data[i]["receivables"][month] = new Array();
       ...