rr-markdowndt

Child tables with datatables (expand/collapse)


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.


Solution

  • 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.