Hyperlink Onclick Not Rendering Inside Reactable Table

[DFSAustralia]

I'm trying to create a column in a reactable table (in Shiny) that has hyperlinks, when the hyperlinks are clicked the tag id is assigned to an input variable. My code is below.

Beta = colDef(cell = function(value, index) {
                            tags$a(href = "#", id = master_stats[index, "player_id"], round(value,3), onclick = "Shiny.setInputValue('beta', $(this).attr('id'));")
                        })

When the table is rendered the hyperlinks are successfully created but the onclick event seems to be dropped.

If I generate the link outside the reactable table the onclick function is included so this leads me to believe there is something that reactable doesn't like about this?

Any ideas?

[glin]

Hi, you've stumbled on a quirk with how reactable uses React to render HTML tags, sorry. In React, the onclick attribute is replaced by a differently-named onClick property that takes a JavaScript function, rather than an expression. React has subtle differences in how HTML attributes are named and used, and reactable hides away those differences as much as possible. However, the event handling attributes like onclick were an oversight, and their differences seem pretty difficult to hide away. This will probably have to be a documented caveat with using HTML tags in reactable. Or maybe we could attempt to convert onclick expressions to onClick functions, but that feels sketchy.

For workarounds, I can think of 3 options:

1. Use the React way of handling events, an onClick property that takes a JS() function. You don't have to know much about React to use this, but note that there are slight differences vs. native event handling: https://reactjs.org/docs/handling-events.html
2. Use raw HTML rendering, and the native onclick attributes will work as usual
3. Use reactable's cell click actions: https://glin.github.io/reactable/articles/examples.html#custom-action

Here's an example that shows each option, and thanks for reporting this.

library(reactable)
library(htmltools)

reactable(
  MASS::Cars93[, 1:5],
  columns = list(
    # Using React to handle click events (onClick function)
    # Note subtle differences and caveats in https://reactjs.org/docs/handling-events.html
    Manufacturer = colDef(
      cell = function(value, index) {
        id <- paste0("Manufacturer-", index)
        onClick <- JS(sprintf("function(e) { console.log('clicked', '%s', e.target.id) }", id))
        tags$button(id = id, onClick = onClick, value)
      }
    ),
    # Using native DOM click events (onclick attribute)
    Model = colDef(
      cell = function(value, index) {
        id <- paste0("Model-", index)
        onclick <- sprintf("console.log('clicked', '%s', this.id)", id)
        sprintf('<button id="%s" onclick="%s">%s</button>', id, onclick, value)
      },
      html = TRUE
    ),
    # Using reactable's cell click actions (onClick function below)
    Type = colDef(
      cell = function(value, index) {
        tags$button(value)
      }
    )
  ),
  onClick = JS("function(rowInfo, colInfo) {
    if (colInfo.id !== 'Type') {
      return
    }
    const id = colInfo.id + '-' + (rowInfo.index + 1)
    console.log('clicked', id)
  }")
)

---

(Also as a side note, I recommend using buttons instead of links for click actions, even if they have to be styled as links - https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#onclick_events)

[glin]

onclick and other common event handler attributes (onchange, oninput) should now work fairly well in the dev version (32d7e23):

• More HTML attributes are supported when rendering HTML tags, such as onclick (#150).

Here's an example of rendering buttons with onclick attributes, without the workarounds from above.

library(reactable)
library(htmltools)

reactable(
  MASS::Cars93[, 1:5],
  columns = list(
    Model = colDef(
      cell = function(value, index) {
        onclick <- sprintf("console.log('clicked row %s, element', this, event.target)", index)
        tags$button(onclick = onclick, value)
      }
    )
  )
)