How to put outputs side by side in shiny?

Question

How can I align my outputs side by side? I tried fluidRow columns but it doesn't work (the second tables appear inside of the firsts).

Here's an image of my app.

and the tab code:

          tabPanel("Wavelet Coefficients", htmlOutput("tmod1"),
                   tableOutput("wsf"), tableOutput("wbf"), htmlOutput("tmod2"),
                   tableOutput("vsf"), tableOutput("vbf")),

Thank you in advance

Answer 1

Detailed overview of the layout is here: RStudio: Application layout guide.

Essentially what you need is to define a row using shiny::fluidRow() which you subsequently divide into columns using shiny::column(). The total width equals to 12 following Bootstrap convention.

Looking at your example I'd try to split it 7/5 but it is up to you to calibrate the layout.

Your code should be altered as follows:

tabPanel("Wavelet Coefficients", 
  fluidRow(htmlOutput("tmod1")), # Header, I presume ?
  fluidRow(
    column(width = 7, tableOutput("wsf")),
    column(width = 5, tableOutput("wbf"))),
  fluidRow(htmlOutput("tmod2")), # Header #2, I presume ?
    column(width = 7, tableOutput("vsf")),
    column(width = 5, tableOutput("vbf"))
)

`

Below is the code from the the working example which can be found here: https://github.com/Gnolam/stackoverflow-examples/tree/master/Shiny-2-columns

tabPanel(
  "2 columns",
  fluidRow(
    column(width = 4,
           h2("Column #1"),
           plotOutput("distPlot")),
    column(width = 8,
           h2("Column #2"),
           DT::dataTableOutput('tbl'))
  ))

Please let me know if it helps