I would like to to reverse the positions of the 'number of entries' and 'search box' at the top of the data table, so that the search box appears on the left and entries on the right. Is this somehow possible?
library(DT)
datatable(iris)
Here is a minimal example using float
This should work for this example but make sure you check id for the search and entry boxes in your shiny app. In this example they are #DataTables_Table_0_length and #DataTables_Table_0_filter.
In Chrome, if you right click and click on Inspect then scroll down to find the parts that you are after.
library(DT)
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(
HTML(
"#DataTables_Table_0_length {
float: right
}
#DataTables_Table_0_filter {
float: left
}
"
))),
h2("The mtcars data"),
DT::dataTableOutput("mytable")
)
server <- function(input, output) {
output$mytable = DT::renderDataTable({
mtcars
})
}
shinyApp(ui, server)
Related
In the example below, the 'Selections Saved' notification appears in the bottom-right corner of the application. Instead I would like it to appear in the sidebar (either directly under the action button, or simply at the bottom left of the side-bar):
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
actionButton("apply", "Save Selections")
),
dashboardBody()
)
server <- function(input, output) {
observeEvent(input$apply, {
showNotification("Selections Saved", duration = 2)
})
}
shinyApp(ui, server)
I know that there are similar questions already, but these result in the notification being shown in the middle of the screen, rather than in the sidebar.
Have you tried to just change the percentages?
# bottom-left
custom_notes <- HTML(
"
.shiny-notification {
position: fixed;
top: calc(0%);
left: calc(100%);
}
"
)
And them put tags$head(tags$style(custom_notes)) inside ui, before the dashboard elements?
Hello.
I would like to change the color of this dropdown box which appears for numeric filters.
Sample code:
library(DT)
library(shiny)
ui <- basicPage(
h2("The mtcars data"),
DT::dataTableOutput("mytable")
)
server <- function(input, output) {
output$mytable = DT::renderDataTable({
DT::datatable(mtcars,filter="top")
})
}
shinyApp(ui, server)
Thanks
You only have to modify the suitable CSS on the ui function:
ui <- basicPage(
h2("The mtcars data"),
DT::dataTableOutput("mytable"),
tags$style(type = "text/css",
".noUi-connect {background: red;}")
)
Update
As explained in the comments, you can see in the next image (open it to see larger) where is the CSS modified to get a dark red where you want (in the right column of left window above is the element.style to which my comment below refers). The issue I am not able to solve is how to modify that tag (the shadowed one at the left) ` without a class or an id, with CSS or Shiny.
Is it possible to put all tabPanels in a row below the title of a navbarPage? In other words, I would like to keep the appearance of the navbarPage but on two rows: the title on the first one, and the tabPanels on the second. This would allow to "isolate" the title by keeping it on a single row.
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Note that this doesn't have to be a navbarPage. Any UI that could do that is accepted but it has to have the appearance of a navbarPage (no space between the rows, etc.). Hope this is clear enough.
Also asked on RStudio Community
You can force the title to have 100% width via CSS, thereby moving the tabPanels below it:
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab"),
tags$style(HTML(".navbar-header { width:100% }
.navbar-brand { width: 100%; text-align: center }")) # center text
)
server <- function(input, output, session) {}
shinyApp(ui, server)
I want to add a tabset in my shiny semantic page. Elements that are defined directly in the tab are shown in the app, but render objects do not appear. Here an example:
UI.R:
library(shiny)
shinyUI(semanticPage(
suppressDependencies("bootstrap"),
shinyjs::useShinyjs(),
tabset(tabs=
list(
list(menu="First Tab", content=
div(class="ui text shape",
div(class="sides",
div(class="ui header side active","This side starts visible."),
div(class="ui header side","This is yet another side"),
div(class="ui header side","This is the last side")
),
tags$button(id="test",class="ui button","Flip")
)),
list(menu="Second Tab",content=plotOutput("plot1"))
))
))
Server.R:
library(shiny)
library(shinyjs)
library(shiny.semantic)
library(highlighter)
jsCode <- "
$(document).ready(function() {
$('.shape').shape();
$('#test').on('click', function(){$('.shape').shape('flip up');});
});
"
shinyServer(function(input, output) {
runjs(jsCode)
output$plot1 <- renderPlot(plot(1,1))
})
Here the renderplot "plot1" is not shown in the tab. How can I fix this issue?
I'm getting stuck while building a Shiny Dashboard in R (using the shinydashboard package). I want to lock my sidebar so that it does not scroll while I look through the content of my tabs, but I'm not sure how to pull this off.
As an example, the following block of code will create a long-scrolling dashboard. It would be nice to lock the sidebar so that you can still see the menu tabs whilst scrolling through the obscenely-long data table.
library(ggplot2) ## for mpg dataset
library(shinydashboard)
## ui
ui <- dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(sidebarMenu(menuItem("MPG", tabName="mpg"))),
dashboardBody(tabItems(tabItem(tabName="mpg", fluidRow(tableOutput("mpgTable"))))))
## server
server <- function(input, output) {
output$mpgTable <- renderTable({mpg})
}
## launch dashboard
shinyApp(ui, server)
You should just add the style = "position:fixed; overflow: visible" at the ui sidebar.
library(ggplot2) ## for mpg dataset
library(shinydashboard)
## ui
ui <- dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(
sidebarMenu(style = "position: fixed; overflow: visible;",
menuItem("MPG", tabName="mpg"))),
dashboardBody(
tabItems(
tabItem(tabName="mpg",
fluidRow(tableOutput("mpgTable"))))))
## server
server <- function(input, output) {
output$mpgTable <- renderTable({mpg})
}
## launch dashboard
shinyApp(ui, server)
**disclaimer: I am no css expert by any means
You can set the option in DT for the actual table but if you want to have the tab in the actual dashboard scroll free from the sidebar(assuming you aren't using a navbar based on your code) give this a shot:
the css would look like this:
.sidebar {
color: #FFF;
position: fixed;
width: 220px;
white-space: nowrap;
overflow: visible;
}
if you have a .css file working in your 'www' folder you can call it from the ui with a number of functions; so let's assume your file is named "style.css".
the ui now looks like this:
dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(
sidebarMenu(
menuItem("MPG",tabName="mpg")
)
),
dashboardBody(
#here's where you throw the css into the header
tags$head(
includeCSS('www/style.css')
),
tabItems(
tabItem(tabName="mpg",
fluidRow(tableOutput("mpgTable"))
)
)
)
)
Nothing on the server side changes, but you might want to check out using DT or setting options in your table to work more easily with the data. DT package ref.
Hope this helps.
#HipHopPhysician can you post what you're trying to run? otherwise here's the simplest way to use DT as a workaround...there are a lot of options to set; so i'm just going to give the default:
library(ggplot2)
library(DT)
library(shinydashboard)
ui <-
dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(
sidebarMenu(
menuItem("MPG",tabName="mpg")
)
),
dashboardBody(
#here's where you throw the css into the header
tags$head(
includeCSS('www/style.css')
),
tabItems(
tabItem(tabName="mpg",
dataTableOutput("mpgTable"))
)
)
)
server <- function(input, output) {
output$mpgTable <- renderDataTable({ mpg })
}