DT Table Styling

[BerndMaier]

Hi, thanks for this awesome packages - I really like the theme editor and it really helps me understand the CSS styling part and moving forward in creating own themes.

I just have a question about the Datatable styling when I use the DT functions for colors.

I use the DTs formatStyle to change the backgroundcolor by DeviceName variable to help the user

With Standard theme:

With Theme Switcher:

It seems the colors are set by the CSS and DT can't overrule this.

Is there a way to apply DTs formatStyle ?

Thank you very much, Bernd

[nik01010]

Thanks for flagging this, I hadn't come across that particular use-case before.

It's quite likely the dashboardthemes package is overriding the row colours (in order for tables to be styled consistently with the overall app theme), after which DT can't set them dynamically any more.

I will look into whether it's possible to allow both packages to work without clashing.

Are you able to post a short code snippet for your DT table, so I can reproduce the issue?

[BerndMaier]

Sure, i hope this works

app.R

library(shiny) library(shinydashboard) library(DT)

options(DT.options = list(pageLength = 5)) df = as.data.frame(cbind(matrix(round(rnorm(50), 3), 10), sample(0:1, 10, TRUE)))

ui <- dashboardPage( dashboardHeader(), dashboardSidebar(), dashboardBody( DT::dataTableOutput("mytable") ) )

server <- function(input, output) { output$mytable = DT::renderDataTable({ datatable(df) %>% formatStyle( 'V6', target = 'row', backgroundColor = styleEqual(c(0, 1), c('gray', 'yellow')) ) })

} shinyApp(ui, server)

---

Best, Bernd

[nik01010]

I think you can resolve this issue by creating your own theme object using the shinyDashboardThemeDIY function, then setting the tableBackColor and tableBorderColor parameters to "auto" instead of a fixed colour. That will mean the theme isn't trying to change the table row colours, and it will allow DT to dynamically change the row colours as needed.

See a reproducible example below.

Hopefully that helps.

library(shiny)
library(shinydashboard)
library(DT)
library(dashboardthemes)

options(DT.options = list(pageLength = 5))
df = as.data.frame(cbind(matrix(round(rnorm(50), 3), 10), sample(0:1, 10, TRUE)))

