Nested Datatable Within Another Datatable

[cymonegates]

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: rstudio/shiny-examples#9 and here: #393 (comment) but they do not address what I'm trying to do.

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

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(' ' = '✚', 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]

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

[piyuw]

@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:
rstudio/shiny-examples#93

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

thanks in advance

[cymonegates]

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]

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]

Hello.

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

[GitHunter0]

It would be awesome to be able to make that with DT in a simple manner as with reactable:

# https://glin.github.io/reactable/articles/examples.html#expandable-row-details
reactable::reactable(iris[1:5, ], details = function(index) {
  htmltools::div(
    "Details for row: ", index,
    htmltools::tags$pre(paste(capture.output(iris[index, ]), collapse = "\n"))
  )
})

# or
data <- unique(CO2[, c("Plant", "Type")])

reactable::reactable(data, details = function(index) {
  plant_data <- CO2[CO2$Plant == data$Plant[index], ]
  htmltools::div(style = "padding: 16px",
    reactable(plant_data, outlined = TRUE)
  )
})

[stla]

FYI my implementation is better presented on my blog.

[GitHunter0]

Hey @stla , is there any chance you could convert your implementation into a native DT tool and submit a Pull Request here? It would be a fantastic contribution

[GitHunter0]

In this DT example with child rows, do you know how to start the table with all the child rows expanded?
https://rstudio.github.io/DT/002-rowdetails.html

[GitHunter0]

There is also a rudimentary implementation in another package, here is an example:

varsExplore::datatable2(mtcars, vars=c("cyl","disp"))

[GitHunter0]

In this DT example with child rows, do you know how to start the table with all the child rows expanded?
https://rstudio.github.io/DT/002-rowdetails.html

Answer: https://stackoverflow.com/questions/67510565/how-to-start-dt-datatable-with-all-child-rows-expanded/67512900#67512900