Shiny/DT: Show Child Rows Upon Initial Load

Question

The problem: I have a DataTable object in a Shiny app that utilizes child rows, which can be clicked upon and expanded to show additional information about the row. However, I can't figure out how to have the child rows visible/expanded when the table initially loads.

When the app loads initially, the child rows are hidden/closed, and the data table looks like this:

However, I want the initial load of the table to mimic what it looks like when I click on the "+" sign for every row (which expands/displays the child row)... for example:

Here is an example with some dummy data:

# Load packages
library(shiny)
library(DT)

# Set up dummy data frame.
df = data.frame(
  expand_child_row = "⊕",
  col1 = c(1, 2, 3),
  col2 = c("a", "b", "c"),
  child_row_col = "additional_info"
)

# Define app UI
ui = shiny::fluidPage(
  
  DT::DTOutput(outputId = "example_table")
  
)

# Define app server
server = function(input, output) {
  
  output$example_table = DT::renderDataTable({
    
    dt = DT::datatable(
      data = df,
      options = list(
        dom = "t",
        columnDefs = list(
          list(visible = FALSE, targets = 3),
          # Define options for child row column
          list(orderable = FALSE, className = 'details-control', targets = 0)
        )
      ),
      rownames = FALSE,
      escape = FALSE,
      callback = DT::JS("
      
        // Change mouse to pointer when hovering over expand plus sign
        table.column(0).nodes().to$().css({cursor: 'pointer'});
        
        // Function to format the child row text
        var format = function(d) {
          return '<div style=\"background-color:#f9f7fe; padding: .5em;\"> ' + d[3] + '</div>';
        };
        
        // Function to toggle (show/hide) child row visibility upon click.
        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('&oplus;');
          } else {
            row.child(format(row.data())).show();
            td.html('&CircleMinus;');
          }
        });
        
      ")
    )
    
    return(dt)
    
  })
  
}

shiny::shinyApp(ui = ui, server = server)

Can anyone help me figure out how to get it so that the initial load of the data table appears with all child rows being shown (like in the 2nd image)?

Thanks!

Answer 1

I added a little js below and achieved what you want.

make sure the word example_table in $("#example_table") matches the DToutput ID.

# Load packages
library(shiny)
library(DT)

# Set up dummy data frame.
df = data.frame(
    expand_child_row = "⊕",
    col1 = c(1, 2, 3),
    col2 = c("a", "b", "c"),
    child_row_col = "additional_info"
)

# Define app UI
ui = shiny::fluidPage(
    DT::DTOutput(outputId = "example_table"),
    tags$script(
        '
        $("#example_table").on("draw.dt", function(){
            $(this).find("tbody tr td:first-child").trigger("click");
        })
        '
    )

)

# Define app server
server = function(input, output) {

    output$example_table = DT::renderDataTable({

        dt = DT::datatable(
            data = df,
            options = list(
                dom = "t",
                columnDefs = list(
                    list(visible = FALSE, targets = 3),
                    # Define options for child row column
                    list(orderable = FALSE, className = 'details-control', targets = 0)
                )
            ),
            rownames = FALSE,
            escape = FALSE,
            callback = DT::JS("

        // Change mouse to pointer when hovering over expand plus sign
        table.column(0).nodes().to$().css({cursor: 'pointer'});

        // Function to format the child row text
        var format = function(d) {
          return '<div style=\"background-color:#f9f7fe; padding: .5em;\"> ' + d[3] + '</div>';
        };

        // Function to toggle (show/hide) child row visibility upon click.
        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('&oplus;');
          } else {
            row.child(format(row.data())).show();
            td.html('&CircleMinus;');
          }
        });
      ")
        )

        return(dt)

    })

}

shiny::shinyApp(ui = ui, server = server)