How to start DT datatable with all child rows expanded? - r

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 '<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('⊕');
} else {
row.child(format(row.data())).show();
td.html('&CircleMinus;');
}
});"
))
PS: stackoverflow forced me to include more details to the question but there is nothing else to add...

Answer 1

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('⊕');
} else {
row.child(format(row.data())).show();
td.html('&CircleMinus;');
}
});
table.rows().every( function () {
this.child( format(this.data()) ).show();
} );"
)
The result: