title: Collapsible Datatable in Shiny with Parent/Child relation
body: <p>I have a requirement to create a collapsible datatable using shiny. The code is working when run locally but not on the shiny-server. I get a error saying "DataTables warning: table id=DataTables_Table_0 - Error in <code>[&lt;-.data.frame</code>(<code>*tmp*</code>,,j,value = list(list(structure(list(: replacement element 2 has 3 rows, need 10"</p>
  
  <p>I'm currently using data.table package which is 1.10.4-3 version</p>
  
  <p>Code:</p>
  
  <pre><code>       colnames(selected_df_final) &lt;- c('tcluster_id','TIME FIRST RCVD','ALERT NAME', 'NODE ID', 'DESCRIPTION', 'MANAGER CLASS')
  
        mtcars_dt = data.table(selected_df_final)
        setkey(mtcars_dt, tcluster_id)
  
        cyl_dt = unique(mtcars_dt[, list(tcluster_id)])
        setkey(cyl_dt, tcluster_id)
  
        mtcars_dt = 
          mtcars_dt[, list("_details" = list(purrr::transpose(.SD))), by = list(tcluster_id)]
        mtcars_dt[, ' ' := '&amp;oplus;']
  
        cyl_dt = merge(cyl_dt, mtcars_dt, all.x = TRUE )
        setcolorder(cyl_dt, c(length(cyl_dt),c(1:(length(cyl_dt) - 1))))
  
        ## the callback
        ## the callback
        callback_js = JS(
          "table.column(1).nodes().to$().css({cursor: 'pointer'});",
          "",
          "// make the table header of the nested table",
          "var format = function(d, childId){",
          "  if(d != null){",
          "    var html = ", 
          "      '&lt;table class=\"display compact hover\" id=\"' + childId + '\"&gt;&lt;thead&gt;&lt;tr&gt;';",
          "    for (var key in d[d.length-1][0]) {",
          "      html += '&lt;th&gt;' + key + '&lt;/th&gt;';",
          "    }",
          "    html += '&lt;/tr&gt;&lt;/thead&gt;&lt;/table&gt;'",
          "    return html;",
          "  } else {",
          "    return '';",
          "  }",
          "};",
          "",
          "// row callback to style the rows of the child tables",
          "var rowCallback = function(row, dat, displayNum, index){",
          "  if($(row).hasClass('odd')){",
          "    $(row).css('background-color', 'papayawhip');",
          "    $(row).hover(function(){",
          "      $(this).css('background-color', '#E6FF99');",
          "    }, function() {",
          "      $(this).css('background-color', 'papayawhip');",
          "    });",
          "  } else {",
          "    $(row).css('background-color', 'lemonchiffon');",
          "    $(row).hover(function(){",
          "      $(this).css('background-color', '#DDFF75');",
          "    }, function() {",
          "      $(this).css('background-color', 'lemonchiffon');",
          "    });",
          "  }",
          "};",
          "",
          "// header callback to style the header of the child tables",
          "var headerCallback = function(thead, data, start, end, display){",
          "  $('th', thead).css({",
          "    'border-top': '3px solid indigo',", 
          "    'color': 'indigo',",
          "    'background-color': '#fadadd'",
          "  });",
          "};",
          "",
          "// make the datatable",
          "var format_datatable = function(d, childId){",
          "  var dataset = [];",
          "  var n = d.length - 1;",
          "  for(var i = 0; i &lt; d[n].length; i++){",
          "    var datarow = $.map(d[n][i], function (value, index) {",
          "      return [value];",
          "    });",
          "    dataset.push(datarow);",
          "  }",
          "  var id = 'table#' + childId;",
          "  if (Object.keys(d[n][0]).indexOf('_details') === -1) {",
          "    var subtable = $(id).DataTable({",
          "                 'data': dataset,",
          "                 'autoWidth': true,",
          "                 'deferRender': true,",
          "                 'info': false,",
          "                 'lengthChange': false,",
          "                 'ordering': d[n].length &gt; 1,",
          "                 'order': [],",
          "                 'paging': false,",
          "                 'scrollX': false,",
          "                 'scrollY': false,",
          "                 'searching': false,",
          "                 'sortClasses': false,",
          "                 'rowCallback': rowCallback,",
          "                 'headerCallback': headerCallback,",
          "                 'columnDefs': [{targets: '_all', className: 'dt-center'}]",
          "               });",
          "  } else {",
          "    var subtable = $(id).DataTable({",
          "            'data': dataset,",
          "            'autoWidth': true,",
          "            'deferRender': true,",
          "            'info': false,",
          "            'lengthChange': false,",
          "            'ordering': d[n].length &gt; 1,",
          "            'order': [],",
          "            'paging': false,",
          "            'scrollX': false,",
          "            'scrollY': false,",
          "            'searching': false,",
          "            'sortClasses': false,",
          "            'rowCallback': rowCallback,",
          "            'headerCallback': headerCallback,",
          "            'columnDefs': [", 
          "              {targets: -1, visible: false},", 
          "              {targets: 0, orderable: false, className: 'details-control'},", 
          "              {targets: '_all', className: 'dt-center'}",
          "             ]",
          "          }).column(0).nodes().to$().css({cursor: 'pointer'});",
          "  }",
          "};",
          "",
          "// display the child table on click",
          "table.on('click', 'td.details-control', function(){",
          "  var tbl = $(this).closest('table'),",
          "      tblId = tbl.attr('id'),",
          "      td = $(this),",
          "      row = $(tbl).DataTable().row(td.closest('tr')),",
          "      rowIdx = row.index();",
          "  if(row.child.isShown()){",
          "    row.child.hide();",
          "    td.html('&amp;oplus;');",
          "  } else {",
          "    var childId = tblId + '-child-' + rowIdx;",
          "    row.child(format(row.data(), childId)).show();",
          "    td.html('&amp;CircleMinus;');",
          "    format_datatable(row.data(), childId);",
          "  }",
          "});")
  
        ## datatable
        datatable(cyl_dt, callback = callback_js, escape = -2,
                  options = list(
                    columnDefs = list(
                      list(visible = FALSE, targets = ncol(cyl_dt)),
                      list(orderable = FALSE, className = 'details-control', targets = 1),
                      list(className = "dt-center", targets = "_all")
                    )
                  ))
  </code></pre>