CODEWITHSUNDEEP
rshinyreactable
Will
Will

Reputation: 421

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)

Upvotes: 1

Views: 3407

Answers (1)

Will
Will

Reputation: 421

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)

Upvotes: 11

Related Questions