OnDoubleClick row

[Odraio]

The documentation of reactable provides a way to define a custom action using the onClick.

  onClick = 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' })
    }
  }")

Does reactable provide an OnDoubleClick function on a row?

(The source code shows a utils.R file which includes an OnDoubleClick, but the reactable object in R doesn't seem to expose such a function).

[glin]

Hi, custom actions on double clicks aren't supported, and won't be because double clicking is very uncommon on the web with many accessibility issues. It requires a mouse and is not possible (or very hard) to trigger using a keyboard or touch/mobile device. Adding custom click actions in reactable was already a mistake without providing a way to do that from keyboards, so I'm even more hesitant to add double clicking.

However, you can add double clicking to your table if you render a custom element in your table with a dblclick event handler. For example, here's a column of custom-rendered buttons that run JS code on dblclick events:

library(reactable)

data <- cbind(
  MASS::Cars93[1:5, c("Manufacturer", "Model", "Type", "Price")],
  details = NA
)

reactable(
  data,
  columns = list(
    details = colDef(
      name = "",
      sortable = FALSE,
      cell = function(value, index, name) {
        htmltools::tags$button(
          "Show details",
          ondblclick = sprintf("window.alert('double clicked cell %s in column %s')", index, name)
        )
      }
    )
  )
)

[SerhEL]

However, you can add double clicking to your table if you render a custom element in your table with a dblclick event handler. For example, here's a column of custom-rendered buttons that run JS code on dblclick events:

library(reactable)

data <- cbind(
  MASS::Cars93[1:5, c("Manufacturer", "Model", "Type", "Price")],
  details = NA
)

reactable(
  data,
  columns = list(
    details = colDef(
      name = "",
      sortable = FALSE,
      cell = function(value, index, name) {
        htmltools::tags$button(
          "Show details",
          ondblclick = sprintf("window.alert('double clicked cell %s in column %s')", index, name)
        )
      }
    )
  )
)

Is there some kind of crutch solution for double-clicking? across the entire row. I like the onclick method, but it does not suit me because it is triggered by a single click:

onClick = JS("
      function(rowInfo) {
          if (window.Shiny) {
            Shiny.setInputValue('plot_column', colInfo.id, { priority: 'event' })
          }
        }
    ")

An easy way to fasten a double click:

onClick = JS("
function(rowInfo, column) {

  if (event.detail === 2) {
    console.log('double click');
  }

}")