使renderTable和renderPlot占据与renderDT相同的水平空间

Question

在 Shiny 中，看起来

renderTable

和

renderPlot

受到定义的水平空间（12 列？）的约束，但是

renderDT

能够覆盖这个...

鉴于以下 MWE：

library(shiny)
library(ggplot2)
library(DT)


test_ui <- function(id){
  ns <- NS(id)
  tagList(
    fluidPage(
      fluidRow(
        plotOutput(outputId = ns("plot"), width="100%"),
        DTOutput(ns("table"), width = "100%")
      ),
      fluidRow(column(width=8, div(tableOutput(ns("fasta1")), style = "font-family:Courier;")),
               column(width=8, div(tableOutput(ns("fasta2")), style = "font-family:Courier;"))
      )
    )
  )
}


test_server <- function(id){
  moduleServer(id, function(input, output, session){
    ns <- session$ns

    output$plot <- renderPlot({
      ggplot(mtcars, aes(x = mpg, y = drat)) +
      geom_point()
    })

    output$table <- renderDT({
      datatable(cbind(mtcars,mtcars,mtcars,mtcars,mtcars), options = list(pageLength = 10, sDom = '<"top">rt<"bottom">ip'), rownames = TRUE, class = "hover row-border order-column nowrap", selection = "none")
    })

    output$fasta1 <- renderTable({
      data.frame(fasta1="<pre>>fasta1<br>ACGATGCTAGCTGATGCTGATGCTAGCTGATCGTAGCTGATCGTAGTCGATGCTGATGCTGATGCTAGTCGATGCTAGTCGATGCTAGCTGATCGATGCTAGTCGATGCTAGCTAGCTAGTCGATGCTAGTCGATCGTAGCTGACTGATGCTAGCGATCGATGCTAGC</pre>")
    }, bordered = FALSE, sanitize.text.function = identity)

    output$fasta2 <- renderTable({
      data.frame(fasta2="<pre>>fasta1<br>ACGATGCTAGCTGATGCTGATGCTAGCTGATCGTAGCTGATCGTAGTCGATGCTGATGCTGATGCTAGTCGATGCTAGTCGATGCTAGCTGATCGATGCTAGTCGATGCTAGCTAGCTAGTCGATGCTAGTCGATCGTAGCTGACTGATGCTAGCGATCGATGCTAGC</pre>")
    }, bordered = FALSE, sanitize.text.function = identity)

  })
}

demoApp <- function() {
  ui <- fluidPage(
    test_ui("demo")
  )
  server <- function(input, output, session) {
    test_server("demo")
  }
  shinyApp(ui, server)  
}

demoApp()

我是否可以将 2 个

fasta

序列以不重叠的方式彼此相邻（而不是一个在另一个之下）？奇怪的是

renderDT

可以占据所有水平空间，但我仍然无法将我的序列放在它下面并彼此相邻......

同样对于绘图...是否有可能采用与表格相同的 100% 宽度？

上面的代码产生以下结果：

Answer 1

您可以通过将每列的最大宽度定义为 6 并使用

print.xtable

属性（由

renderTable

用于显示表格，请参阅 文档）来修改表格的 CSS 样式，从而将两个表格放在一行上。表：

在用户界面中：

      fluidRow(column(width=6, div(tableOutput(ns("fasta1")), style = "font-family:Courier;")),
               column(width=6, div(tableOutput(ns("fasta2")), style = "font-family:Courier;"))
      )

在服务器中：

   output$fasta1 <- renderTable({
      data.frame(fasta1="<pre>>fasta1<br>ACGATGCTAGCTGATGCTGATGCTAGCTGATCGTAGCTGATCGTAGTCGATGCTGATGCTGATGCTAGTCGATGCTAGTCGATGCTAGCTGATCGATGCTAGTCGATGCTAGCTAGCTAGTCGATGCTAGTCGATCGTAGCTGACTGATGCTAGCGATCGATGCTAGC</pre>")
    }, width="100%", bordered = FALSE, sanitize.text.function = identity,  html.table.attributes = getOption("xtable.html.table.attributes",
                                                                                           "style='table-layout:fixed'"))
    
    output$fasta2 <- renderTable({
      data.frame(fasta2="<pre>>fasta1<br>ACGATGCTAGCTGATGCTGATGCTAGCTGATCGTAGCTGATCGTAGTCGATGCTGATGCTGATGCTAGTCGATGCTAGTCGATGCTAGCTGATCGATGCTAGTCGATGCTAGCTAGCTAGTCGATGCTAGTCGATCGTAGCTGACTGATGCTAGCGATCGATGCTAGC</pre>")
    }, width="100%", bordered = FALSE, sanitize.text.function = identity, html.table.attributes = getOption("xtable.html.table.attributes",
                                                                                              "style='table-layout:fixed'"))
    

我们可以通过将表格宽度设置为 100% 并使用

table-layout:fixed

来避免表格溢出 div。在屏幕宽度较小的情况下，您将在序列表中看到水平滚动条。在较大的屏幕宽度上，序列会完全显示，没有滚动条。