如何在Shiny的reactable中实现独立的选择、单击及双击事件？

解决方案 #

问题根源在于第一个示例的onClick回调逻辑错误：当前代码会在点击所有列时都触发Shiny输入值更新，包括carb列。而双击事件会先触发两次单击事件，导致模态窗口优先弹出，直接干扰了双击事件的执行。

需要调整onClick的逻辑，仅在点击非carb列时才触发模态窗口，让carb列的双击事件可以正常响应。

修改后的完整代码 #

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

ui <- fluidPage(
  downloadButton("dload", "Download (*.csv)"),
  fluidRow(
    column(12, align = 'center', reactableOutput("tbl"))
  )
)
server <- function(input, output, session) {
  
  data = reactive({mtcars %>% tibble::rownames_to_column('car')})
  
  output$tbl = renderReactable(
    reactable(
      data(),
      columns = list(
        carb = colDef(
          sticky = "right",
          sortable = FALSE,
          cell = function(value, index, name){
            icon("globe",
                 ondblclick = sprintf("window.alert('double clicked cell %s in column %s')", index, name)
            )
          })
      ),
      selection = "multiple",
      compact = T,
      highlight = T,
      # 修改onClick逻辑：仅点击非carb列时才触发模态窗口
      onClick = JS("function(rowInfo, colInfo, column) {
        if (column.id !== 'carb') {
          Shiny.setInputValue('qwert', {id:rowInfo.id, nonce:Math.random()})
        }
      }"),
      rowStyle = list(cursor = "pointer")
    )
  )
  
  observeEvent(input$qwert, {
    print(input$qwert)
    id <- input$qwert$id
    row_nr <- as.numeric(id)+1
    showModal(
      modalDialog(
        size = 'l',
        easyClose = T,
        title = data()$car[row_nr],
        "some text"
      )
    )
  })
  
  sel = reactive({getReactableState("tbl","selected")})

  output$dload <- downloadHandler(
    filename = function() {
      paste("d"," ", Sys.time(), ".csv", sep = "")
    },
    content = function(file) {
     write.csv(data()[sel(),], file)
    }
  )
}
shinyApp(ui = ui, server = server)

修改说明 #

1. 调整onClick的JS函数逻辑：将Shiny.setInputValue的调用放在column.id !== 'carb'的判断条件内，仅点击非carb列时才触发模态窗口；
2. 移除原代码中无意义的return语句，让逻辑更清晰；
3. 保留了原有的多行选择、导出功能，同时carb列的双击事件可以正常触发，不再被单击事件干扰。

内容的提问来源于stack exchange，提问作者Julie R