Question

How to show a ConditionalPanel when a row in a reactable table is selected?

I have a reactable data table containing mtcars and would like to show a table containing iris on the UI only when a row in the mtcars table is selected.

The below condition is not working.

library(shiny)
library(reactable)
library(DT)

server <- function(input, output) {

  # Reactable data table
  output$dt_mtcars <- renderReactable({
    mtcars %>% 
      reactable(
        selection = "single",
        defaultSelected = c(),
        onClick = "select"
      )
  })

  # Reactable data table
  output$dt_iris <- renderDataTable({
    iris
  })

}

ui <- fluidPage(
  
  conditionalPanel(
    condition = "input.dt_mtcars_selected !== null && input.dt_mtcars_selected.length > 0",
    dataTableOutput("dt_iris")),
  
  reactableOutput("dt_mtcars")
)

shinyApp(ui, server)
 3  39  3
1 Jan 1970

Solution

 3

In your example you have a reactable instance defined by outputId = 'dt_mtcars'. The Javascript expression which can be used as a condition for conditionalPanel in order to check whether at least one row is selected is

input.dt_mtcars__reactable__selected !== null &&
    input.dt_mtcars__reactable__selected.length > 0

Also notice that reactable has a built-in function getReactableState which can be used to retrieve the selected property directly in R. There are also more properties accessible, this is described in the documentation.

2024-07-02
Jan