theme_grey_light <- shinyDashboardThemeDIY(

  ### general
  appFontFamily = "Arial"
  ,appFontColor = "rgb(45,45,45)"
  ,primaryFontColor = "rgb(15,15,15)"
  ,infoFontColor = "rgb(15,15,15)"
  ,successFontColor = "rgb(15,15,15)"
  ,warningFontColor = "rgb(15,15,15)"
  ,dangerFontColor = "rgb(15,15,15)"
  ,bodyBackColor = "rgb(240,240,240)"

  ### header
  ,logoBackColor = "rgb(120,120,120)"

  ,headerButtonBackColor = "rgb(120,120,120)"
  ,headerButtonIconColor = "rgb(220,220,220)"
  ,headerButtonBackColorHover = "rgb(100,100,100)"
  ,headerButtonIconColorHover = "rgb(60,60,60)"

  ,headerBackColor = "rgb(120,120,120)"
  ,headerBoxShadowColor = "#dfdfdf"
  ,headerBoxShadowSize = "3px 5px 5px"

  ### sidebar
  ,sidebarBackColor = "rgb(255,255,255)"
  ,sidebarPadding = 0

  ,sidebarMenuBackColor = "transparent"
  ,sidebarMenuPadding = 0
  ,sidebarMenuBorderRadius = 0

  ,sidebarShadowRadius = "3px 5px 5px"
  ,sidebarShadowColor = "#dfdfdf"

  ,sidebarUserTextColor = "rgb(115,115,115)"

  ,sidebarSearchBackColor = "rgb(240,240,240)"
  ,sidebarSearchIconColor = "rgb(100,100,100)"
  ,sidebarSearchBorderColor = "rgb(220,220,220)"

  ,sidebarTabTextColor = "rgb(100,100,100)"
  ,sidebarTabTextSize = 14
  ,sidebarTabBorderStyle = "none"
  ,sidebarTabBorderColor = "none"
  ,sidebarTabBorderWidth = 0

  ,sidebarTabBackColorSelected = "rgb(230,230,230)"
  ,sidebarTabTextColorSelected = "rgb(0,0,0)"
  ,sidebarTabRadiusSelected = "0px"

  ,sidebarTabBackColorHover = "rgb(245,245,245)"
  ,sidebarTabTextColorHover = "rgb(0,0,0)"
  ,sidebarTabBorderStyleHover = "none solid none none"
  ,sidebarTabBorderColorHover = "rgb(200,200,200)"
  ,sidebarTabBorderWidthHover = 4
  ,sidebarTabRadiusHover = "0px"

  ,boxBackColor = "rgb(248,248,248)"
  ,boxBorderRadius = 5
  ,boxShadowSize = "none"
  ,boxShadowColor = ""
  ,boxTitleSize = 18
  ,boxDefaultColor = "rgb(225,225,225)"
  ,boxPrimaryColor = "rgb(95,155,213)"
  ,boxInfoColor = "rgb(180,180,180)"
  ,boxSuccessColor = "rgb(112,173,71)"
  ,boxWarningColor = "rgb(237,125,49)"
  ,boxDangerColor = "rgb(232,76,34)"

  ,tabBoxTabColor = "rgb(248,248,248)"
  ,tabBoxTabTextSize = 14
  ,tabBoxTabTextColor = "rgb(100,100,100)"
  ,tabBoxTabTextColorSelected = "rgb(45,45,45)"
  ,tabBoxBackColor = "rgb(248,248,248)"
  ,tabBoxHighlightColor = "rgb(200,200,200)"
  ,tabBoxBorderRadius = 5

  ### inputs
  ,buttonBackColor = "rgb(215,215,215)"
  ,buttonTextColor = "rgb(45,45,45)"
  ,buttonBorderColor = "rgb(150,150,150)"
  ,buttonBorderRadius = 5

  ,buttonBackColorHover = "rgb(190,190,190)"
  ,buttonTextColorHover = "rgb(0,0,0)"
  ,buttonBorderColorHover = "rgb(150,150,150)"

  ,textboxBackColor = "rgb(255,255,255)"
  ,textboxBorderColor = "rgb(118,118,118)"
  ,textboxBorderRadius = 5
  ,textboxBackColorSelect = "rgb(245,245,245)"
  ,textboxBorderColorSelect = "rgb(108,108,108)"

  ### tables
  ,tableBackColor = "auto"
  ,tableBorderColor = "auto"
  ,tableBorderTopSize = 1
  ,tableBorderRowSize = 1

)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    theme_grey_light,
    # Table with dynamic row colours
    DT::dataTableOutput("mytable"),

    # Table with default row colours
    DT::dataTableOutput("mytable2")
  )
)

server <- function(input, output) {
  # Table with dynamic row colours
  output$mytable = DT::renderDataTable({
    datatable(df) %>% formatStyle(
      'V6',
      target = 'row',
      backgroundColor = styleEqual(c(0, 1), c('gray', 'yellow'))
    )
  })

  # Table with default row colours
  output$mytable2 = DT::renderDataTable({
    datatable(df)
  })
}
shinyApp(ui, server)

[BerndMaier]

:+1: Hi - perfect, works really fine and quite easy implementation.

Is it possible to add these adjusted and self created themes to the themes switcher ? Saw that in (moduleChangeTheme.R) choices are listed.

[nik01010]

Good to hear that solved the issue.

I haven't tried using the switcher with custom themes, but think that might be possible if you tweak the serverChangeTheme function slightly as below.

It will need to get the chosen theme name from the drop-box, and depending on that name plug the appropriate custom theme object (you will need to have sourced all the custom theme objects elsewhere earlier in your app).

serverChangeTheme <- function(input, output, session)
{
  observeEvent(
    input$dbxChangeTheme, 
    {
      chosenThemeName <- input$dbxChangeTheme

      themeObject <- dplyr::case_when(
        (chosenThemeName == "grey_light_custom" ~ grey_light_custom),
        (chosenThemeName == "another_custom_theme" ~ another_custom_theme)
      )

      output$uiChangeTheme <- renderUI({
        themeObject
      })
    }
  )
}

[BerndMaier]

I'll give this a try

Thank you very much again