onClick: combine expand and JS function

[rickhelmus]

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

[glin]

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)
  }")
)

[rickhelmus]

Hello,

Many thanks, the internal function seems to work well. Is there a particular reason in mind why this function is 1% unsafe? :-)

[jhk0530]

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)
  }")
)