Custom and predefined action reactable

Question

Is it somehow possible to have a custom action and using one of the predefined action, e.g. onClick = "select"?

I would like to use the onClick select and an additional JS function.

Example:

onClick = "select" + JS("function(rowInfo, column) {
    // Only handle click events on the 'details' column
    if (column.id !== 'details') {
      return
    }

    // Display an alert dialog with details for the row
    window.alert('Details for row ' + rowInfo.index + ':\\n' + JSON.stringify(rowInfo.values, null, 2))

    // Send the click event to Shiny, which will be available in input$show_details
    // Note that the row index starts at 0 in JavaScript, so we add 1
    if (window.Shiny) {
      Shiny.setInputValue('show_details', { index: rowInfo.index + 1 }, { priority: 'event' })
    }
  }")

Answer 1

This will do

library(reactable)
reactable(iris[1:5, ], selection = "multiple", onClick = JS(
"function(rowInfo, column){
   var rowIdx = rowInfo.index;
   document.querySelectorAll('.rt-table .rt-tr')[rowIdx + 1].querySelector('.rt-td-select').click()
   
   // add whatever other JS code you want below 
   // e.g. alert the clicked
   alert(`You clicked row No. ${rowIdx + 1}, column ${column.id}`)
}
"
))