Tabulator JS table - move rows between tables - customReceiver does not work from example

Using the excellent Javascript table generating package Tabulator (http://tabulator.info/) I am trying to duplicate an example where rows are moved from one table to another.

I am trying to create a customReceiver for the receiving table. However, I can't get it to work. In my own code, the fromRow and fromTable objects are fine, but the toRow object is undefined.

In a jsfiddle, it's not working at all: https://jsfiddle.net/phojn79z/5/

var tabledata = [{
  id: 1,
  name: "Oli Bob",
  age: "12",
  col: "red",
  dob: "19/09/1972"
}, {
  id: 2,
  name: "Mary May",
  age: "22",
  col: "blue",
  dob: "14/05/1982"
}, {
  id: 3,
  name: "Christine Lobowski",
  age: "42",
  col: "green",
  dob: "22/05/1982"
}, {
  id: 4,
  name: "Brendon Philips",
  age: "125",
  col: "orange",
  dob: "01/08/1980"
}, {
  id: 5,
  name: "Margret Marmajuke",
  age: "16",
  col: "yellow",
  dob: "31/01/1999"
}, ];

 var customReceiver = function(fromRow, toRow, fromTable){
//fromRow - the row component from the sending table
//toRow - the row component from the receiving table (if available)
//fromTable - the Tabulator object for the sending table

    console.log(fromRow,toRow,fromTable);
if(toRow){
    toRow.update({"name":fromRow.getData().name});
    return true;
}

return false;
}


var table = new Tabulator("#example-table-sender", {
height:311,
layout:"fitColumns",
movableRows:true,
movableRowsConnectedTables:"#example-table-receiver",
movableRowsReceiver: "add",
movableRowsSender: "delete",
placeholder:"All Rows Moved",
data:tabledata,
columns:[
    {title:"Name", field:"name"},
],
});

 //Table to move rows to
var table = new Tabulator("#example-table-receiver", {
height:311,
layout:"fitColumns",
placeholder:"Drag Rows Here",
movableRowsReceiver: customReceiver,
data:[],
columns:[
    {title:"Name", field:"name"},
],
 });

Am I missing something?