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)