Child tables with datatables (expand/collapse) - r

Question

I like to build a datatable with a Childtable for example with this data:
test = data.table(c(375, 789, 72, 663, 100), c(1237, 1237, 1237, 663, 100), c("abc", "abc", "abc", "d", "e"), c("a","b","c","d","e"))
First i like to have a table:
datatable(test[, .(V2,V3)][3:5])
on click on abc i want to be able to expand that datatable so that the following is shown below:
datatable(test[, .(V1, V4)][1:3])
Output would be a html file written in rmarkdown.
Appreciate any help and thanks in advance.

Answer 1

Here something you can start with.
Code based on #Stéphane's answer here
library(DT)
datatable(
cbind(' ' = '<img src=\"https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_open.png\"/>',
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 '<table cellpadding=\"5\" cellspacing=\"0\" border=\"0\" style=\"padding-left:50px;\"> ' +
'<thead>'+
'<tr>'+
'<th>1st column</th>'+
'<th>2nd column</th>'+
'</tr>'+
'</thead>'+
'<tbody>'+
'<tr>'+
'<td>'+d[2]+'</td>'+
'<td>'+d[3]+'</td>'+
'</tr>' +
'</tbody>'
'</table>';
};
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('<img src=\"https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_open.png\"/>');
} else {
row.child(format(row.data())).show();
td.html('<img src=\"https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_close.png\"/>');
}
});"
))
See datatable website here for more details.