Подсетка в jsgrid

Question

Я пытаюсь показать историю данных в jsgrid в соответствии с запросом здесь .

 $("#jsGrid").jsGrid({
   ...
   rowRenderer: function(item) {
        var row = $("<tr>");
        var historyGrid = $('<tr>').addClass('nested-grid').hide();
                historyGrid.jsGrid({
                    width: "100%",
                    height: "auto",
                    editing: false,
                    data: [{"a":"d1","b": "d2"},{"a":"d3","b":"d4"},{"a":"d5","b":"d6"}],
                    heading: false,
                    fields: [{ name: "a", type: "text"}, {name: "b",type: "text"}]
                })
                var items= Object.keys(item);
                items.forEach(function(key){
                    if(key!=items[items.length-1]) {
                        var cell = $("<td>").addClass("jsgrid-cell").append(item[key]);//line 1
                        row.append(cell);
                    }
                });
                row.click(function () {
                    historyGrid.toggle();
                })
                row.append(historyGrid);    
                return row.add(historyGrid);
        }
});

История выглядит так, как показано ниже. Я хочу отображать таким образом, чтобы он охватывал всю пустую (строку) область.

если я изменю его tr на td в строке 1, он будет выглядеть следующим образом

Любая помощь?