reactable custom cell rendering with HTML content does not render HTML

Question

I am using a custom cell rendering function for one column with reactable that combines both columns of a dataframe, one of which is already HTML (<p>something</p>). I cannot get the HTML rendering to work.

Here is a minimal example:

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])
                )
                
              }
            )
          )
)

The message part will show as <p>this is the message</p> in the table.

Perhaps a custom JS rendering function is a solution but the actual application needs a custom R function (with lots of other stuff).

I have tried all combinations of html argument to colDef and also the HTML() around the message.

Thanks for any ideas.

Answer 1

Raw HTML via htmltools::HTML is not supported at the moment in {reactable}.

So as per the suggestion by @Greg Lin (author of reactable), we can convert the whole tagList into raw HTML string using as.character and then render it as raw HTML using 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) {
                tag_list <- tagList (
                  tags$span(" Sent on: ", tags$i(data$when[index])),
                  tags$br(),
                  HTML(data$what[index])
                )
                as.character(tag_list)
              }
            )
))

---

---