Steps to activate a modal window using a double click occurrence within a reactable table

My goal is to initiate a modal window by double-clicking on a cell within a reactable table. Additionally, I need the row index to display an image specific to the clicked row in the modal.

The code below successfully triggers a window.alert when a double click occurs in the last column. However, I find it easier to implement a modal window due to its additional options and my familiarity with coding in R rather than JavaScript.

library(shiny)
library(tidyverse)
library(reactable)

ui <- fluidPage(
  fluidRow(
    column(12, align = 'center',reactableOutput("tbl"))
  )
)
server <- function(input, output, session) {
  
  data = reactive({mtcars %>% tibble::rownames_to_column('car')})
  
  output$tbl = renderReactable(
    reactable(
      data(),
      columns = list(
        carb = colDef(
          sticky = "right",
          sortable = FALSE,
          cell = function(value, index, name){
            icon("globe",
                 ondblclick = sprintf("window.alert('double clicked cell %s in column %s')", index, name)
            )
          })
      ),
      compact = T,
      highlight = T,
      onClick = JS("      function(rowInfo, colInfo, column) {
        if (colInfo.id !== 'carb') {
          Shiny.setInputValue('qwert', {id:rowInfo.id, nonce:Math.random()});
        }
      }"),
      rowStyle = list(cursor = "pointer")
    )
  )
  
  observeEvent(input$qwert, {
    print(input$qwert)
    id <- input$qwert$id
    row_nr <- as.numeric(id)+1
    showModal(
      modalDialog(
        size = 'l',
        easyClose = T,
        title = data()$car[row_nr],
        "some text"
      )
    )
  })
  
   observeEvent(input$poiu, {
     print(input$poiu)
     id2 <- input$poiu$id
     row_nr2 <- as.numeric(id2)+1
     showModal(
       modalDialog(
         title = data()$car[row_nr2],
         "double click"
       )
     )
   })

}
shinyApp(ui = ui, server = server)

I experimented with various approaches but none yielded the desired result:

sprintf(Shiny.setInputValue('poiu', {nonce:Math.random()}))

ondblclick =  sprintf(Shiny.setInputValue('poiu', {id:%s.id, nonce:Math.random()}), index)

cell = function(value, index){ icon("globe", ondblclick = shinyjs::runjs(paste0("shiny.setInputValue('poiu',", index)) )} 

If anyone could provide assistance or guidance, I would greatly appreciate it.

Thank you, Julie Reynolds

Answer №1

This code snippet is effective:

createCell = function(data, position, title){
  displayIcon(
    "globe",
    onDoubleClick = constructCommand(
      "Shiny.executeAction('abc123', {id: %d}, {type: 'immediate'});", 
      position
    )
  )
}

The use of {type: 'immediate'} eliminates the need for the placeholder Math.random().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to creating the onclick feature for a dynamic button in Meteor

<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...

Exploring into the subdirectory

I am trying to redirect to a subfolder ASPX page from the index.html page upon page load, but I am encountering an error with the following code: window.location.href = 'URL= HMIS/Login.aspx'</script> Error Resource cannot be found. D ...

Top technique for creating an XMLHttpRequest instance

Which technique is recommended for generating an XMLHttpRequest object? The method should be compatible with all modern browsers. ...

How can I apply a class to a list item when clicked using Vue.js and a template component generated by v-for loop?

I'm struggling to add an active class to a list item in a template component when it's clicked, making sure that only one item can have the class at a time. I've attempted different solutions such as passing a new data object on click and r ...

In Firefox, using the new Date function within a string does not function as expected

Why does the last log in the code snippet below not work in Firefox? (function() { String.prototype.toDate = function() { return new Date(this); }; console.log(Date.parse("2012-01-31")); console.log(new Date("2012-01-31")); c ...

How to update state in React using complex objects

Within our React components, we are retrieving an object from a REST api (such as a Car), allowing users to modify it, and eventually save the changes. To streamline this process, we have developed a custom react hook for handling the state. An example im ...

Unveiling all Gatsby.js routes/endpoints in Cypress tests: A comprehensive guide

I am currently in the process of creating end-to-end tests with Cypress for a project built on Gatsby. One specific test requires me to iterate through all pages of my Gatsby site. To accomplish this, I require a test fixture (such as endpoints.json) cont ...

Conceal the navigation bar when scrolling to the top of the

Hey there! I'm looking for a way to hide my navigation bar when not scrolling, and then display it again once I start scrolling. Currently, I have two menus on this website: one with a white background and the other with a blue background. You can fi ...

Tips for accessing the parent of an LI element

Hey there, I've set up a drop-down menu using LI and UL tags. For example: <ul> <li><a href="#">Parent 1</a> <ul> <li id = "Child 1"><a href="#">Child 1</a></li> ...

Organizing JSON objects into groups of x items

I am working with dynamically generated JSON data that needs to be grouped by a specific number. I have a method for generating the variable representing the grouping number, but now I need to organize the items based on that number. Here is the original J ...

Text woven seamlessly with a series of different scenes

After contemplating the use of three.js for incorporating 3D visualization into my Sphinx extension for model visualization, I realized that the current tool I am using is outdated and not being maintained. The three.js library offers a variety of example ...

Whenever I anticipate receiving an array, Fetch always delivers a promise

I'm currently facing an issue with my simple API GET request. The array I need is always inside a promise and I can't figure out how to extract it or access the values stored within it. function getLocation(name) { let output = fetch(`http:// ...

Exploring JSON data in AngularJS

After creating a new Angular App, I decided to store some data in a JSON file. My main concerns are where to best store the .json file within the app and how to access it. Currently, I am facing this error in my Chrome console: GET http://localhost:8000/t ...

The jQuery load() method may not load all elements

I've been struggling with a query issue for quite some time now. I have a Content Management System that I want to integrate into my website, but unfortunately, I am unable to use PHP includes. As an alternative, I decided to utilize jQuery instead. D ...

Transform static borders into mesmerizing animations by changing the solid lines to dotted lines using CSS

I've managed to create a circle animation that is working well, but now I'm looking to switch from solid lines to dotted lines. Can anyone provide guidance on how to accomplish this? Here is the current appearance: #loading { width: 50px; ...

JavaScript libraries are not required when using the .append function to add HTML elements

Currently, I am attempting to utilize $.ajax in order to retrieve an html string from a php file and append it to the current html div. Oddly enough, when I use php echo, everything functions properly. However, when I attempt to load dynamically using $.lo ...

Determining the quantity of items in a MongoDB collection using Node.js

Having recently delved into Node.js and MongoDB, I find myself struggling to grasp the concept of callbacks. Despite reading several articles, the topic remains confusing to me. In the snippet of code below, my aim is to retrieve the count of orders with s ...

Extending the href value using jQuery at the end

Can someone help me with this link: <a id="Link" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2745425453424b4b524940674e0a4355464e4909494253">[email protected]</a>?subject=I-Drain Bestellung& ...

The loading cursor in IE7 flickers incessantly, causing the webpage to lag and become un

When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...

Activating the delete event trigger for a tinyMCE object

How can I create a function that activates when a user deletes an object in tinyMCE? I want to remove uploaded images from a cache folder whenever a user deletes an image from the tinyMCE editor. If they upload an image and then delete it, I would like an ...