Is there any way to click an element in a dataTableOutput and then jump to a different tabPanel?

I know using escape = FALSE could add url to the table element. But how to add "jumping to a different tab" to a dataTableOutput element? And passing values?

Please take a look at my reproducible example. Thanks.

library(shiny)

server <- function(input, output) {
  X = data.frame(
    ID = c(
      "<a href = ''> google </a>",
      "Click here then Jump to tab2 and pass x=2 and y=2 to tab2",
      "Click here then Jump to tab2 and pass x=3 and y=4 to tab2"
    ),
    x = c(1, 2, 3),
    y = c(10, 2, 4)
  )
  output$datatable = renderDataTable({X}, escape = FALSE,
  options = list(
    paging = FALSE,
    searching = FALSE,
    filtering = FALSE,
    ordering = FALSE
  ))
  output$text = renderText(paste("X = ", "Y = "))
}

ui <- fluidPage(tabsetPanel(
  tabPanel("tab1", dataTableOutput("datatable")),
  tabPanel("tab2", textOutput("text"))
))

shinyApp(ui = ui, server = server)

Is there any way to click an element in a dataTableOutput and then jump to a different tabPanel?

I know using escape = FALSE could add url to the table element. But how to add "jumping to a different tab" to a dataTableOutput element? And passing values?

Please take a look at my reproducible example. Thanks.

library(shiny)

server <- function(input, output) {
  X = data.frame(
    ID = c(
      "<a href = 'http://www.google.'> google </a>",
      "Click here then Jump to tab2 and pass x=2 and y=2 to tab2",
      "Click here then Jump to tab2 and pass x=3 and y=4 to tab2"
    ),
    x = c(1, 2, 3),
    y = c(10, 2, 4)
  )
  output$datatable = renderDataTable({X}, escape = FALSE,
  options = list(
    paging = FALSE,
    searching = FALSE,
    filtering = FALSE,
    ordering = FALSE
  ))
  output$text = renderText(paste("X = ", "Y = "))
}

ui <- fluidPage(tabsetPanel(
  tabPanel("tab1", dataTableOutput("datatable")),
  tabPanel("tab2", textOutput("text"))
))

shinyApp(ui = ui, server = server)

• javascript
• jquery
• r
• shiny

1 Answer 1

Luckily, there is no need for JS, or jQuery, since all those things can be done on Shinyserver side.

Okay, where do we start... DT has an inbuild callback feature to acess which rows/columns/cells were clicked by the user. See example here. Then there is no reason to "send" this information to tab2, but we can just do with this information what we wanted to. Like setting the text in tab2 appropriately. In order to change tabs, shiny has the updateTabsetPanel function that lets you change tabs without any hyperlinks.

Kind of a changelog:

• insertet the observeEvent for functionality.
• added selected and server attribute to get a single row callback
• added Id to tabsetPanel to enable munication.
• got rid of the google link and escape.

Code:

library(shiny)
library(DT)

server <- function(input, output, session) {
  X = data.frame(
    ID = c("Click here then Jump to tab2 and pass x=1 and y=10 to tab2", 
           "Click here then Jump to tab2 and pass x=2 and y=2 to tab2",
           "Click here then Jump to tab2 and pass x=3 and y=4 to tab2"),
    x = c(1,2,3),
    y = c(10,2,4)    
  )

  output$datatable = renderDataTable({X}, selection = "single", server = FALSE,
                                     options = list(paging=FALSE,
                                                    searching=FALSE,
                                                    filtering=FALSE,
                                                    ordering=FALSE)
                                     )
  observeEvent(input$datatable_rows_selected, {
    row <- input$datatable_rows_selected 
    output$text <- renderText({paste("X =", X[row, "x"], "Y =", X[row, "y"])})
    updateTabsetPanel(session, "mainPanel", selected = "tab2")
  })  
}

ui <- fluidPage(

  tabsetPanel(id = "mainPanel", 
    tabPanel("tab1",dataTableOutput("datatable")),
    tabPanel("tab2",textOutput("text"))
  )
)

shinyApp(ui = ui, server = server)