I'm attempting to add popovers with additional information to individual cells of a datatable using shinyBS functions (because I'd like them to be proper popovers and not 'just' the datatable title attributes). ShinyBS::addpopover() requires an element ID for the element to attach a popover to. I've got this working for attaching a popover to an entire datatable, and now for the next step I'm attempting to add popovers at row level (before moving on to cell level) yet I am stuck.
My solution so far is very heavily based on this thread: Insert popify for radiobuttons options
Current problem: Using a rowCallback JS function, each row in the datatable is now given it's own ID (tableRow_x) yet ShinyBS::addpopover() does not seem to recognize these IDs. I suspect it might be possible to add something to the id parameter of addpopover() to get it to find the id's within the datatable, but I haven't been able to figure out what.
reprex:
NB: when running the shiny in an rstudio pop up browser, it is necessary to first click anywhere in the browser before the popovers start showing.
library(shinyBS)
library(shiny)
library(DT)
library(shinyjs) ## needed to tamper with the HTML
ui <- fluidPage(
useShinyjs(),
# need to include at least one bs element in ui
bsTooltip(
"foo",
"This tooltip goes nowhere - it's there to make the tooltips defined with addPopover on the server side work"
) ,
DTOutput("table")
)
server <- function(input, output, session) {
# once the UI is loaded, call shinyBS::addPopover to attach popover to it
session$onFlushed(function() {
addPopover(session = session,
id = "DataTables_Table_0",
title = "information",
content = "this is the popover on id DataTables_Table_0"
)
addPopover(session = session,
id = "tableRow_3",
title = "row information",
content = "this is the popover on id tableRow_3")
})
output$table <-
renderDataTable({
datatable(data = iris,
options = list(
rowCallback = JS(
"function( nRow, aData) {",
"$(nRow).attr('id', 'tableRow_' +aData[0]);",
"}"
)
))
})
}
# Run the application
shinyApp(ui = ui, server = server)
`
It works with server=FALSE
and the rowId
option instead of rowCallback
:
output$table <-
renderDT({
datatable(
data = iris,
options = list(
rowId = JS("function(data){return 'tableRow_' + data[0];}")
)
)
}, server = FALSE)
Didn't try with rowCallback
.