Search code examples
rshinyreactable

Conditional formatting multiple columns in reactable


I've been struggling with this for a while but can't get my head around it.

I want to generate a table with reactable, but conditionally format every (numerical) column with background shading. I know how to apply this to columns, as long as I manually enter the name of each column. But the point is that the table could have an arbitrary (possibly large) number of columns, so I would like to automatically apply this to all columns.

Importantly, columns represent different variables on different scales, so the formatting has to be applied separately for each column. I guess the secret is to create a big named list, i.e. extend the coldefs list with the other column names.

Below is an example with just one column. I have tried to extend this, but got in a huge mess, so I am not going to paste the messy code here to confuse anyone. Any help is really appreciated.

library(reactable)

df <- mtcars
df$mpg[2] <- NA

# Colour map for conditional formatting
orange_pal <- function(x){
  if (!is.na(x)){
    rgb(colorRamp(c("#ffe4cc", "#ffb54d"))(x), maxColorValue = 255)
  } else {
    "#e9e9e9" #grey
  }
}

# function which returns background colour based on cell value (using colour map)
stylefunc <- function(value) {
  normalized <- (value - min(mtcars$mpg)) / (max(mtcars$mpg) - min(mtcars$mpg))
  color <- orange_pal(normalized)
  list(background = color)
}

# list giving column formatting (using style function)
coldefs <- list(mpg = reactable::colDef(
  style = stylefunc
))

# create table
reactable(df,
          columns = coldefs)

Solution

  • OK so like going to the doctor, as soon as I went for help I found the solution myself. Well, here it is. Might help other people. The trick was that the style element of colDef() allows a function also with the name of the column. Using that, I was able to get the max and min of each column automatically.

    library(reactable)
    library(magrittr)
    
    df <- mtcars
    df$mpg[2] <- NA
    
    # Colour map for conditional formatting
    orange_pal <- function(x){
      if (!is.na(x)){
        rgb(colorRamp(c("#ffe4cc", "#ffb54d"))(x), maxColorValue = 255)
      } else {
        "#e9e9e9" #grey
      }
    }
    
    # function which returns background colour based on cell value (using colour map)
    # also takes column name as an input, which allows to get max and min
    stylefunc <- function(value, index, name) {
      normalized <- (value - min(mtcars[name], na.rm = T)) /
        (max(mtcars[name], na.rm = T) - min(mtcars[name], na.rm = T))
      color <- orange_pal(normalized)
      list(background = color)
    }
    
    # list giving column formatting (using style function) for single column
    coldefs <- list(
      reactable::colDef(style = stylefunc)
    )
    
    # get names of numerical cols
    numcols <- mtcars %>% dplyr::select(where(is.numeric)) %>% colnames()
    # replicate list to required length
    coldefs <- rep(coldefs,length(numcols))
    # name elements of list according to cols
    names(coldefs) <- numcols
    
    # create table
    reactable(df,
              columns = coldefs)