How to start DT datatable with all child rows expanded?

Question

In this DT example with child rows, how to start the table with all the child rows expanded?

library(DT)
datatable(
  cbind(' ' = '⊕', mtcars), escape = -2,
  options = list(
    columnDefs = list(
      list(visible = FALSE, targets = c(0, 2, 3)),
      list(orderable = FALSE, className = 'details-control', targets = 1)
    )
  ),
  callback = JS("
  table.column(1).nodes().to$().css({cursor: 'pointer'});
  var format = function(d) {
    return ' Model: ' +
            d[0] + ', mpg: ' + d[2] + ', cyl: ' + d[3] + '';
  };
  table.on('click', 'td.details-control', function() {
    var td = $(this), row = table.row(td.closest('tr'));
    if (row.child.isShown()) {
      row.child.hide();
      td.html('⊕');
    } else {
      row.child(format(row.data())).show();
      td.html('⊖');
    }
  });"
))

PS: stackoverflow forced me to include more details to the question but there is nothing else to add...

user_12567365 · Answer

You can use your existing callback to also iterate over each row in the table. In that iteration you can create and open each child record:

table.rows().every( function () { 
  this.child( format(this.data()) ).show(); 
} );

This snippet needs to be appended to the end of your callback = JS(...) option as shown below:

  callback = JS(
    "
  table.column(1).nodes().to$().css({cursor: 'pointer'});
  var format = function(d) {
    return ' Model: ' +
            d[0] + ', mpg: ' + d[2] + ', cyl: ' + d[3] + '';
  };
  table.on('click', 'td.details-control', function() {
    var td = $(this), row = table.row(td.closest('tr'));
    if (row.child.isShown()) {
      row.child.hide();
      td.html('⊕');
    } else {
      row.child(format(row.data())).show();
      td.html('⊖');
    }
  });
  table.rows().every( function () { 
    this.child( format(this.data()) ).show(); 
  } );"
  )

The result:

How to start DT datatable with all child rows expanded?

1 Answers