Both select and expand reactable rows when clicked

Question

I have a reactable with expandable details and single row selection. The reactable package offers the onClick argument, which can be set to either "select" or "expand". The problem is that I want both options at once, namely the row to be selected as well as expanded when clicked. The third option for the onClick argument is a JS() function that requires a row info object, column object and table state object. This might be the path to the solution if my knowledge in Javascript wasn't that poor. Can anyone help?

Consider following code:

library(shiny)
library(reactable)

ui <- fluidPage(
  reactableOutput("table")
)

server <- function(input, output) {
  output$table <- renderReactable({
    reactable(iris[1:5, ],
      details = function(index) {
        htmltools::div(
          "Details for row: ", index,
          htmltools::tags$pre(paste(capture.output(iris[index, ]), collapse = "\n"))
        )
      },
      selection = "single",
      onClick = JS("function(rowInfo) {
        // js code to select + expand row goes here
      }")
    )
  })
  
}

shinyApp(ui, server)

´´´

Answer 1

Perhaps this is what you are looking for. Using the JS API you can expand and select a row by calling the toggleRowExpanded() and toggleRowSelected() methods:

library(shiny)
library(reactable)

ui <- fluidPage(
  reactableOutput("table")
)

server <- function(input, output) {
  output$table <- renderReactable({
    reactable(iris[1:5, ],
      details = function(index) {
        htmltools::div(
          "Details for row: ", index,
          htmltools::tags$pre(paste(capture.output(iris[index, ]), collapse = "\n"))
        )
      },
      selection = "single",
      onClick = JS("function(rowInfo) {
                  rowInfo.toggleRowExpanded();
                  rowInfo.toggleRowSelected();
      }")
    )
  })
}

shinyApp(ui, server)