highlight cell position on mouse hover in shiny datatable

Question

I want to create a shiny datatable that highlights the cell that the user's mouse is hoovering on, in a way that it highlights the cells in the same row and column up that point. It's similar to what is displayed here: https://datatables.net/examples/api/highlight.html

But in this example, the entire column is highlighted, and I want it to stop on the cell that the mouse is on.

I have seen other questions with similar problems, like this one: R shiny mouseover text for table columns . But I don't know if it is outdated, but that code does not work for me, it just displays a normal datatable.

Using the code bellow as an example, how can I achieve this?

library(shiny)

shinyApp(
  ui = fluidPage(
    DT::dataTableOutput("mtcarsTable")
  ),
  server = function(input, output) {

    output$mtcarsTable <- DT::renderDataTable({
      DT::datatable(datasets::mtcars[,1:3], 
                    options = list(rowCallback = JS()
                    )
      )

    })
  }
)

Pork Chop Pork Chop · Accepted Answer · 2017-07-11T16:58:22

I know how to highlight a row on hover

#rm(list = ls())
library(shiny)
library(DT)

ui <- basicPage(
  tags$style(HTML('table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {background-color: pink !important;}')),
  mainPanel(DT::dataTableOutput('mytable'))
)

server <- function(input, output,session) {

  output$mytable = DT::renderDataTable(    
    datatable(mtcars)
  ) 
}
runApp(list(ui = ui, server = server))

highlight cell position on mouse hover in shiny datatable

1 Answers