How do I adjust the spacing between the end of the table and the sentence, "Place very close to table".
Here is the default spacing:
Here is the desired spacing:
R Script
library("shiny")
library("shinydashboard")
shinyApp(
ui = dashboardPage(
dashboardHeader(disable = TRUE),
dashboardSidebar(width = 0),
body <- dashboardBody(
fluidRow(
tabBox(
id = "tabset1", height = "250px",
tabPanel("Tab1", "First tab content"),
tabPanel("Tab2", "Tab content 2")
),
),
fluidRow(htmlOutput("last_updated"))
)
),
server = function(input, output) {
# The currently selected tab from the first box
output$tabset1Selected <- renderText({
input$tabset1
})
output$last_updated <- renderText({
paste("<font size='1px;'> Place very close to table</font>")
})
}
)
A possibility:
body <- dashboardBody(
div(
style = "display: flex; flex-direction: column;",
tabBox(
id = "tabset1", height = "250px",
tabPanel("Tab1", "First tab content"),
tabPanel("Tab2", "Tab content 2")
),
div(style = "margin-top: -20px;"),
htmlOutput("last_updated")
)
)
Related
I am trying to center-align tabsetpanel "pills" on shiny, but it alwais get on left position. Here is the code example, anyone knows how to align this buttons or pills center?
library(shiny)
ui <- fluidPage(
tabPanel(title = "Hello world", value = "HB",
tabsetPanel(id="subtabs", type="pills",
tabPanel(title = "TAB 1", value = "ILPF",
br(),
h4("I like Pink floyd, my favourite album is 'The dark side of the moon'", style = "color:grey", align = "center"),
br()
),
tabPanel(title = "TAB 2", value = "FS",
br(),
h4("But my favourite song is 'Shine on you crazy diamond'", style = "color:grey", align = "center"),
br()
)
)
)
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
The pills should be in the middle of the page
You can do so by adding some CSS to your app. tags$style('ul.nav-pills{display: flex !important;justify-content: center !important;}') does the trick.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style('
ul.nav-pills{
display: flex !important;
justify-content: center !important;
}')
),
tabPanel(title = "Hello world", value = "HB",
tabsetPanel(id="subtabs", type="pills",
tabPanel(title = "TAB 1", value = "ILPF",
br(),
h4("I like Pink floyd, my favourite album is 'The dark side of the moon'", style = "color:grey", align = "center"),
br()
),
tabPanel(title = "TAB 2", value = "FS",
br(),
h4("But my favourite song is 'Shine on you crazy diamond'", style = "color:grey", align = "center"),
br()
)
)
)
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
I wish to center a small form below a table that is also centered.
I center the table using, fluidRow and column like so:
fluidRow(
column(12, align="center", reactableOutput("table")),
),
If I do the same with the form, each component of the form becomes centered in the page which is wrong. How do I center a correct looking form beneath the centered table?
Example Code
library(shiny)
library(reactable)
ui <- fluidPage(
fluidRow(
column(12, align="center", reactableOutput("table")),
),
fluidRow(
column(12,
div(id = "form",
textInput("email", "Email", width = "250px", placeholder = "joe#example.com"),
radioButtons(inputId = "pref",
label ="Here's a label:",
choiceNames = list(
"First choice",
"Second choice"),
choiceValues = list(
"v1", "v2"
)),
actionButton("submit", "Enter", class = "btn-primary", width = 250,
style="color: #FFF; background-color: #132EBA;"),
)
)
)
)
server <- function(input, output, session) {
output$table <- renderReactable({
reactable(iris,
fullWidth = FALSE)
})
observeEvent(input$submit, {
# Do something!
})
}
shinyApp(ui, server)
You need to create 2 div elements and give them CSS properties :
first one is centered
second one is an inline-block and aligned left
Source : CSS: Center block, but align contents to the left
So it gives
library(shiny)
library(reactable)
ui <- fluidPage(
fluidRow(
column(12, align="center", reactableOutput("table")),
),
fluidRow(
column(12,
div(id = "form",
style = "text-align: center;",
div(
id = "form_content",
style = "display:inline-block; text-align: left;",
textInput("email", "Email", width = "250px", placeholder = "joe#example.com"),
radioButtons(inputId = "pref",
label ="Here's a label:",
choiceNames = list(
"First choice",
"Second choice"),
choiceValues = list(
"v1", "v2"
)),
actionButton("submit", "Enter", class = "btn-primary", width = 250,
style="color: #FFF; background-color: #132EBA;")
)
)
)
)
)
server <- function(input, output, session) {
output$table <- renderReactable({
reactable(iris,
fullWidth = FALSE)
})
observeEvent(input$submit, {
# Do something!
})
}
shinyApp(ui, server)
I am trying to have an action button within the Body of a tab (called "Widgets" in code) link to a different tab (called "data_table" in code). I know how to do this if the tab that I want to connect to, "data_table", is one of the menuItems that appears on the sidebarMenu. However, I do not wish for a link to the "data_table" tab to appear in the sidebar. I am stuck. I would have thought I need an "observeEvent"-type command which links the action button to the "data_table" tab. But I don't know what that is. Advice welcome. The code shows the UI side of things.
ui <- dashboardPage(
dashboardHeader(title = "My query"),
dashboardSidebar(
sidebarMenu(
menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
menuItem("Widgets", tabName = "widgets", icon = icon("th"))
)
),
dashboardBody(
tabItems(
tabItem(tabName = "dashboard",
h2("Dashboard tab content")),
tabItem(tabName = "widgets",
h2("Widgets"),
actionButton(inputId="seedata", label = "See data")),
tabItem(tabName = "data_table",
h2("Table with the data"))
)
)
)
server <- function(input, output, session) { }
shinyApp(ui, server)
Perhaps you are looking for something like this.
ui <- dashboardPage(
dashboardHeader(title = "My query"),
dashboardSidebar(
sidebarMenu(# Setting id makes input$tabs give the tabName of currently-selected tab
id = "tabs",
menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
menuItem("Widgets", tabName = "widgets", icon = icon("th"))
)
),
dashboardBody(
tabItems(
tabItem(tabName = "dashboard",
h2("Dashboard tab content")),
tabItem(tabName = "widgets", h2("Widgets"),
fluidRow(
tabBox(id = "tabset1", height = "850px", width=12, title = "My Data",
### The id lets us use input$tabset1 on the server to find the current tab
tabPanel("Table with the data", value="tab1", " ",
actionButton(inputId="seedata", label = "See data"),
uiOutput("dataTable")
),
tabPanel("Display Data Table", value="tab2", " ",
#uiOutput("someoutput")
DT::dataTableOutput("testtable")
)
)
)
))
)
)
server <- function(input, output, session) {
output$dataTable <- renderUI({
tagList(
div(style="display: block; height: 350px; width: 5px;",HTML("<br>")),
actionBttn(inputId="datatable",
label="Data Table",
style = "simple",
color = "success",
size = "md",
block = FALSE,
no_outline = TRUE
))
})
observeEvent(input$datatable, {
updateTabItems(session, "tabs", "widgets")
if (input$datatable == 0){
return()
}else{
## perform other tasks if necessary
output$testtable <- DT::renderDataTable(
mtcars,
class = "display nowrap compact", # style
filter = "top", # location of column filters
options = list( # options
scrollX = TRUE # allow user to scroll wide tables horizontally
)
)
}
})
observeEvent(input$datatable, {
updateTabsetPanel(session, "tabset1",
selected = "tab2")
})
}
shinyApp(ui, server)
I have made a shinydashboard in R to show all of my data, as looks better than standard shiny.
Trying to figure out how to do the equivalent of "navbarPage" in the dashboard (ie have multiple pages that show different data, rather than having all the data in different boxes on the same page).
I tried to do simply add "navbarPage(" to the code but this comes up with multiple errors)
The example at shiny dashboard get started page answers your question. For your convenience, here it is.
body <- dashboardBody(
fluidRow(
tabBox(
title = "First tabBox",
# The id lets us use input$tabset1 on the server to find the current tab
id = "tabset1", height = "250px",
tabPanel("Tab1", "First tab content"),
tabPanel("Tab2", "Tab content 2")
),
tabBox(
side = "right", height = "250px",
selected = "Tab3",
tabPanel("Tab1", "Tab content 1"),
tabPanel("Tab2", "Tab content 2"),
tabPanel("Tab3", "Note that when side=right, the tab order is reversed.")
)
),
fluidRow(
tabBox(
# Title can include an icon
title = tagList(shiny::icon("gear"), "tabBox status"),
tabPanel("Tab1",
"Currently selected tab from first box:",
verbatimTextOutput("tabset1Selected")
),
tabPanel("Tab2", "Tab content 2")
)
)
)
shinyApp(
ui = dashboardPage(
dashboardHeader(title = "tabBoxes"),
dashboardSidebar(),
body
),
server = function(input, output) {
# The currently selected tab from the first box
output$tabset1Selected <- renderText({
input$tabset1
})
}
)
I am trying to have content on 2 different tabs using shinydashboard so I use tabItems to put 2 tabItem but I do not see the tabs when I Run the app. Any idea how to see the tabs?
Also is there a way to attach the sidebar controls to the tabs? For example I have 2 tabs below Tab1 and tab2. Is it possible to only have the sidebar items with TabName = Tab1 appear when you are on tab 1?
Here is code you can run:
server.r
function(input, output,session) {
output$Text<-renderUI({
# if(is.null(input$Symbol) == FALSE)
# {
# browser()
rows = length(ReactiveData())
if(rows ==1 )
{ dat=c("a","")
}else{
dat=c("a","b","")
}
selectInput("Text", "select text:", c(dat,""),selected = "", multiple = TRUE)
# }
})
ReactiveData<- reactive({
return(rnorm((as.numeric(input$t)*as.numeric(input$b))))
})
# output$plot1 <- renderPlot({
# print("in plot 1")
# plot(ReactiveData(),type='p', main = input$t)
# })
Reactivet<- reactive({
return(as.numeric(input$t))
})
output$plot1 <- renderPlot({
print("in plot 1")
plot(ReactiveData(),type='p', main = Reactivet())
})
output$plot2<- renderPlot({
print("in plot 2")
plot(c(as.numeric(input$t)),type='b')
})
output$plot3<- renderPlot({
print("in plot 3")
plot( as.numeric(input$Plot3Input),type='b')
})
output$downloadData <- downloadHandler(
filename = function() {
paste("test", '.csv', sep='')
},
content = function(file) {
write.csv(c(1,2,3,4), file)
}
)
}
ui.r
library(shinydashboard)
dashboardPage(skin="black",
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(
sidebarMenu(
menuItem(selectInput("b", "b:", c(1,2),selected = 1), tabName ="Tab1"),
menuItem(selectInput("t", "t:", c(1,2),selected = 1), tabName ="Tab1"),
menuItem(downloadButton('downloadData', label= 'Download', class= "mybutton"), tabName ="Tab1"),
menuItem(uiOutput("Text"), tabName ="Tab1"),
menuItem(selectInput("Plot3Input", "Input:", c(1,2,3,4,5,6),selected = 1), tabName ="Tab2")
),
tags$head(tags$style(".mybutton{background-color:red;} .skin-black .sidebar .mybutton{color: green;}") )
),
# dashboardBody(
# # Boxes need to be put in a row (or column)
# tabItems(
# tabItem(tabName = "Tab1",
# fluidRow(
# column(width=6,
# box(plotOutput("plot1", height = 250))
# ),
# column(width=6,
# box(plotOutput("plot2", height = 250))
# )
# )
# ),
# tabItem(tabName = "Tab2",
# fluidRow(
# column(width=6,
# box(plotOutput("plot3", height = 250))
# )
# )
# )
# )
# )#end dashboard
dashboardBody(
fluidRow(
tabBox(
title = "First tabBox",
id = "tabset1", height = "400px",
tabPanel("Tab1", box(plotOutput("plot1", height = 250)),
box(plotOutput("plot2", height = 250))),
tabPanel("Tab2", plotOutput("plot3", height = 250)),width=11
)
)
)
)
code to run app
library(shiny)
runApp("C://Users/me/pathtofolder")
Here is the output you can see that there no tabs:
Change your corresponding code block of ui.R with this:
dashboardBody(
fluidRow(
tabBox(
title = "First tabBox",
id = "tabset1", height = "400px",
tabPanel("Tab1", box(plotOutput("plot1", height = 250)),
box(plotOutput("plot2", height = 250))),
tabPanel("Tab2", plotOutput("plot3", height = 250)),width=11
)
)
)