Nested Datatable Within Another Datatable

cymonegates commented 6 years ago

I'd like to accomplish something similar to the example shown here: http://live.datatables.net/pokogare/1/edit with a child datatable nested in a parent datatable but do not know if it is possible using the DT version in RStudio.

With the code below I have created a child row for parent using callback = JS that shows the text output of my d[4] data but what I want is to transform the data found in d[4] into a new datatable nested under the parent row. I have seen the issues posted here: https://github.com/rstudio/shiny-examples/issues/9 and here: https://github.com/rstudio/DT/issues/393#issuecomment-279627237 but they do not address what I'm trying to do.

Here's an example of what my output currently looks like. nest

The number represents a code and what follows after the dash represents the value. I'd like the nested datatable to have a column for the code and column for the value like: Code Value 2526 Cancel Order 2529 Complete Order .... and so forth

   `print(htmltools::tagList(
   datatable(cbind(' ' = '&#10010;', fieldtable), escape = -1,
  #colnames=c("","Field","Definition", "Table"), 
    options = list(autowidth = TRUE,
    order = list(list(1, 'asc')),
    columnDefs = list(
      list(visible = FALSE, targets = 4),
      list(className = 'dt-left', targets = c(1, 2, 3)),
      list(orderable = FALSE, className = 'details-control', targets = 0)),
      pageLength = 25, 
      lengthMenu = c(25, 50, 75, 100, 150),
      initComplete = JS("
        function(settings, json) {
        ","
        $('body').css({
        'font-family': 'Century Gothic', 'font-size': '150%'
        });
        $(this.api().table().header()).css({
        'font-family': 'Century Gothic',
        'font-size':'125%',
        'background-color': '#008000',
        'color': '#fff'
        });
        }
        ")), rownames = FALSE,
    callback = JS("
            table.column(0).nodes().to$().css({cursor: 'pointer'});
            var format = function(d) {
            return '<div style=\"background-color:#eee; padding: .5em;\"> Acceptable Values: ' +
            d[4] + '</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('&#10010;');

            } else {
            row.child(format(row.data())).show();
            td.html('&#10010;');
            }
            });"))))

`

cymonegates commented 5 years ago

@yihui Any guidance would be most welcome and helpful. Thank you.

piyuw commented 5 years ago

@cymonegates

Did you figure out how to do multiple nested tables and present it in shiny?

I've posted before but no one seems to know how to do multiple nested tables through shiny whereby one can keep on drilling down how many a times and then finally arrive at there desired last output instead of only being able to drill down once and having to stick all the rest of information in a one liner as per your example above.

Example below :

Base row.) Balance sheet 100000 1st drill down.) Assets 80000 2nd drill down.) Current assets 60000

And have these sort of drill downs for however much you want. I'm assuming this is also your question. At the moment there only seems to examples that show 1 drill down and all the other data as been compressed together.

I was hoping @yihui or @shrektan have possibly figured this out since a similar question last year and might be able to give us some guidance.... This would be hugely appreciated! 😊

this is the issue i had posted a few months ago: https://github.com/rstudio/shiny-examples/issues/93

also wondering if @tomasreigl might be able to offer their help as well.

thanks in advance

cymonegates commented 5 years ago

Hi @piyuw. Unfortunately, no I did not figure this out and did not get a response. I had to table the idea since I couldn't figure it out myself.

piyuw commented 5 years ago

Hi @cymonegates, it's a shame indeed that we both didn't get any responses, I was hoping someone in the community might know. I wonder if DT does not have this functionality. but if thats the case, happy to be corrected but doesnt that mean JS doesn't have that functionality? Which definitely can't be the case because I've seen such drill downs on Web pages. 🤔

Tabling this sort of thing i feel takes the essence out of what needs to be portrayed, but I guess we both don't have a choice in the matter ☹️.

All the best

stla commented 5 years ago

Hello.

See https://gist.github.com/stla/e3607e3cf87ddbe70b7134d4a1c874d9