How to render html tags inside reactable in shiny

General
1

I am trying to render HTML tags inside reactable in shiny. However the below example is not a shiny table . I have only kept the table to reduce the code.

Well I am not able to render the button here. It is showing as HTML tags only. Is there a way to render the button here

iris$new <- HTML('<html>
<body>

<button type="button" onclick="alert("Hello world!")">Click Me!</button>
 
</body>
</html>')

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

reactable(class = "rt", rownames = F, columns = c(list(
  #ht = colDef(html = TRUE), 
  name = colDef(html = TRUE,width = 1000,
                filterable = TRUE)),lapply(setNames(hidden_Columns, hidden_Columns), function(x){x = colDef(show =F)})),
  defaultColDef = colDef(show = T), iris, details = function(index) {
    htmltools::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;
}


tr:nth-child(even) {
}"),tags$table(tags$tr(
  tags$th('Species'),
  tags$th('new')
)
,tags$tr(
  tags$td(iris[index,][['Species']]),
  tags$td(iris[index,][['new']])
)))
    
  })

image
image719×165 4.02 KB

so instead of above tags, there should be a button

2 
library(shiny)
library(reactable)

iris <- head(iris) # less of it

iris$new <- list(tags$button("click me",
                             onclick = "alert('Hello World')"))

hidden_Columns <- c("new", "Species")

styletags <- "table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  margin: 40px;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 2px;
}
tr:nth-child(even) {
}"

reactable(
  class = "rt", rownames = F, columns = c(list(
    # ht = colDef(html = TRUE),
    name = colDef(
      html = TRUE, width = 1000,
      filterable = TRUE
    )
  ), lapply(setNames(hidden_Columns, hidden_Columns), function(x) {
    x <- colDef(show = F)
  })),
  defaultColDef = colDef(show = T), iris, details = function(index) {
    htmltools::div(singleton(tags$style(styletags)), tags$table(
      tags$tr(
        tags$th("Species"),
        tags$th("new")
      ),
      tags$tr(
        tags$td(iris[index, ][["Species"]]),
        tags$td(iris[index, ][["new"]])
      )
    ))
  }
)
3

thanks. it is working. But just for curiosity, need to understand how does is matter with my code. I just put HTML directly

4

with raw html text; you must use the colDef(html=TRUE) option, and ultimately convert all the tags to strings with a big as.character.

library(shiny)
library(reactable)

iris <- head(iris) # less of it

iris$new <- list(html_content=HTML("<button onclick=\"alert('Hello World')\">click me</button>"))

hidden_Columns <- c("new", "Species")

styletags <- "table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  margin: 40px;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 2px;
}
tr:nth-child(even) {
}"

reactable(
  class = "rt", rownames = F, columns = c(list(
    # ht = colDef(html = TRUE),
    name = colDef(
      html = TRUE, width = 1000,
      filterable = TRUE
    )
  ), lapply(setNames(hidden_Columns, hidden_Columns), function(x) {
    x <- colDef(show = F)
  })),
  defaultColDef = colDef(show = T,html = TRUE), iris, details = function(index) {
    as.character(htmltools::div(singleton(tags$style(styletags)), tags$table(
      tags$tr(
        tags$th("Species"),
        tags$th("new")
      ),
      tags$tr(
        tags$td(iris[index, ][["Species"]]),
        tags$td(iris[index, ][["new"]]$html_content)
      )
    )))
  }
)
5

This topic was automatically closed 42 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.