Shiny DT Child Row Selection and Info Issue

[alexbleakie]

Hi All,

I am having an issue selecting the child rows in a R Shiny DT Table with JS callback.

When expanding the parent row, I try to select the child rows, and all rows are selected in that child (including child's background).
If I select 2nd child row, the background is deselcted and it shows my 2 childs selected (every other click selects all child rows, then shows ones selected repeatedly)

Also, how to get the information on which child rows are selected?

Thank you very much!
Alex B

Code:

library(data.table)
library(DT)
library(shiny)
library(jsonlite)

ui <- fluidPage(DT::dataTableOutput(width = "100%", "table"))

server <- function(input, output) {

output$table = DT::renderDataTable({

mtcars_dt = data.table(mtcars)
setkey(mtcars_dt,mpg,cyl)
mpg_dt = unique(mtcars_dt[, list(mpg, cyl)])
setkey(mpg_dt, mpg, cyl)
cyl_dt = unique(mtcars_dt[, list(cyl)])
setkey(cyl_dt, cyl)

mtcars_dt = mtcars_dt[, toJSON(.SD), by = list(mpg,cyl)]
setnames(mtcars_dt,'V1','mtcars')
mtcars_dt[, ' ' := '►']


df1 = mtcars_dt
df1 = df1[c(1,6),]

setcolorder(df1, c(length(df1),c(1:(length(df1) - 1))))



DT::datatable(
  data = df1,
  rownames = FALSE,
  escape = FALSE,
  selection="multiple",
  options = list(
    # dom = 'Bfrti',
    stripeClasses = list(),
    deferRender = TRUE,
    # scrollX = TRUE,
    pageLength = 25,
    scrollY = "1000",
    scroller = TRUE,
    scollCollapse = TRUE,
    lengthMenu = c(20, 50, 100, 500),
    searchHighlight = TRUE,
    tabIndex = 1,
    columnDefs = list(
      list(orderable = FALSE, className = 'details-control', targets = 0),
      list(visible = FALSE, targets = -1 )
    )
  ),
  callback = JS("
                
                //table.header().to$().css({'background-color': '#000', 'color': '#fff'})
                
                table.column(01).nodes().to$().css({cursor: 'pointer'})
                
                var table_id = 1000
                
                // Format child object into another table
                var format = function(table_id, columns) {
                if(columns != null){ 
                
                var result = ('<table id=\"' + table_id + '\"><thead><tr>')
                for (var i in columns){
                result += '<th>' + columns[i] + '</th>'
                }
                result += '</tr></thead></table>'
                
                return result
                
                }else{
                return ''
                }
                }
                
                var format_datatable = function( table_id, newtable, columns) {
                if(newtable != null){
                
                
                var column_defs = []
                
                for (var i in columns)
                {
                if (i == 0)
                {
                column_defs[i] = {'data': columns[i], 'targets': parseInt(i), 'orderable': false, 'className': 'details-control'}
                }
                
                else
                {
                column_defs[i] = {'data': columns[i], 'targets': parseInt(i)}
                }
                }
                
                /*    alert(JSON.stringify(column_defs)) */
                
                
                //var printTable = document.getElementById(newtable)
                //document.write(newtable)
                //document.write(columns)
                
                
                var subtable = $(('table#' + table_id)).DataTable({
                'data': newtable,
                'autoWidth': false, 
                'deferRender': true,
                'stripeClasses': [],
                'info': false, 
                'select': { style: 'os',
                },
                'lengthChange': false, 
                'ordering': false, 
                'paging': false, 
                'scrollX': false, 
                'scrollY': false, 
                'searching': false,
                'columnDefs': column_defs
                }).draw()
                
                }
                }
                
                table.on('click', 'td.details-control', function() {
                
                var td = $(this)
                var table = $(td).closest('table')
                var row = $(table).DataTable().row(td.closest('tr'))
                
                
                if (row.child.isShown()) {
                row.child.hide()
                td.html('&#9658;')
                }
                else
                {
                var row_data = row.data()
                
                if (!Array.isArray(row_data))
                {
                row_data = Object.keys(row_data).map(function (key) {
                return row_data[key]
                });
                }
                
                var newtable = JSON.parse(row_data[row_data.length-1])
                var columns = Object.keys(newtable[0])
                
                table_id++
                
                row.child(format(table_id, columns)).show()
                format_datatable(table_id, newtable, columns)
                console.log(table_id)
                td.html('&#9660;')
                }
                
                })
                
                
                ")
  )

})

observe({
print(input$table_rows_selected)
print(input$newtable_rows_selected)

})

}

shinyApp(ui = ui, server = server)

---

By filing an issue to this repo, I promise that

• I have fully read the issue guide at https://yihui.name/issue/.
• I have provided the necessary information about my issue.
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('DT'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('rstudio/DT').
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
• I have learned the Github Markdown syntax, and formatted my issue correctly.

[stla]

https://gist.github.com/stla/e3607e3cf87ddbe70b7134d4a1c874d9#file-dt_childtables_shiny-r

[stla]

On my blog now: https://laustep.github.io/stlahblog/posts/DTcallbacks.html

@yihui Maybe you could add this link somewhere, perhaps in the section "More examples" here ?

[yihui]

@stla Your examples are amazing! Please feel free to submit a PR (editing the Rmd source file in the gh-pages branch is enough; I can rebuild the site by myself). Thank you!