1

I'm trying to display an image when hover on each row of a DT::datatable. I found a SO post that almost does what I'm looking for, but it repeats the same image for every row. What I want is to read the url from a data.frame column, and hopefully redefine the size. It's probably a very basic question for JS programmers,but my knowlegde in JS is almost none.

Here is a small example:

library(DT)

df <- data.frame(stringsAsFactors=FALSE,
                 a = rep("my stackoverflow Avatar",2),
                 b = rep("my stackoverflow Avatar",2),
                 url=c('https://d33wubrfki0l68.cloudfront.net/57299a1dcd979c623325f11bf5e5ce60f3d4eb00/e4602/wp-content/uploads/2018/10/black.png'
                       ,'https://d33wubrfki0l68.cloudfront.net/ca4b0ae74fce141fb92ede7117b1c1928478c441/98350/wp-content/uploads/2018/10/rstudio-logo-gray.png')
                 )

datatable(df, options=list(columnDefs=list(list(
  targets=1:1,render=DT::JS(
    'function(data,row,type,meta) {
      return "<a class=\'ItemsTooltip\' href=\'www.example.com\' target=\'_blank\'><img class=\'imgTooltip\' src=\'https://d33wubrfki0l68.cloudfront.net/57299a1dcd979c623325f11bf5e5ce60f3d4eb00/e4602/wp-content/uploads/2018/10/black.png\'/>" +
      data + "</a>";
    }'
    )
  ))))

I would like to read the image url from the column url of df.

Any help will be much appreciated.

Nelson
  • 301
  • 3
  • 15

2 Answers2

1

You can create an image tag and use it with escape = FALSE.

library(DT)
datatable(transform(df, url = sprintf('<img src = %s></img>', url)), escape = FALSE)
Ronak Shah
  • 377,200
  • 20
  • 156
  • 213
1

Try this:

datatable(
  df, 
  options = list(
    columnDefs = list(
      list(
        targets = 3,
        visible = FALSE
      ),
      list(
        targets = 1:2, 
        render = JS(
          'function(data, type, row, meta) {',
          '  return "<a class=\'ItemsTooltip\' href=\'www.example.com\' target=\'_blank\'><img class=\'imgTooltip\' src=\'" +', 
          '  row[3] + "\'/>" +',
          '  data + "</a>";',
          '}'
        )
      )
    )
  )
)
Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
  • Don't you need to pass `data` instead of `row[3]`? – andschar Dec 07 '22 at 09:14
  • @andschar That should work. `row[3]` corresponds to the cell in the `url` column. What's the problem? – Stéphane Laurent Dec 07 '22 at 09:20
  • Sorry, I just realized my comment is not really true. However, if I use your code the images won't render. Looking at the HTML output I see ``. So, imho the image doesn't render because of just "p" in the `src=`. Do the images render when you run the example? BTW, I use the CSS-code from answer in the linked [question](https://stackoverflow.com/a/39351916/4742889). – andschar Dec 07 '22 at 09:42
  • 1
    @andschar You are right. The arguments of the functions are not in the correct render. Change `function(data, row, type, meta)` to `function(data, type, row, meta)`. I edit. – Stéphane Laurent Dec 07 '22 at 10:08
  • Ok great, thanks! Wasn't aware that the argument order is important! – andschar Dec 07 '22 at 10:15