CODEWITHSUNDEEP
rdatatablehyperlinkshiny
ChinB
ChinB

Reputation: 115

R shiny datatable link to another tab

I am trying to navigate to another datatable tab in R shiny on clicking a row in the first datatable. I see similar examples here. However I am not able to use them as I am fetching data from database directly in to the datatable.

Hyperlink from one DataTable to another in Shiny

Can you guide me how to complete it?

        output$TbTable <- DT::renderDataTable(datatable(sqlOutput(),style = 'bootstrap', class = 'table-striped table-hover table-condensed',
                                                    extensions = c("FixedColumns","Scroller"),
                                                    filter = 'top',
                                                    options = list(
                                                      # dom = 't',
                                                      # deferRender = TRUE,
                                                      searching = TRUE,
                                                      autoWidth = TRUE,
                                                      # scrollCollapse = TRUE,
                                                      rownames = FALSE,
                                                      scroller = TRUE,
                                                      scrollX = TRUE,
                                                      scrollY = "500px",
                                                      #fixedHeader = TRUE,
                                                      class = 'cell-border stripe',
                                                      fixedColumns = list(
                                                        leftColumns = 3,
                                                        heightMatch = 'none', escape = FALSE,
            options = list(initComplete = JS(
              'function(table) {
    table.on("click.dt", "tr", function() {
    Shiny.onInputChange("rows", table.row( this ).index());
    tabs = $(".tabbable .nav.nav-tabs li a");
    $(tabs[1]).click();
    });
}'))
))))

Can you help me on this?

Thanks,

Upvotes: 5

Views: 2763

Answers (1)

Martin Schmelzer
Martin Schmelzer

Reputation: 23889

I am not so deeply involved with DT but this JS callback function works:

function(settings, json) {
  var table = this.DataTable();
  table.on("click.dt", "tr", function() {
    Shiny.onInputChange("rows", table.row( this ).index());
    var tabs = $(".tabbable .nav.nav-tabs li a");
    $(tabs[1]).click();
  });
}

MRE:

library(shiny)
library(ggplot2)  # for the diamonds dataset
library(htmlwidgets)

ui <- fluidPage(
  title = "Examples of DataTables",
  sidebarLayout(
    sidebarPanel(
      conditionalPanel(
        'input.dataset === "diamonds"',
        checkboxGroupInput("show_vars", "Columns in diamonds to show:",
                           names(diamonds), selected = names(diamonds))
      ),
      conditionalPanel(
        'input.dataset === "mtcars"',
        helpText("Click the column header to sort a column.")
      ),
      conditionalPanel(
        'input.dataset === "iris"',
        helpText("Display 5 records by default.")
      )
    ),
    mainPanel(
      tabsetPanel(
        id = 'dataset',
        tabPanel("diamonds", DT::dataTableOutput("mytable1")),
        tabPanel("mtcars", DT::dataTableOutput("mytable2")),
        tabPanel("iris", DT::dataTableOutput("mytable3"))
      )
    )
  )
)


jss <- '
function(settings, json) {
  var table = this.DataTable();
  table.on("click.dt", "tr", function() {
    Shiny.onInputChange("rows", table.row( this ).index());
    var tabs = $(".tabbable .nav.nav-tabs li a");
    $(tabs[1]).click();
  });
}'

server <- function(input, output) {

  # choose columns to display
  diamonds2 = diamonds[sample(nrow(diamonds), 1000), ]
  output$mytable1 <- DT::renderDataTable({
    DT::datatable(diamonds2[, input$show_vars, drop = FALSE], options = list(initComplete = JS(jss)))
  })

  # sorted columns are colored now because CSS are attached to them
  output$mytable2 <- DT::renderDataTable({
    DT::datatable(mtcars, options = list(orderClasses = TRUE))
  })

  # customize the length drop-down menu; display 5 rows per page by default
  output$mytable3 <- DT::renderDataTable({
    DT::datatable(iris, options = list(initComplete = JS(jss)))})
}

shinyApp(ui, server)

Upvotes: 3

Related Questions