DT cell hover showing cell based sample sizes from hidden column

Question

I have previously asked how to colour cells based on colours stored in hidden columns (link). I saw that it is also possible to apply hover information for (DT) tables via this and this post.

I want to expand my initial post where I want to add the hover option to display the sample sizes related to the individual cells. These sample sizes are not shown in the table (i.e. hidden) but only display on hover. I am really pushing my knowledge of Java to make this work.

Following on from my initial post the input data frame could look like:

dat <- iris[1:5,1:5]
colours2apply <- sample(x=c(rgb(1, 0, 0 ), rgb(1, 1, 0 ), rgb(0, 1, 1 )), 25, replace = T) %>% 
  matrix(nrow=5) %>% 
  data.frame()
set.seed(1234)
SampleSizesToShowInHover <- matrix(round(runif(n = 25, 10, 1000)), nrow=5)

  dat <- cbind(dat, colours2apply)
  dat <- cbind(dat, SampleSizesToShowInHover)
dat

From the answer in my previous post, this code adds the cell based colouring:

DT <- datatable(dat, 
                options = list(columnDefs = list(list(visible=FALSE, targets = 6:10))))
for(i in 1:5){
  DT <- DT %>%
    formatStyle(i, valueColumns = i+5, backgroundColor = JS("value"))
}
DT

How do I add the cell based hovering information in addition to the colouring?

score 1 · Accepted Answer · edited Dec 08 '21 at 12:46

1

You could simply add a rowcallback to option paramters to get the toopltip from hidden columns. Something like this:

DT <- datatable(dat, 
                options = list(columnDefs = list(list(visible=FALSE, targets = 6:10)), rowCallback = JS(
                  "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
                  "$('td:eq(1)', nRow).attr('title',aData[1+5]);",
                  "$('td:eq(2)', nRow).attr('title',aData[2+5]);",
                  "$('td:eq(3)', nRow).attr('title',aData[3+5]);",
                  "$('td:eq(4)', nRow).attr('title',aData[4+5]);",
                  "$('td:eq(5)', nRow).attr('title',aData[6+5]);",
                  "}")))

[EDIT]:

You can do the same thing in loop as follows:

DT <- datatable(dat, 
                options = list(columnDefs = list(list(visible=FALSE, targets = 6:10)), rowCallback = JS(
                  "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
                  'for(i=0; i<5; i++ ){',
                  "$('td:eq('+i+')', nRow).attr('title',aData[i+5]);",
                  '}',
                  "}")))

edited Dec 08 '21 at 12:46

Zoe

27,060
21
118
148

answered Jul 23 '19 at 01:47

SBista

7,479
1
27
58

Thank you for taking the time to look at my questions and writing an answer. The code in your answer works, but how would I integrate this in the loop (ie. similar to how the background colour is added to DT via formatStyle)? I have lots of columns and the data is reactive, so hard coding something like this is not ideal. – Luc Jul 25 '19 at 05:52
@Luc I have edited my answer so that it works using a loop. Hope it helps! – SBista Jul 25 '19 at 07:07
That is awesome! I just tried to combine your loop code followed by for(i in 1:5){ DT <- DT %>% formatStyle(i, valueColumns = i+5, backgroundColor = JS("value")) } to add in the background cell colour. This does not work. Do you know why? As a possible solution and following your JS loop logic I thought it might be possible to create background colour using JS as well by adding ' backgroundColor = JS( 'for(i=0; i<5; i++ ){value[i+5]}' )' to the list of options, however, this also does not work. Any ideas? – Luc Jul 26 '19 at 00:25
2

@Luc I think I understand the problem. `formatStyle` also uses a `rowCallback`. Then if you have your own `rowCallback` in addition, `DT` concatenates the two bodies of the `rowCallback` functions. But the `rowCallback` of `formatStyle` has arguments `function(row, data)`. So you need to replace `nRow` with `row` and `aData` with `data`. – Stéphane Laurent Jul 27 '19 at 09:58
1

@Luc as @ Stéphane Laurent pointed out `formatStyle` also uses a `rowCallback`. So to solve that instead of just doing `"$('td:eq('+i+')', nRow).attr('title',aData[i+5]);"` in the loop you could add color too using `"$('td:eq('+i+')', nRow).attr('title',aData[i+5]).css('background-color', aData[i+5]);"` and eliminate `formatStyle` altogether. – SBista Jul 27 '19 at 12:32
@SBista PERFECT. Thank you for this solution! – Luc Jul 28 '19 at 22:32
@SBista I am struggling with JS, not my expertise. It is clear that combining JS and DT functions does not work well. Happy to do all in JS(), but need help unfortunately. One additional element I would like to be able to do, is to express columns 2-4 into percentages with 1 digit. All of this needs to be done within the callBack statement... Can you help? – Luc Oct 09 '19 at 01:17
1

@Luc, All what you've asked for could be done using JS but that answer is beyond the scope of this question. – SBista Oct 09 '19 at 01:53
@SBista you are right! It will be hard for people to find the answer. I created a new question: https://stackoverflow.com/questions/58296972/r-using-javascript-to-customize-dt-tables. Could you have a look? – Luc Oct 09 '19 at 04:14

DT cell hover showing cell based sample sizes from hidden column

1 Answers1

Linked