如何在Shiny的reactable中渲染HTML标签（如按钮）

你的代码存在两个核心问题导致按钮仅显示文本：

1. HTML字符串中的引号冲突：onclick="alert("Hello world!")"里的嵌套双引号破坏了语法结构，需将内部引号改为单引号。
2. 详情面板的单元格默认以纯文本形式渲染内容，未启用HTML解析功能。

修改后的代码 #

library(reactable)
library(htmltools)

# 修正引号冲突，标记内容为HTML格式
iris$new <- HTML('<button type="button" onclick="alert(\'Hello world!\')">Click Me!</button>')

hidden_Columns = c('new', 'Species')

reactable(
  class = "rt", 
  rownames = F, 
  data = iris,
  columns = c(
    list(name = colDef(html = TRUE, width = 1000, filterable = TRUE)),
    lapply(setNames(hidden_Columns, hidden_Columns), function(x) colDef(show = FALSE))
  ),
  defaultColDef = colDef(show = TRUE),
  details = function(index) {
    div(
      tags$style("table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        margin: 40px;
      }
      td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 2px;
      }"),
      tags$table(
        tags$tr(tags$th('Species'), tags$th('new')),
        tags$tr(
          tags$td(iris[index,][['Species']]),
          # 关键：用HTML()包裹内容，启用HTML渲染
          tags$td(HTML(iris[index,][['new']]))
        )
      )
    )
  }
)

关键修改说明 #

• 修复onclick事件的引号问题：将alert("Hello world!")改为alert('Hello world!')，避免字符串嵌套冲突。
• 在详情面板的单元格中，用HTML()包裹目标内容，明确告知reactable解析HTML标签而非显示纯文本。
• 移除冗余的<html>和<body>标签，reactable运行在HTML环境中，不需要这些根标签。

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