glin
commented
1 year ago Hey @Patrikios, thanks for posting these examples and details. If I understand correctly, there are two related but separate issues to talk about here:
- How do you run custom JavaScript that depends on the table being present on the page? This is an issue with all HTML widgets and Shiny outputs, and it's so common that the htmlwidgets package has an
htmlwidgets::onRender()function that lets you run arbitrary JavaScript only after an HTML widget has been rendered. For an example, here's how I've adapted the first example app to useonRender():library(shiny) library(reactable)
custom_js <- 'function(widgetEl) { const els = widgetEl.querySelectorAll(".manufacturer");
for(const el of els) {
el.addEventListener("mouseover", (event) => {
let currElm = event.target;
currElm.style.cursor="pointer";
currElm.style.color = "#0099F9";
let clos = currElm.closest(".manufacturer");
if (clos) {
let type_hovered_on = clos.firstChild.innerHTML;
Shiny.setInputValue("hovering",
{ type: type_hovered_on},
{ priority: "event" });
};
});
el.addEventListener("mouseout", (event) => {
let currElm = event.target;
currElm.style.color = "";
});
};}'
shinyApp( ui = fluidPage( reactableOutput("react"), br(), textOutput("type") ), server = function(input, output) { output$react <- renderReactable({ df <- MASS::Cars93[1:5, 1:4]
tbl <- reactable(
df,
searchable = TRUE,
columns = list(
Manufacturer = colDef(
class = "manufacturer"
)
)
)
htmlwidgets::onRender(tbl, custom_js)
})
output$type <- renderText({
paste0(
"The Manufacturer you point at is: ",
sQuote(
input$hovering$type
)
)
})} )
2. One problem with this approach though is that it attaches event listeners to cells only on the initial render. When a cell disappears, e.g. when filtering the table, those event listeners disappear and aren't re-added. It's probably fine if you don't make your table filterable, but a more reliable approach would be to use custom cell rendering to render an element that automatically attaches event listeners to itself when rendered.
The best supported way to do this would be to use the htmlwidgets package to create a custom widget, like the sparkline widget. reactable ensures that HTML widgets are properly initialized when rendered or re-rendered later.
But creating a custom HTML widget just for a one-off table may also be overkill, so another less-documented but supported way to do this would be to create a custom React component. It'll require more JavaScript/React knowledge, but will be a simpler way to render dynamic cell content that always works. Here's an example of a custom "HoverableCell" React component that sends hover state back to Shiny:
```r
library(shiny)
library(reactable)
custom_js <-
'
function HoverableCell({ children }) {
const [color, setColor] = React.useState("")
const onMouseEnter = event => {
setColor("#0099F9")
Shiny.setInputValue("hovering", { type: children }, { priority: "event" })
}
const onMouseLeave = event => {
setColor("")
}
const style = { cursor: "pointer", color }
return React.createElement("div", { onMouseEnter, onMouseLeave, style }, children)
}'
shinyApp(
ui = fluidPage(
tags$head(
tags$script(HTML(
custom_js
))
),
reactableOutput("react"),
br(),
textOutput("type")
),
server = function(input, output) {
output$react <- renderReactable({
df <- MASS::Cars93[1:5, 1:4]
reactable(
df,
searchable = TRUE,
columns = list(
Manufacturer = colDef(
cell = JS("function(cellInfo) {
return React.createElement(HoverableCell, null, cellInfo.value)
}")
)
)
)
})
output$type <- renderText({
paste0(
"The Manufacturer you point at is: ",
sQuote(
input$hovering$type
)
)
})
}
)Similar questions have come up a few times before, so this will have to be added to the docs at some point. For now, there's only a light mention of rendering custom React elements in the custom filter inputs doc.
Patrikios
Consider a case that I want to know the content of a cell of a column on mouseover (or perhaps in order to register a listener to listen for click and then display a modal dialogue that renders echarts as a fucntion of that variable over time).
A little more rudimentary, I include a reprex (under).
The canonical way in shiny is tho include custom JS functions is in tags$head or in session$onFlushed, however non of them reflects the case when the output takes a bit more time to render and the JS are listeners, like follows:
In the above exmple, the global variable
WAIT_TIME_SECONDS(above in example 3 seconds) needs to be smaller then the timeout value in custom_js's function wrappersetTimeout(2 seconds, hardcoded in the example above). In that case the JS is registered. When the valueWAIT_TIME_SECONDSis bigger thansetTimeoutvalue, let me say 3 seconds, the JS listeners will not be part of the reactable output.So the question is how to properly register a JS function(s) that are registered in the right time => after the reactable output render returns.
I though out the following solution leveraging
on.exitcoupled withshinyjs::runjs, however, intuitively, there must be a better, more formal solution:In this secods reprex, the funciton gets registered after the render was run. Although, I have to note that a small buffer afterwards set by
setTimeoutfor 500 miliseconds needs to be present in order for it to work as intended.WAIT_TIME_SECONDSdoes not play a role here, even if it is set to 10 seconds, the listener was registered.What would be the proper way to registed custom JS function and listeners on the reactable use case like the above? Maybe the issue seems a bit more generic, however, in this case I am interested in how this is possible specifically for reactable API.