Skip to content

backgroundColor for datatable (DT) not working for grid_page #22

@schwa021

Description

@schwa021

I have a shiny app built with a grid_page.
There is a datatable (DT) output
I do some formatting on the datatable. Most of the formatting works (hover, stripes, fontsize, etc....)

However, background color does not work.

Reproducible example follows:

library(shiny)
library(plotly)
library(gridlayout)
library(bslib)
library(DT)
library(tidyverse)

df <- tibble(
  x = c(-.5, -.1, 0, .1, .5),
  y = c("Dark Red", "Light Red", "White", "Light Green", "Dark Green")
)

formatdetails <- function(x){
  x <- 
    x %>% 
    datatable(
      rownames = FALSE,
      class = list(stripe = FALSE),
      options = list(
        pageLength = 5,
        lengthMenu = c(5, 10, 15, 20, 25),
        order = list(1, 'asc')
      )
    ) %>% 
    formatStyle(
      columns = "x",
      target = "row",
      backgroundColor = styleInterval(
        cuts = c(-.2, -.05, .05, .2),
        values = rev(c("#005600", "#42A644", "#F1F1F1", "#DD6BA6", "#841859"))
      ),
      color = styleInterval(
        cuts = c(-.2, -.05, .05, .2),
        values = c("#e6e6e6", "#e6e6e6", "#0d0d0d", "#e6e6e6", "#e6e6e6")
      )
    )  %>% 
    formatStyle(columns = c(1:4), fontSize = '80%')
} 

ui <- grid_page(
  layout = c(
    "header header",
    "area2  .     "
  ),
  row_sizes = c(
    "100px",
    "1fr"
  ),
  col_sizes = c(
    "590px",
    "1fr"
  ),
  gap_size = "1rem",
  grid_card_text(
    area = "header",
    content = "Test",
    alignment = "start",
    is_title = FALSE
  ),
  grid_card(
    area = "area2",
    card_body(DTOutput(outputId = "tblcard", width = "100%"))
  )
)

server <- function(input, output) {
   
output$tblcard <- renderDT(df %>% formatdetails())

}

shinyApp(ui, server)

The resulting table is all white:

image

### Tasks

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions