reactable自定义单元格渲染HTML内容失效的技术求助

在使用reactable的自定义单元格渲染函数时，需结合数据框两列内容，其中一列本身是HTML格式（如<p>something</p>），但运行后会显示原始标签文本，无法正常渲染为HTML元素。

问题复现代码 #

library(reactable)
library(htmltools)

data <- data.frame(
  when = Sys.time(),
  what = "<p>this is the message</p>"
)

reactable(data,
          columns = list(
            when = colDef(show = FALSE),
            what = colDef(
              html = TRUE,
              cell = function(value, index, name){
                
                tagList(
                  tags$span(" Sent on: ", tags$i(data$when[index])),
                  tags$br(),
                  htmltools::HTML(data$what[index])
                )
                
              }
            )
          )
)

解决思路与修正代码 #

问题核心在于tagList与htmltools::HTML()的嵌套使用，导致reactable的HTML解析逻辑冲突。以下是两种有效解决方式：

方式1：将tagList转换为HTML字符串返回

将构建的标签列表转换为字符串格式，配合colDef(html = TRUE)让reactable正确解析HTML：

library(reactable)
library(htmltools)

data <- data.frame(
  when = Sys.time(),
  what = "<p>this is the message</p>"
)

reactable(data,
          columns = list(
            when = colDef(show = FALSE),
            what = colDef(
              html = TRUE,
              cell = function(value, index, name){
                # 构建标签后转换为字符串
                html_content <- as.character(tagList(
                  tags$span(" Sent on: ", tags$i(data$when[index])),
                  tags$br(),
                  HTML(data$what[index])
                ))
                html_content
              }
            )
          )
)

方式2：直接拼接HTML字符串

跳过htmltools的tag构建，直接拼接HTML字符串，同样配合colDef(html = TRUE)：

library(reactable)
library(htmltools)

data <- data.frame(
  when = Sys.time(),
  what = "<p>this is the message</p>"
)

reactable(data,
          columns = list(
            when = colDef(show = FALSE),
            what = colDef(
              html = TRUE,
              cell = function(value, index, name){
                paste0(
                  "<span> Sent on: <i>", data$when[index], "</i></span>",
                  "<br>",
                  data$what[index]
                )
              }
            )
          )
)

原因说明 #

当自定义cell函数返回tagList或htmltools标签对象时，reactable会自动进行安全转义处理，此时htmltools::HTML()标记的原始HTML内容会被当成普通字符串转义。而将内容转换为纯HTML字符串后，colDef(html = TRUE)会告诉reactable直接解析其中的HTML标签，从而实现正常渲染。

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