Jsgrid Subgrid - дочерняя сетка

Question

Я работаю над JSGrid и пытаюсь создать вспомогательную сетку при щелчке строки. Все в порядке, просто подсетка не выравнивается по полной строке.

JS Сценарий

function buildTable() {
  data1 = [{
    "a": "Otto Clay",
    "b": "25"
  }, {
    "a": "Otto Clay",
    "b": "25"
  }]
   data2 = [{
    "a": "Oca",
    "b": "25"
  }, {
    "a": "asd",
    "b": "25"
  }]
  col = [{
    name: "a",
    type: "text"
  }, {
    name: "b",
    type: "text"
  }]
  $("#table").jsGrid({
    width: "100%",
    height: "auto",
    editing: false,

    data: data1,
    fields: col,

    rowRenderer: function(item) {
      var row = $("<tr>");
      var addressesGrid = $('<tr>').hide();
      addressesGrid.jsGrid({
        width: "100%",
        height: "auto",
        data: data2,
        fields: col
      })


      for(let key in item){
        if(item.hasOwnProperty(key)){
          var cell1 = $("<td>").addClass("jsgrid-cell").append(item[key])
          row.append(cell1)
        }
      }
      row.click(function() {
        addressesGrid.toggle();
      })
      return row.add(addressesGrid);
    }
  });
}
buildTable()

здесь выводится

однако я хочу, чтобы подсетка полностью покрывала столбцы родительской строки.

здесь работает та же скрипка

https://jsfiddle.net/yx1vbn7e/