Do I have some sort of Shiny/Reactable/JavaScript conflict?

43 Views Asked by At

I have been working on a Shiny app and one part has been giving me trouble, and I was hoping to get a sanity check. At one point, I have a Reactable, where I would like a custom onClick JS function to launch a modal. I have done this before successfully, but don't have the code, so I am starting again from scratch. Nothing I have done has worked - initially I thought it was a namespace issue (my app is modular/Golem), but the more things I have pared back in testing/trying to get this to work, the more I think I may have some sort of deeper issue.

I don't think Reactables recognize any click actions for me? I tried to go down to literally a bare-bones, single-file app with the copy and pasted Click Action demo directly from the Reactable docs, and I still get nothing. Can someone test the below and let me know if ANYTHING happens for you? (you get a logger line in your console, or a modal pops up, or a warning pops up, or even an error/crash! or anything? I just get... absolutely nothing). I am wondering if I have some sort of internal conflict somewhere that is keeping my clicks from getting recognized? Thank you!!

library(shiny)
library(reactable)
library(logger)

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

server <- function(input, output) {
  logger::log_shiny_input_changes(input)
  output$reactableTest <- renderReactable({
    data <- cbind(
      MASS::Cars93[1:5, c("Manufacturer", "Model", "Type", "Price")],
      details = NA
    )
    
    reactable(
      data,
      columns = list(
        # Render a "show details" button in the last column of the table.
        # This button won't do anything by itself, but will trigger the custom
        # click action on the column.
        details = colDef(
          name = "",
          sortable = FALSE,
          cell = function() htmltools::tags$button("Show details")
        )
      ),
      onClick = JS("function(rowInfo, column) {
    // Only handle click events on the 'details' column
    if (column.id !== 'details') {
      return
    }

    // Display an alert dialog with details for the row
    window.alert('Details for row ' + rowInfo.index + ':\\n' + JSON.stringify(rowInfo.values, null, 2))

    // Send the click event to Shiny, which will be available in input$show_details
    // Note that the row index starts at 0 in JavaScript, so we add 1
    if (window.Shiny) {
      Shiny.setInputValue('show_details', { index: rowInfo.index + 1 }, { priority: 'event' })
    }
  }")
    )
  })
  
  observeEvent(input$show_details,{
    showModal(
      ui = modalDialog(
        title = "hey, it worked!",
        input$show_details
      )
      )
  })
}

shinyApp(ui, server)
0

There are 0 best solutions below