Get data from nested reactable of shiny dashboard with Reactable.getState

Question

I have a dashboard created with shiny and the reactablepackage. I would like to download the data shown in the table into an Excel file with Reactable.getState The problem is that I can only get the data of the inner tables if they were expanded.

The following example shows this problem for the inner table of the first row.

If you click Get data, it shows NULL.

If you expand the first row and click Get data, it shows the data of the inner table.

Is there a way to get the data of the inner table without expanding it?

library(shiny)
library(reactable)
library(jsonlite)

data <- as.data.frame(unique(MASS::Cars93[, 1]))  

registerInputHandler(
  "xx",
  function(data, ...){
    fromJSON(toJSON(data))
  },
  force = TRUE
)

ui <- fluidPage(
  fluidRow(
    column(
      7,
      tags$button(
        "Get data",
        onclick = '
          var state = Reactable.getState("cars1");
          Shiny.setInputValue("dat:xx", state.sortedData);
        '
      ),
      reactableOutput("cars")
    ),
    column(
      5,
      verbatimTextOutput("data")
    )
  )
)

server <- function(input, output){
  output$cars <- renderReactable({
    reactable(data, details = function(index){       
      part_data <- MASS::Cars93[MASS::Cars93[, 1] == data[index, 1], 2:5]                       
      htmltools::div(style = "padding: 1rem",
                     reactable(part_data, outlined = TRUE, elementId = paste0('cars', index))
      )},  filterable = TRUE)
  })

  output$data <- renderPrint({
    input$dat
  })
}

shinyApp(ui, server)

You can do `Reactable.toggleAllRowsExpanded("cars")` in the JavaScript code to expand the rows. — Stéphane Laurent, Sep 06 '22 at 09:18
@StéphaneLaurent: Thanks, this works perfectly. At first I expand the rows and then directly collapse them again. — TheSoundOfSnowCrunching, Sep 12 '22 at 05:10

score 0 · Accepted Answer · answered Sep 12 '22 at 07:38

You can do Reactable.toggleAllRowsExpanded("cars") in the JavaScript code to expand the rows, then send the table to the Shiny server, then collapse the rows:

    onclick = '
      Reactable.toggleAllRowsExpanded("cars");
      var state = Reactable.getState("cars1");
      Shiny.setInputValue("dat:xx", state.sortedData);
      Reactable.toggleAllRowsExpanded("cars");
    '

Get data from nested reactable of shiny dashboard with Reactable.getState

1 Answers1