Programmatically update row selection (or other attributes) of reactable

[tbradley]

This was cross posted to the reactable github repo on 12/10/2019

Is there any way to update the selected or expanded row in a reactable based on another user input in the reactable package or through injecting javascript directly into my shiny application?

A simple example can be shown below showing the desired functionality as it can be done in the DT package with datatables. In this example, the reactable is shown on the left hand side while the datatable is shown on the right. In both of these examples, if a row is selected than the respective selectInput and textOutput are updated. However, on the datatable side when the selectInput is updated the selected row in the datatable changes. This is done using the dataTableProxy and selectRows functions. Is there a way to do something similar to this with the reactable ? Similarly, if there was a way to change which row is expanded, I am also interested in how that would be done (I imagine they would be similar implementations but am not 100% sure)

Example:

Example Code

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

ui <- shinyUI(
  fluidPage(
    column(
      width = 6,
      selectInput(
        inputId = "test_select_react",
        label = "Select Row",
        choices = 1:nrow(mtcars)
      ),
      reactableOutput("test_table_react"),
      div(
        h5("Selected Rows\n", textOutput("rows_selected_react")) 
      )
    ),
    column(
      width = 6,
      selectInput(
        inputId = "test_select_dt",
        label = "Select Row",
        choices = 1:nrow(mtcars)
      ),
      dataTableOutput("test_table_dt"),
      div(
        h5("Selected Rows\n", textOutput("rows_selected_dt"))
      )
    )
    
  )
)

server <- shinyServer(
  function(input, output, session){
    session$onSessionEnded(stopApp)
    
    output$test_table_react <- renderReactable({
      reactable(
        mtcars,
        selection = "single",
        selectionId = "selection"
      )
    })
    
    observe({
      # req(input$test_table_selected)
      updateSelectInput(
        session, 
        "test_select_react",
        selected = input$selection
      )
    })
    
    output$rows_selected_react <- renderText(input$selection)
    
    output$test_table_dt <- renderDataTable({
      datatable(
        mtcars, 
        rownames = FALSE,
        selection = "single"
      )
    })
    
    test_proxy <- dataTableProxy("test_table_dt")
    
    observeEvent(input$test_select_dt, {
      selectRows(test_proxy, input$test_select_dt)
    })
    
    observe({
      updateSelectInput(
        session, 
        "test_select_dt",
        selected = input$test_table_dt_rows_selected
      )
    })
    
    output$rows_selected_dt <- renderText(input$test_table_dt_rows_selected)
    
  }
)

shinyApp(ui, server)

I have been trying to dig into the underlying JS behind the reactable package but my javascript knowledge is definitely limited. I assume is has something to do with the setState option, but I am not sure how to send my inputs from shiny to this argument from the shiny application.

Any help or pointers is greatly appreciated!

[tbradley]

@greg answered this in the GitHub issue. He has added functionality to allow users to update the row selection, active page and whether rows are expanded. Here is his example:

# Requires reactable v0.1.0.9000
# devtools::install_github("glin/reactable")

library(shiny)
library(reactable)

ui <- fluidPage(
  actionButton("select_btn", "Select rows"),
  actionButton("clear_btn", "Clear selection"),
  actionButton("expand_btn", "Expand rows"),
  actionButton("collapse_btn", "Collapse rows"),
  reactableOutput("tbl"),
  "Rows selected:",
  verbatimTextOutput("rows_selected")
)

server <- function(input, output) {
  output$tbl <- renderReactable({
    reactable(
      iris,
      selection = "multiple",
      selectionId = "selection",
      onClick = "select",
      details = function(index) paste("Row details for row:", index)
    )
  })

  observeEvent(input$select_btn, {
    # Select rows
    updateReactable("tbl", selected = c(1, 3, 5))
  })

  observeEvent(input$clear_btn, {
    # Clear row selection using NA or integer(0)
    updateReactable("tbl", selected = NA)
  })

  observeEvent(input$expand_btn, {
    # Expand all rows
    updateReactable("tbl", expanded = TRUE)
  })

  observeEvent(input$collapse_btn, {
    # Collapse all rows
    updateReactable("tbl", expanded = FALSE)
  })

  output$rows_selected <- renderPrint({
    print(input$selection)
  })
}

shinyApp(ui, server)