Question

I have 8 tables on a screen and would like to split them in four panes. How can I add vertical and horizontal lines into my fluidrow() + column() grid please?

Target design:

Current design:

Reproducible code:

DTWrapper <- function(data){
  datatable(data, 
            options = list(dom='t',ordering=F, 
                           columnDefs=list(list(targets=1:2, className="dt-right"))), 
            caption= htmltools::tags$caption(
              style = "caption-side: left; text-align: left; color:black;", "Title"), 
            rownames = FALSE)
}
################################################################################
server = function(input, output) {

  ds <- head(mtcars[,1:3])
  output$one <- DT::renderDataTable(DTWrapper(ds))
  output$two <- DT::renderDataTable(DTWrapper(ds))
  output$three <- DT::renderDataTable(DTWrapper(ds))
  output$four <- DT::renderDataTable(DTWrapper(ds))
  output$five <- DT::renderDataTable(DTWrapper(ds))
  output$six <- DT::renderDataTable(DTWrapper(ds))
  output$seven <- DT::renderDataTable(DTWrapper(ds))
  output$eight <- DT::renderDataTable(DTWrapper(ds))
}
################################################################################
ui = fluidPage(

  fluidRow(column(2, DT::dataTableOutput("one"),style='margin-bottom:30px; padding: 5px;') 
           ,column(2,
                   DT::dataTableOutput("two"),style='margin-bottom:30px;border-right:1px solid; padding: 5px;')  
           ,column(2,
                   DT::dataTableOutput("three"),style='margin-bottom:30px; padding: 5px;')  
           ,column(2,
                   DT::dataTableOutput("four"),style='margin-bottom:30px; padding: 5px;')  
  ), hr(),
  fluidRow(column(2,
                  DT::dataTableOutput("five"),style='margin-bottom:30px; padding: 5px;') 
           ,column(2,style='margin-bottom:30px;border-right:1px solid; padding: 5px;') 
           ,column(2,
                   DT::dataTableOutput("seven"),style='margin-bottom:30px; padding: 5px;') 
           ,column(2,
                   DT::dataTableOutput("eight"),style='margin-bottom:30px; padding: 5px;') 
  )
)
shinyApp(server=server, ui=ui)

Edit:

Following @Hao's answer, I tried adding border-right styling to the column(.), but the result is not yet as hoped.

Answer 1

您可以将border: 1px solid放在列的样式部分。

column(2, DT::dataTableOutput("one"),
  style='margin-bottom:30px;border:1px solid; padding: 10px;')

或者您可以在UI中的tags$head中定义一个css类，并在此处调用类名。

好像你想要一些面板？

我会使用像

这样的东西

tags$div(
class = "panel panel-default", 
tags$div(class="panel-heading", "xxxx"),
tags$div(
class="panel-body",
row(column(...), column(...))
)

ShinyUI - How to add vertical / horizontal lines in a fluidrow/col grid?

1 个答案: