Home > Enterprise >  Update selectInput on the double click of table in Shiny App
Update selectInput on the double click of table in Shiny App

Time:04-20

In the Shiny App below, I want to update the value of selectInput box based on the row that is double-clicked by the user in the table of tab 3. For example, if user double clicks at row 3 in the table, then the value of selectInput should change to 3.

Here is my code -

library(shiny)
library(shinydashboard)

siderbar <- dashboardSidebar(
  sidebarMenu(
    # Add buttons to choose the way you want to select your data
    selectizeInput(inputId = "select_by", label = "Select by:",
                   choices = c(as.character(1:5)))
  )   
)

body <- dashboardBody(
  fluidRow(
    tabBox(
      side = "right",
      selected = "Tab3",
      tabPanel("Tab1", "Tab content 1", textOutput("tabset1Selected")),
      tabPanel("Tab2", "Tab content 2", textOutput("tabset2Selected")),
      tabPanel("Tab3", "Tab content 3", textOutput("tabset3Selected"), 
               DT::dataTableOutput("table", width = "100%", height = "100%"), color="#bb0a1e", size = 1.5, type = 8)
    )
  ),
)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "tabBoxes"),
    siderbar,
    body
  ),
  server = function(session, input, output) {
    # The currently selected tab from the first box
    output$tabset1Selected <- output$tabset2Selected <- output$tabset3Selected <- renderText({
      input$select_by
    })
    
    outputOptions(output, "tabset1Selected", suspendWhenHidden = FALSE)
    outputOptions(output, "tabset2Selected", suspendWhenHidden = FALSE)
    outputOptions(output, "tabset3Selected", suspendWhenHidden = FALSE)
    
    table_dt <- reactive({data.table(values = c(1,2,3,4,5))})
    
    output$table <- DT::renderDataTable({
      DT::datatable(table_dt(), filter = 'top', selection = "single", fillContainer = TRUE, width = "90%",
                    callback = htmlwidgets::JS(
                      "table.on('dblclick', 'td',", 
                      "  function() {",
                      "    var data = table.row(this).data();",
                      "    Shiny.setInputValue('table_tbl_dblclick', {dt_data: data});",
                      "  }",
                      ");"
                    ))
    }
    )
    
    observeEvent(input$table_tbl_dblclick, {
      reactTXT$selected <- input$table_tbl_dblclick$dt_data[[2]] # Since table index starts with 0, adding 1 to map index with data.table
    })
    
    reactTXT <- reactiveValues()
    observeEvent(eventExpr = input$select_by, handlerExpr = {
      req(input$select_by)
      reactTXT$selected <- input$select_by
      updateSelectizeInput(session, "select_by", selected = reactTXT$selected)
    }, ignoreInit = TRUE)
    
  }
)

Can someone point out the reason selectInput is not updated after clicking inside the table?

CodePudding user response:

I don't quite understand what the purpose of your observeEvents are. If it is only to update the selectize input this one works for me:

observeEvent(input$table_tbl_dblclick, {
  updateSelectizeInput(session, "select_by", selected = input$table_tbl_dblclick$dt_data[[2]])
})

Updated alternative to preserve reactTXT as the source of the new value:

observeEvent(input$table_tbl_dblclick, {
  selected <- input$table_tbl_dblclick$dt_data[[2]] # Since table index starts with 0, adding 1 to map index with data.table
  reactTXT$selected <- selected
})

reactTXT <- reactiveValues()
observeEvent(reactTXT$selected, handlerExpr = {
  updateSelectizeInput(session, "select_by", selected = reactTXT$selected)
}, ignoreInit = TRUE)

From comments below

  • Related