CODEWITHSUNDEEP
cssrshinydtshinythemes
anweb
anweb

Reputation: 63

DataTable in Shiny with shinytheme cyborg

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)

Upvotes: 2

Views: 2147

Answers (1)

GyD
GyD

Reputation: 4072

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:

Output

Upvotes: 2

Related Questions