Nested fluidRow layout in Shiny

Question

here is the layout I wanted

I wanted to create fluidPage as shown in the image above.

Here is my code for ui.R:

shinyUI(fluidPage(
                fluidRow(
                            column(6,
                                   selectInput(inputId="StoreName", label=h3("Choose Store"),choices = vStores),
                                  ),
                            column(6,
                                   strong(h3("Latest Orders Status")),
                                   DT::dataTableOutput('getLatestOrdStatus'),
                                   style = "height:500px; overflow-y: scroll;"
                                  )
                          ),
                fluidRow(   
                            column(6,     
                            selectInput(inputId="OrderType", label=h3("Choose Order Type"),choices = vOrdTypes)
                                )
                        ),
                fluidRow(
                            column(5, h4("Daily Orders Count By Order Type"),
                                   dateRangeInput(inputId="daterange", label="Pick a Date Range:", start = Sys.Date()-30, 
                                                  end = Sys.Date()),
                                   plotOutput("OrdPlotByType")
                                   )
                        )

             )
 )

score 3 · Accepted Answer · answered Dec 31 '19 at 11:25

The below code will give you similar layout. Further you can improve by exploring this link from shiny

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

data(mtcars)
ui <- fluidPage(
  fluidRow(column(12,  style = "background-color:#999999;",

  fluidRow(column(6,
                  fluidRow( column(6, selectInput(inputId = "StoreName", label = h3("Select Input 1"),choices = c('a', 'b')))),
                  fluidRow(column(6, selectInput(inputId = "OrderType", label = h3("Select Input 2"),choices = c('a', 'b')))),
                  fluidRow(column(12, h4("Plot Output"), plotOutput('plot'))
                           )) ,
  column(6, strong(h3("Table Output")),dataTableOutput('table')
         )  
  )
  )
  )
)


server <- function(input, output) {
  data <- data.frame(
    name = c("A","B","C","D","E") ,  
    value = c(3,12,5,18,45) )
  output$table <- renderDataTable(head(mtcars))
  output$plot <- renderPlot(
    ggplot(data, aes(x = name, y = value)) + 
      geom_bar(stat = "identity")
  )
}
shinyApp(ui, server)

Nested fluidRow layout in Shiny

1 Answers1