Shiny layout with DT

shiny
,
1

I wish to place the static information about a specific tree directly below the "Select a Tree" dropdown.

The static info (address, lat/long...) is created using DT::renderDataTable
How can I get it to appear below the dropdown.

Taking a step back. Is there a better way with Shiny to display static text info that will have the same look as shiny widgets. It would be ideal if there was something that had the some look as the shiny dropdown (white with thick grey line on top and thin grey line all around) and aligned with it perfectly. Just wondering.

Here is a RStudio Viewer screenshot and the ui.r code.

43%20PM
43%20PM1934×1992 720 KB

# Scrollable dropdown with 246 tree names
library(shiny)
library(shinydashboard)
library(leaflet)

header <- dashboardHeader(title = "Toronto Tree Map")

body <- dashboardBody(
        fluidPage(
            column(width = 9,
                   box(width = NULL, solidHeader = TRUE,
                       leafletOutput("torontoMap", height = 400)
                      )
                  ),
            
            column(width = 3,
                   box(width = NULL,
                       selectizeInput(inputId = "tree", label = "Select a Tree", choices = NULL) 
                   )
            ),
            # verbatimTextOutput("address")
            div(DT::dataTableOutput("address"), style = "font-size: 100%; width: 15%")
      )    
)
  
dashboardPage(
  header,
  dashboardSidebar(disable = TRUE),
  body
)
2

Can you just move the DT to be in the same box() as the selectizeInput?

box(width = NULL,
    selectizeInput(inputId = "tree", label = "Select a Tree", choices = NULL) 
    div(DT::dataTableOutput("address"), style = "font-size: 100%; width: 15%")
)

Or, if you do want the DT and the selector to be in separate boxes, then follow these instructions:
https://rstudio.github.io/shinydashboard/structure.html#column-based-layout

1 Like
3

Yes that works, Joe. Thank you for your guidance yesterday and today.

1 Like