R Shiny table 如何在可扩展行中正确格式化 html 代码
R Shiny table how to format html code correctly in expandable rows
在我闪亮的应用程序中,我显示了一个带有可扩展行的 table (reactable)。我想更改某些单词的背景颜色,因此我使用 html 跨度。它适用于常规行中的文本,在可扩展行中但仅显示普通 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"])
)
}
)
})
}
使用 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)
在我闪亮的应用程序中,我显示了一个带有可扩展行的 table (reactable)。我想更改某些单词的背景颜色,因此我使用 html 跨度。它适用于常规行中的文本,在可扩展行中但仅显示普通 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"])
)
}
)
})
}
使用 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)