R shiny datatable link to another tab - r

Question

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,

Answer 1

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)