Use image in reactable expandable row

Question

Given a data frame with a column of links to images (<img src...>), is it possible to use reactable's expandable row feature to expand a row and view an image?

Here is some basic data:

library(tidyverse)
library(reachable)

img_df <- tribble(~image,
                  "<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Kosaciec_szczecinkowaty_Iris_setosa.jpg/450px-Kosaciec_szczecinkowaty_Iris_setosa.jpg'/>",
        "<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Iris_versicolor_3.jpg/320px-Iris_versicolor_3.jpg'/>",
        "<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Iris_virginica.jpg/295px-Iris_virginica.jpg'/>"
)

iris %>%
  group_by(Species) %>%
  summarize(mean = mean(Sepal.Length)) %>%
  add_column(img_df) -> df

reactable(df)

So, rather than show the "image" column, it would appear as an expandable column with the image appearing when the row is expanded.

I can get the HTML to appear with this code, but the image itself does not:

reactable(df,
          columns = list(
            image = colDef(html = TRUE,
                           resizable = TRUE,
                           show=F)
          ),
          details = function(index) {
            if(df$image[index] != "") {
              htmltools::HTML(df$image[index])
            }
          })

I can get the image appear with this code, but it comes with all the additional row info. (This was taken from the documentation [https://glin.github.io/reactable/articles/examples.html#expandable-row-details-1]

reactable(df, details = colDef(
  name = "More",
  details = JS("function(rowInfo) {
    return 'Details for row: ' + rowInfo.index +
      '<pre>' + JSON.stringify(rowInfo.row, null, 3) + '</pre>'
  }"),
  html = TRUE,
  width = 60
))

Kat · Accepted Answer · 2021-09-30T17:31:15.937

I think this is what you were looking for - your images are visible hyperlinks. I edited my answer; I think I missed part of what you were looking for originally.

First, you need to drop the HTML tags in your web links. The symbols are getting converted (i.e., < to <, > to > etc.). Instead, use the package htmltools to add the tags.

I stuck to your original code and added comments to what I changed.

Check it out - :

library(tidyverse)
library(reactable)
library(htmltools)

#---------------- removed the tags in the data frame ----------------
img_df <- tribble(~image,
                  "https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Kosaciec_szczecinkowaty_Iris_setosa.jpg/450px-Kosaciec_szczecinkowaty_Iris_setosa.jpg",
                  "https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Iris_versicolor_3.jpg/320px-Iris_versicolor_3.jpg",
                  "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Iris_virginica.jpg/295px-Iris_virginica.jpg"
)

#---------------- this is unchanged ----------------
iris %>%
  group_by(Species) %>%
  summarize(mean = mean(Sepal.Length)) %>%
  add_column(img_df) -> df

#-------------------- your table --------------------
reactable(df, columns = list(
  image = colDef(show = F,
                 resizable = T,
                 html = T)),
  details = function(index) {  
    # essentially <a><img /></a>
    htmltools::tags$a(href = df[index,]$image, 
                      target = "_blank", 
                      htmltools::tags$img(src = df[index,]$image, 
                                          width = "100", 
                                          height = "100")) 
  })

Use image in reactable expandable row

1 Answers1