glin
onClick: combine expand and JS function
Hello,
Currently the onClick function argument to reactable() only seems to accept either expand, select or a JS function. I would combine group expanding and execution some JS whenever a group is expanded. From what I can tell the JS function to expand a single group is currently not exported, so I was wondering if there is a workaround?
Thanks, Rick
Hi, interesting question, and my first thought would be to add a way to expand individual rows through the JavaScript API so you can use a custom click action to expand and do whatever you want. However, there are some issues with publicizing the API for expanding individual rows that I need to figure out first, and although technically possible today, it would likely break by the next release.
A second thought is that there's also an undocumented, internal row.toggleRowExpanded() method on the rowInfo object that the custom click action receives. Although undocumented, it should be fairly stable and I don't see why we couldn't document that publicly. Here's a quick example which should be 99% safe to use, but still not 100%, so definitely use at your own risk for now :)
library(reactable)
library(htmltools)
data <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price")]
reactable(
data,
groupBy = "Manufacturer",
# NOTE: this is an undocumented workaround to toggle expanded rows on click in
# a custom cell click action.
onClick = JS("row => {
row.toggleRowExpanded()
console.log('do something else here with grouped row subrows:', row.subRows)
}")
)
Hello,
Many thanks, the internal function seems to work well. Is there a particular reason in mind why this function is 1% unsafe? :-)
Hello, If you need combine select and custom JS function like me,
There's another undocumented API for select: use row.toggleRowSelected().
library(reactable)
library(htmltools)
data <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price")]
reactable(
data,
groupBy = "Manufacturer",
theme = reactableTheme(
rowSelectedStyle = list(backgroundColor = "#eee", boxShadow = "inset 2px 0 0 0 #ffa62d")
),
onClick = JS("row => {
row.toggleRowSelected()
console.log('do something else here with grouped row subrows:', row.subRows)
}")
)
