rshinydt

Two colours in the same box

I am creating a shiny application in R and I am using the "datatable" package to work on the visual. Do you know if it's possible to assign two colours for the same box?

library(shiny)
library(DT)
library(tidyverse)


ui <- fluidPage(
  dataTableOutput("TabFin")
)

server <- function(input,output) {
  
  output$TabFin <- renderDataTable({
    vec1 <- c("cat","dog","human","cow","monkey")
    vec2 <- c(1,2,3,4,5)
    tab <- data.frame(Nom=vec1,Num=vec2)  
    datatable(tab, class = 'cell-border stripe', filter = 'top') %>%
      formatStyle(
        'Nom', 'Num',
        backgroundColor = styleEqual(c(1, 2, 3), c('gray', 'green', 'blue')))
   
  })
}    

shinyApp(server=server,ui=ui)

For example, we can see that 1 is grey, 2 is green and 3 is blue. But how do you make 4 blue and green, i.e. the cow square is half green and half blue?

enter image description here

Solution

  • I found a partial solution !

    library(shiny)
library(DT)
library(tidyverse)


ui <- fluidPage(
  DT::dataTableOutput("TabFin")
)

server <- function(input,output) {
  
  output$TabFin <- DT::renderDataTable({
    vec1 <- c("chat","chien","homme","vache","singe")
    vec2 <- c(1,2,3,4,5)
    tab <- data.frame(Nom=vec1,Num=vec2)  
    
    tab %>%
    datatable(class = 'cell-border stripe', 
              filter = 'top',
              rownames = FALSE,
              options = list(
                rowCallback = DT::JS(
                  'function(row, data) {
                            if (data[1] == 1)
                              $("td:eq(0)", row).css("background-color", "orange");
                            if (data[1] == 2)
                              $("td:eq(0)", row).css("background-color", "green");
                            if (data[1] == 3)
                              $("td:eq(0)", row).css("background", "linear-gradient(to right, skyblue, orange)");
                            if (data[1] == 4)
                              $("td:eq(0)", row).css("background", "linear-gradient(to right, skyblue, green)");
                            if (data[1] == 5)
                              $("td:eq(0)", row).css("background", "linear-gradient(to right, green, orange)");  
                  }'
                ) 
              )  
            )
  })
}    

shinyApp(server=server,ui=ui)

    Image