GitHunter0
GitHunter0

Reputation: 574

How to start DT datatable with all child rows expanded?

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 '<div style=\"background-color:#eee; padding: .5em;\"> Model: ' +
            d[0] + ', mpg: ' + d[2] + ', cyl: ' + d[3] + '</div>';
  };
  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('&oplus;');
    } else {
      row.child(format(row.data())).show();
      td.html('&CircleMinus;');
    }
  });"
))

enter image description here

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

Upvotes: 2

Views: 1061

Answers (1)

andrewJames
andrewJames

Reputation: 22012

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 '<div style=\"background-color:#eee; padding: .5em;\"> Model: ' +
            d[0] + ', mpg: ' + d[2] + ', cyl: ' + d[3] + '</div>';
  };
  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('&oplus;');
    } else {
      row.child(format(row.data())).show();
      td.html('&CircleMinus;');
    }
  });
  table.rows().every( function () { 
    this.child( format(this.data()) ).show(); 
  } );"
  )

The result:

enter image description here

Upvotes: 1

Related Questions