trying to get a dark theme to work with datatables (DT) package in a shiny application. I've tried shinytheme("cyborg") and also downloading the cyborg CSS sheet from Bootswatch, (for call in datatables, style="bootstrap") but it doesn't seem to work when I use shinytheme. I need shinytheme for the rest of the app, since the css thows off all of the plots and spacing etc. Is there a dark CSS I could use in place of shinythemes which would work with plotly and datatables?
library(shiny)
library(shinythemes)
library(DT)
ui<- fluidPage(theme = shinytheme("cyborg"),
fluidRow(column(7, DTOutput("showdata")))
)
server<-function(input, output) {
output$showdata<- DT::renderDT({
datatable(iris, rownames=F, filter="top", extensions = "Scroller", width = "100%", style="bootstrap",
options = list(deferRender = TRUE, scrollY = 300,scrollX=FALSE, scroller = TRUE, dom = 'tp'),
selection ='single' ) %>%
formatStyle(columns=colnames(iris),
backgroundColor = '#282828', color = "white")
})
}
shinyApp(ui=ui, server=server)
dark table screenshot
note that the main issue is the filter text does not appear (maybe it is white because of shinytheme)
You can make the text visible if you set the font color to black. Just include some CSS in the header like: div.dataTables_scrollHead span {color: black;}
Example UI:
ui <- fluidPage(theme = shinytheme("cyborg"),
tags$head(tags$style("div.dataTables_scrollHead span {color: black;}")),
fluidRow(column(7, DTOutput("showdata")))
)
Output:
Related
I've got an R Shiny dashboard, and adding the package slickR, which works. However, i'm struggling to set the whitespace on side of each image to my desired color. Suggestions? I've even tried CSS and that doesn't seem to take.
fluidRow(
tags$div(
slickROutput("slickr"),
#style='background-color:red;' # didnt' work, got overwritten by slickR
) #close tags
) #close fluidRow
output$slickr <- renderSlickR({
imgs <- list.files("images/", pattern=".jpg", full.names = TRUE)
slickR(obj = imgs ,slideId = 'ex1',height = 450, width='100%')
})
Create a separate .css file and add the custom styling there to prevent it getting overwritten in the style attribute.
ui.R
fluidPage(
tags$head(
tags$style(rel = "stylesheet", type = "text/css", href = "slickr.css")
),
...,
fluidRow(
column(12, slickROutput("slickr"))
)
)
www/slickr.css
#slickr {
background-color: red;
}
There is more information about CSS here: https://shiny.rstudio.com/articles/css.html
I'm having some trouble displaying icons with sparklines within a DT::datatable column in a Shiny app even though I have escaped the HTML.
Edit: Removed 2nd question.
library(shiny)
library(dplyr)
ui <- fluidPage(
htmlwidgets::getDependency('sparkline'),
DT::dataTableOutput("table")
)
server <- function(input, output) {
raw_data <- data.frame(date = 2000:2021,
value = sample(100:500, 22),
icon = as.character(icon("arrow-up")))
data <- raw_data %>%
group_by(icon) %>%
# Create the sparkline
summarise("value" = sparkline::spk_chr(c(value),
xvalues = date,
tooltipFormat = '{{x}}: {{y}}'))
output$table <- DT::renderDataTable({
cb <- htmlwidgets::JS('function(){debugger;HTMLWidgets.staticRender();}')
DT::datatable(data = data,
escape = FALSE,
options = list(drawCallback = cb))
})
}
shinyApp(ui, server)
By default, the shiny::icon function:
generates the HTML code corresponding to the icon;
generates a script tag which includes the font-awesome icon library.
When you do as.character(icon(......, you only get the HTML code. The font-awesome library is not loaded, that's why the icon does not display.
The simplest way to get the icon is to use the glyphicon icon library, which is included in bootstrap so there's nothing to load (since bootstrap is loaded in Shiny apps):
as.character(icon("arrow-up", lib = "glyphicon"))
If you really want a font-awesome icon, there are two possibilities:
include the font-awesome library with a link tag;
or use the icon function elsewhere in your app, without as.character (you can hide it with the display:none CSS property if you don't want to see this icon) as shown below.
# add inside ui
tags$span(icon("tag"), style = "display: none;")
I'm trying to put some Datatables and Histograms inside boxes of defined height in a Shiny Dashboard, the problem is that when I fix the height (lets say, to 250), the datatable exceeds the limits.
I know we have "autowidth" to use with datatables, but havent seen nothing similar for the Height. I tried to fix the height of the datatable too, but that didn't work for me neither. Also, when I open the shiny in a smaller screen, the box would resize, but the datatable don't.
Here's an example of the problem
library(shiny)
library(shinydashboard)
library(htmltools)
ui <- dashboardPage(skin = "black", title = "Dashboard",
dashboardHeader(title = "Dashboard"),
dashboardSidebar(width = 300),
dashboardBody(
tags$head(tags$style(HTML("
div.box {
text-align: center;
border-style: solid;
border-bottom-color:red;
border-left-color:red;
border-right-color:red;
border-top-color:red;
border-bottom-width:20px;
border-top-width:20px;
border-left-width:20px;
border-right-width:20px;
}
"))),
box(title = "Resume", width = 4, column(12, withSpinner(DT::dataTableOutput("tab"))),
align="center", status = "danger",solidHeader = T,height=250)
))
server <- function(input, output) {
output$tab <- DT::renderDataTable({
datatable(head(iris),options=list("autoWidth"=TRUE, "pagelength"=15,"scrollY"=TRUE,"scrollX"=TRUE,"searching"=FALSE))
})
}
# Run the application
shinyApp(ui = ui, server = server)
Actually ScrollX works perfectly, why scrollY doesnt work aswell?
I read about using tabBox instead of Box, but that doesnt work neither.
Thank you very much in advance.
Try withSpinner(DT::dataTableOutput("tab", height = '240px'), currently your code is setting the height of the box, not the data table.
Also, try style = "overflow-x: scroll;" in the box() arguments for the scrolling
I've created some valueboxes with hyperlinks to different tabs within the app.
ui
tags$script(HTML("
var openTab = function(tabName){
$('a', $('.sidebar')).each(function() {
if(this.getAttribute('data-value') == tabName) {
this.click()
};
});
}
"))
server
output$tplot <- renderValueBox({
valueBox(
paste0(sum(rowSums(x)>0)),
tags$p(a("Total", onclick = "openTab('metrics')", href="#"),
style = "color: white;"),
icon = icon("boxes"),
color = "navy")
})
It works great, but the hyperlinks are always in a steelblue color and it limits my choice of readable colors for the valuebox.
Is there a way to change the hyperlink color? Is there a way to set the hyperlink color globally?
Hyperlinks have tag <a>. You can globally change hyperlink color by applying css to that tag. Here's minimal example -
library(shiny)
shinyApp(
ui = fluidPage(
tags$head(tags$style(HTML("a {color: red}"))),
tags$a("click here"),
br(),
tags$a("click here as well")
),
server = function(input, output, session) {
}
)
Is there a way to color fileInput button in R shiny? It looks like it is possible as shown here on this page on github. However I cannot find the code for this to be done.
This is the simple application that I would like to modify to have the button and progress bar colored red.
In ui.R:
library(shiny)
shinyUI(fluidPage(
titlePanel("Test"),
fileInput("Test","")
))
and server.R
library(shiny)
shinyServer(
function(input, output) {
}
)
Thanks for any advice.
You can use standard Bootstrap classes to style action buttons:
library(shiny)
shinyApp(
ui=shinyUI(bootstrapPage(
actionButton("infoButton", "Info", class="btn-info"),
actionButton("warningButton", "Warning", class="btn-warning"),
actionButton("successButton", "Success", class="btn-success"),
actionButton("dangerButton", "Danger", class="btn-danger"),
actionButton("defaultButton", "Default", class="btn-default"),
actionButton("primaryButton", "Primary", class="btn-primary")
)),
server=shinyServer(function(input, output, session){
})
)
Regarding file inputs as far as I know it is not possible without using CSS directly. Page you've linked is an opened pull-request and it doesn't look like it will be merged soon.
This answer provides a good description how to create fancy upload buttons with bootstrap. It should work just fine in Shiny as well.
CSS could be used in shiny to custom your fileInput widget !
Use the following code in order to color it in red.
NB - Any browser you're using to view the app should have developer tools that let you inspect elements and see styles applied to any element. You have to right click on the relevant element and choose inspect !
library(shiny)
ui <- fluidPage(
fileInput(inputId = "Test",label = ""),
tags$style("
.btn-file {
background-color:red;
border-color: red;
}
.progress-bar {
background-color: red;
}
")
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)