Add css styling to Reactable column

Question

I wish to add a conditional colored square instead of a number to a column in a Reactable table.

For example, this table's Flag column will be Red if Flag <=2 and Green if Flag > 2.

Reactable Table with Flag Column

library("tidyverse")
library("reactable")

df <- iris %>% 
  mutate(Flag = 1:150)

reactable(df[1:4,],
          columns = list(
            Species = colDef(width = 70),
          #  Flag = colDef(width = 50),
            
            Flag = colDef(style = function(value) {
              if (value > 2) {
                my_class <- "box red"
              } else if (value <= 2) {
                my_class <- "box green"
              }  
              # This is wrong
              htmltools::div(class = class)
            })
          ))

This is the css file that I think will create my coloured square.

 .row {
    display : flex;
    align-items : center;
    margin-bottom: 15px;
  }
.box {
  height: 20px;
  width: 20px;
  border: 1px solid black;
  margin-right : 5px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

I think this is a relevant Reactable example that has R and css in separate files as well as conditional formatting.

R

orders <- data.frame(
  Order = 2300:2304,
  Created = seq(as.Date("2019-04-01"), by = "day", length.out = 5),
  Customer = sample(rownames(MASS::painters), 5),
  Status = sample(c("Pending", "Paid", "Canceled"), 5, replace = TRUE)
)

reactable(orders, columns = list(
  Status = colDef(cell = function(value) {
    class <- paste0("tag status-", tolower(value))
    htmltools::div(class = class, value)
  })
))

css

.tag {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 15px;
  font-weight: 600;
  font-size: 12px;
}

.status-paid {
  background: hsl(116, 60%, 90%);
  color: hsl(116, 30%, 25%);
}

.status-pending {
  background: hsl(230, 70%, 90%);
  color: hsl(230, 45%, 30%);
}

.status-canceled {
  background: hsl(350, 70%, 90%);
  color: hsl(350, 45%, 30%);
}

However, I can't reproduce this example with the colored ovals in the Status column. I'm not sure how to relate the R code to the css code.

Answer 1

Following the reference on conditional styling and example for custom css, I've created a solution in markdown. I uses the class argument for a CSS class for the complete column, and applies a function to the style argument to style every row differently.

    ---
    title: "test"
    author: "test"
    date: "5 9 2020"
    output: html_document
    ---
    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo = TRUE)
    library(dplyr)
    library(reactable)
    ```
    ```{css, echo=FALSE}
    .tag {
      display: inline-block;
      padding: 2px 12px;
      border-radius: 15px;
      font-weight: 600;
      font-size: 12px;
    }
    ```
    ```{r}
    orders <- data.frame(
      Order = 2300:2304,
      Created = seq(as.Date("2019-04-01"), by = "day", length.out = 5),
      Customer = sample(rownames(MASS::painters), 5),
      Status = sample(c("Pending", "Paid", "Canceled"), 5, replace = TRUE)
    )
    reactable(orders, columns = list(
      Status = colDef(
        class = "tag",
        style = function(value) {
          switch(EXPR = tolower(value),
                 paid = "background: hsl(116, 60%, 90%); color: hsl(116, 30%, 25%);",
                 pending = "background: hsl(230, 70%, 90%); color: hsl(230, 45%, 30%);",
                 canceled = "background: hsl(350, 70%, 90%); color: hsl(350, 45%, 30%);"
          )
        }
      )
    ))
    ```