R Shiny table如何在可扩展行中正确格式化html代码答案

【问题标题】：R Shiny table how to format html code correctly in expandable rowsR Shiny table如何在可扩展行中正确格式化html代码
【发布时间】：2021-09-05 21:08:46
【问题描述】：

在我闪亮的应用程序中，我显示了一个带有可扩展行的表格（可反应）。我想更改某些单词的背景颜色，因此我使用 html spans。它适用于常规行中的文本，但在可扩展行中仅显示纯 html 代码。

我为两列设置了html = TRUE，但未正确显示。如何让它发挥作用？

app.R

library(shiny)
library(htmltools)
library(reactable)

ui <- fluidPage(
  reactableOutput("table")
)
server <- function(input, output) {
  
  output$table <- renderReactable({
    df = data.frame("title" = c("This is the <span style='background-color:yellow;'>Title</span>", "This is a longer Title"), 
                    "abstract" = c("This is the <span style='background-color:yellow;'>abstract</span>", "This is an even longer abstract"))
    reactable(
      df,
      columns = list(
        abstract = colDef(show = F, html = TRUE),
        title = colDef( html = TRUE)
      ),
      details = function(index) {
        htmltools::div(style= "background-color:white",
                       htmltools::tags$div(style= "background-color:#eee; padding: .9em; border-color: #ffe;", df[index, "abstract"])
                       
        )
      }
    )
  })
  
}

【问题讨论】：

标签： r shiny reactable htmltools

【解决方案1】：

使用here 中的html 函数我们可以做到-

library(shiny)
library(htmltools)
library(reactable)


html <- function(x, inline = FALSE) {
  container <- if (inline) htmltools::span else htmltools::div
  container(dangerouslySetInnerHTML = list("__html" = x))
}

ui <- fluidPage(
  reactableOutput("table")
)
server <- function(input, output) {
  
  output$table <- renderReactable({
    df = data.frame("title" = c("This is the <span style='background-color:yellow;'>Title</span>", "This is a longer Title"), 
                    "abstract" = c("This is the <span style='background-color:yellow;'>abstract</span>", "This is an even longer abstract"))
    reactable(
      df,
      columns = list(
        abstract = colDef(show = F, html = TRUE),
        title = colDef( html = TRUE)
      ),
      details = function(index) {
        htmltools::div(style= "background-color:white",
                       htmltools::tags$div(style= "background-color:#eee; padding: .9em; border-color: #ffe;", 
                                           html(df[index, "abstract"]))
                       
        )
      }
    )
  })
}

shinyApp(ui,server)

【讨论】：