Shiny Tab скроллер

Question

Как добавить стрелку, которая позволяет мне нажимать и проходить по всем моим вкладкам.

Я знаю, что могу добавить несколько вкладок в одну вкладку и щелкнуть по каждой вкладке, чтобы просмотреть каждую таблицу.

Но есть ли способ спроектировать пользовательский интерфейс таким образом, чтобы я мог прокручивать всю страницу, используя стрелки, и видеть следующую вкладку

Хотите изменить вышек этому

EDIT добавлен воспроизводимый код, который использует модули и позволяет пользователям создавать столько таблиц на основе слайдера

chartTableBoxUI <- function(id) {

  ns <- NS(id)


  div(
    tags$div(DTOutput(ns("chart"))),
    tags$div(DTOutput(ns("table")))

  )



}

chartTableBox <- function(input, output, session) {

  ns <- session$ns

  vals <- reactiveValues()

  observeEvent(input$chart_rows_selected,{

    vals$sel<- (input$chart_rows_selected)


  })

  output$chart <- renderDT({
    DT::datatable(
      mtcars,options = list(
        dom='t', pageLength = 5)

    )
  })

  output$table <- renderDT({


    DT::datatable(
      mtcars[vals$sel, 1:3],options = list(dom='t')
    )




  })

}

library(shiny)
library(shinydashboard)
library(tidyverse)
library(highcharter)
library(DT)
library(shinyjs)

ui <- fluidPage(

  fluidRow(
    tags$head(
      tags$link(rel="stylesheet", type="text/css",
                href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"),
      tags$link(rel="stylesheet", type="text/css",
                href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"),
      tags$script(type="text/javascript", 
                  src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"),
      tags$script(HTML(
        "$(document).ready(function(){
        $('#tables').slick({
        arrows: true,
        dots:true
        });
        });")),
    tags$style(HTML(
      "#tables .slick-prev {
      position:absolute;
      top:65px; 
      left:-100px;
      }
      #tables .slick-next {
      position:absolute;
      top:95px; 
      left:-100px;
      }
      .slick-prev:before, .slick-next:before { 
      color:red !important;
      }
      .content {
      margin: auto;
      padding: 20px;
      width: 80%;
      }"))
  ),



  sliderInput("dr", "Num of tables:",
              min = 0, max = 12,
              value = 2),
  uiOutput("tabs")
  #verbatimTextOutput("dr2")





    )

    )





server <- function(input, output, session) {
  for(i in 1:5)
    callModule(chartTableBox,i)

  output$tabs <- renderUI({
     num_tables<- input$dr


    tags$div(class="content",
             tags$div(id="tables",
                      lapply(1:num_tables,chartTableBoxUI)



             ))


  })





}

shinyApp(ui, server)

Answer 1

Решение без вкладок с использованием библиотеки slick.js .Я не знаю, как расположить кнопки рядом.

library(shiny)
library(DT)

ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", type="text/css",
              href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"),
    tags$script(type="text/javascript", 
                src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"),
    tags$script(HTML(
"$(document).ready(function(){
  $('#tables').slick({
    // put options here
  });
});"))
  ),
  sidebarLayout(
    sidebarPanel(
      ####
    ),

    mainPanel(
      tags$div(id="tables", 
               tags$div(DTOutput("table1")),
               tags$div(DTOutput("table2"))
      )
    )
  )
)

server <- function(input, output) {

  output$table1 <- renderDT({
    datatable(iris)
  })
  output$table2 <- renderDT({
    datatable(mtcars)
  })

}

shinyApp(ui = ui, server = server)

РЕДАКТИРОВАТЬ

У меня естьнаконец-то удалось сгруппировать кнопки «Предыдущая / Следующая»:

library(shiny)
library(DT)

ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", type="text/css",
              href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"),
    tags$link(rel="stylesheet", type="text/css",
              href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"),
    tags$script(type="text/javascript", 
                src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"),
    tags$script(HTML(
"$(document).ready(function(){
  $('#tables').slick({
    arrows: true,
    dots:true
  });
});")),
    tags$style(HTML(
"#tables .slick-prev {
    position:absolute;
  top:65px; 
  left:-100px;
}
#tables .slick-next {
  position:absolute;
  top:95px; 
  left:-100px;
}
.slick-prev:before, .slick-next:before { 
    color:red !important;
}
.content {
    margin: auto;
    padding: 20px;
    width: 80%;
}"))
  ),
  sidebarLayout(
    sidebarPanel(
      ####
    ),

    mainPanel(
      tags$div(class="content",
        tags$div(id="tables", 
                 tags$div(DTOutput("table1")),
                 tags$div(DTOutput("table2"))
        )
      )
    )
  )
)

server <- function(input, output) {

  output$table1 <- renderDT({
    datatable(iris)
  })
  output$table2 <- renderDT({
    datatable(mtcars)
  })

}

shinyApp(ui = ui, server = server)

РЕДАКТИРОВАТЬ 2

Что касается редактирования, вы можете удалитьtags$script(HTML(.... из tags$head и сделать:

  output$tabs <- renderUI({
    num_tables<- input$dr
    tagList(
      tags$div(class="content",
               tags$div(id="tables",
                        lapply(1:num_tables,chartTableBoxUI)
               )),
      singleton(tags$script(HTML(
        "$(document).ready(function(){
        $('#tables').slick({
        arrows: true,
        dots:true
        });
        });")))
    )
  })