CODEWITHSUNDEEP
datatableshinyshinydashboarddt
JCB
JCB

Reputation: 55

Changing color for cells on DT table in Shiny

I am new to Shiny/R and trying to change the background color of a cell (DT table) base on value of the Cell. For example, the cell value on the Rec_Color column are RED, GREEN and YELLOW. I would like to color the cell based on the string values. I try using the "formatStyle" function but it is not working for me. I am getting this error:

ERROR.You specified the columns: Rec_Color, but the column names of the data are

Here is the code for my table (and filter-inputs):

output$spTable <- DT::renderDataTable ({data <- TrustSp_Data  # Code for the trust species table and the selecInputs

    if (input$Tax != "All") {
        data <- data[data$Taxon == input$Tax,] # selectInput for Taxa
    }

    if (input$Rcolor != "All") {
        data <- data[data$Rec_Color == input$Rcolor,] # selectInput for Recovery color
    }

    if (input$Cstat != "All") {
        data <- data[data$Status == input$Cstat,] # selectInput for conservation status ( T&E, At-risk, etc...)
    }

    if (input$Rtime != "All") {
        data <- data[data$Rec_Time == input$Rtime,] # selectInput for Recovery Timeline (1:6)
    }

    if (input$Autho != "All") {
        data <- data[data$Authority == input$Autho,] # selectInput for federal Authority ( ESA, MBTA, etc...)
    }

    data
}, rownames=FALSE, #remove first column row numbers
   extensions = c('ColReorder','Responsive',"FixedHeader"), # add "extensions = "Responsive" to add large number of columns

 # caption = "Table 1: This is a sample caption for the table.", # Add caption at the top

   caption = htmltools::tags$caption( # Add caption at the bottom of the table
                                     style = 'caption-side: bottom; text-align: center;',
                                     'Dataset:', htmltools::strong("Version 03-January 10, 2019")),


   colnames = c("ID"=1,"Species Name"=3,"Scientific Name"=4, "Sustainability Color"=7, "Sustainability Timeline"=8, "ITIS ID"=9), # Change columns names


options = list(
     fixedHeader = TRUE,
     scrolly = TRUE,
     colReorder = TRUE,
     columnDefs = list(list(className = 'dt-center', targets = c(0,1,7))), # columns aligment to center
     language = list(sSearch = "Search Table:"),
initComplete = JS(
  "function(settings, json) {",
  "$(this.api().table().header()).css({'background-color': '#22415e', 'color': '#fff'});",
  "}")

  ) %>% formatStyle(columns = "Rec_Color",
            backgroundColor = styleEqual(
           c("GREEN", "RED", "YELLOW"), c('green', "red", 'yellow'))

)

Upvotes: 1

Views: 2334

Answers (1)

Shrek Tan
Shrek Tan

Reputation: 2863

Despite you haven't mentioned what the data looks like, I believe the solution is to change the following lines from

formatStyle(columns = "Rec_Color",
            backgroundColor = styleEqual(
           c("GREEN", "RED", "YELLOW"), c('green', "red", 'yellow'))

to 

formatStyle(columns = "Sustainability Color",
            backgroundColor = styleEqual(
           c("GREEN", "RED", "YELLOW"), c('green', "red", 'yellow'))

The reason is that you have changed the column name by specifying the colnames= option.

There's another issue in your code, which is the formatStyle() function is called on DT::renderDataTable() but it should be DT::datatable(). So you should also modify the code to this:

    output$spTable <- DT::renderDataTable ({data <- TrustSp_Data  # Code for the trust species table and the selecInputs

        if (input$Tax != "All") {
            data <- data[data$Taxon == input$Tax,] # selectInput for Taxa
        }

        if (input$Rcolor != "All") {
            data <- data[data$Rec_Color == input$Rcolor,] # selectInput for Recovery color
        }

        if (input$Cstat != "All") {
            data <- data[data$Status == input$Cstat,] # selectInput for conservation status ( T&E, At-risk, etc...)
        }

        if (input$Rtime != "All") {
            data <- data[data$Rec_Time == input$Rtime,] # selectInput for Recovery Timeline (1:6)
        }

        if (input$Autho != "All") {
            data <- data[data$Authority == input$Autho,] # selectInput for federal Authority ( ESA, MBTA, etc...)
        }
        DT::datatable(
          data, rownames=FALSE, #remove first column row numbers
          extensions = c('ColReorder','Responsive',"FixedHeader"), # add "extensions = "Responsive" to add large number of columns

          # caption = "Table 1: This is a sample caption for the table.", # Add caption at the top

          caption = htmltools::tags$caption( # Add caption at the bottom of the table
            style = 'caption-side: bottom; text-align: center;',
            'Dataset:', htmltools::strong("Version 03-January 10, 2019")),


          colnames = c("ID"=1,"Species Name"=3,"Scientific Name"=4, "Sustainability Color"=7, "Sustainability Timeline"=8, "ITIS ID"=9), # Change columns names
          options = list(
            fixedHeader = TRUE,
            scrolly = TRUE,
            colReorder = TRUE,
            columnDefs = list(list(className = 'dt-center', targets = c(0,1,7))), # columns aligment to center
            language = list(sSearch = "Search Table:"),
            initComplete = JS(
              "function(settings, json) {",
              "$(this.api().table().header()).css({'background-color': '#22415e', 'color': '#fff'});",
              "}")

          )
        ) %>% formatStyle('Sustainability Color', backgroundColor = styleEqual(c("RED","GREEN","YELLOW"), c('red',"green","yellow")))

    })

I hope this solves your problem.

BTW, when asking questions, the example is better to be reproducible. Your example is unreproducible because the data.frame is unknown and the code is only part of a large shiny app, which can't be run directly.

Upvotes: 1

Related Questions