shinyr app using dt, javascript callback react to observeEvent table_cell_edit

[Mrgianlu]

I am determined to learn R-Shiny, for this I am trying to implement an editable table using the DT package, that reads and writes the edits to a database using the RSQLite package, and this actually works so I am excluding this part of the code from the example below to drastically improve the readability.

I am able to write the edits with the approach suggested on the shiny website Using DT in Shiny that links to the examples in this page Double-click to edit table cells .

With the following code code, once I inline edit a cell, I can print a couple of debug lines and using the dbExecute() function I can send the edit to the database.

  observeEvent(input$data_cell_edit, {
    info = input$data_cell_edit
    str(info)
    print(info)
    print("Edit Triggered")
    #Here I write my edits
  }

Now I'd also like to add a dropdown menu for editing factorial columns, so I suggested to follow the approach suggested at this answer render dropdown for single column in DT shiny

Using the javascript below I can replace the cells with the corresponding dropdown menu. However the problem here is that once an edit is performed via the dropdown menu, the event data_cell_edit is not triggered, so the database update can't be performed.

While an option could be to enclose the write to the database directly in the javascript code, the best way for me would be to improve that javascript to trigger the data_cell_edit callback somehow.

Is this possible at all? Also, for some reasons

library(shiny)
library(DT)

ui <- fluidPage(
  DT::dataTableOutput('foo'),
  verbatimTextOutput('sel')
)

server <- function(input, output, session) {
  data <- head(iris, 5)
  
  for (i in 1:nrow(data)) {
    data$species_selector[i] <- as.character(selectInput(paste0("sel", i), "", choices = unique(iris$Species), width = "100px"))
  }
  
  output$foo = DT::renderDataTable(
    data, 
    escape = FALSE, 
    editable=TRUE,
    callback = JS("table.rows().every(function(i, tab, row) {
        var $this = $(this.node());
        $this.attr('id', this.data()[0]);
        $this.addClass('shiny-input-container');
      });
      Shiny.unbindAll(table.table().node());
      Shiny.bindAll(table.table().node());")
  )
  
  observeEvent(input$foo_cell_edit, {
    info = input$foo_cell_edit
    print("event triggered")
    #Here I write my edits
  })

}

shinyApp(ui, server)

tldr:

with the code above, when I edit a normal cell, I trigger the event that writes "event triggered" to the console.

when I edit a cell with the dropdown menu, this event is not triggered.

How can I trigger that event?

[ismirsehregal]

Please link crossposts.

[Mrgianlu]

good point. thanks for your contribution @ismirsehregal