如何在Shiny的reactable表格中使用downloadHandler实现下载按钮？

问题描述 #

在Reactable表格行内创建了下载链接，同时为DT::datatable()实现了相同逻辑——通过对ID循环创建对应的output downloadHandler。DT表格的下载按钮可正常工作，但Reactable的无法生效。DT生效的关键是设置了如下回调函数：

options = list(
  preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
  drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
)

需要找到类似方法让Reactable表格实现相同的下载按钮功能。

解决方案 #

Reactable没有和DT完全对应的预绘制/绘制回调，但可以通过onRender参数添加自定义JavaScript逻辑，在表格渲染完成后重新绑定Shiny的输入输出事件。核心是在Reactable渲染后，对表格内的下载链接执行解绑再绑定操作，确保Shiny能识别这些交互元素。

修改后的完整代码如下：

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

mtcars2 <- head(mtcars[1:3], 6)

ui <- fluidPage(
  
  helpText("The buttons in this DT table work"),
  DTOutput("tbl_DT"),
  hr(),
  helpText("The buttons in this reactable table now work"),
  reactableOutput("tbl_reactable"),
  
)

server <- function(input, output, session) {
  
  rv <- reactiveValues(
    downLinks = NULL
  )
  
  observe({
    
    ids <- seq_len(nrow(mtcars2))
    
    rv$downLinks <- sprintf('<a id="down_%s" class="shiny-download-link" href="" target="_blank" download>Download</a>', ids)
    
    # 创建对应的下载输出
    lapply(ids, function(id){
      
      output[[paste0("down_", id)]] <- downloadHandler(
        
        filename = function(){
          paste0("mtcars-from-button-", id, ".csv")
        },
        
        content = function(file){
          write.csv(mtcars2, file)
        }
      )
    })
    
  })
  
  output$tbl_reactable <- renderReactable({
    
    tbl <- mtcars2
    tbl$links <- rv$downLinks
    
    reactable(tbl,
              columns = list(
                links = colDef(html = TRUE)
              ),
              # 添加渲染完成后的回调绑定Shiny事件
              onRender = JS("function() {
                // 先解绑旧绑定避免冲突
                Shiny.unbindAll(this);
                // 重新绑定表格内的Shiny交互元素
                Shiny.bindAll(this);
              }")
    )
    
  })
  
  output$tbl_DT <- renderDT({
    
    tbl <- mtcars2
    tbl$links <- rv$downLinks
    
    datatable(tbl,
              escape = FALSE, selection = "none",
              options = list(
                preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
                drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
              )
    )
  })
  
}

shinyApp(ui, server)

关键说明 #

• Reactable的onRender参数相当于DT的drawCallback，会在表格渲染完成后执行自定义JS代码。
• 回调中先调用Shiny.unbindAll(this)清除可能存在的旧绑定，再用Shiny.bindAll(this)重新绑定表格内的所有Shiny交互元素，确保下载按钮能正确关联到对应的downloadHandler。

内容的提问来源于stack exchange，提问作者Lefkios Paikousis