向 Reactable 列添加 css 样式

Question

我希望向 Reactable 中的列添加条件彩色方块而不是数字 table。

例如，如果 Flag <=2，此 table 的 Flag 列将为红色，如果 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)
            })
          ))

这是我认为将创建我的彩色方块的 css 文件。

 .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;
}

我认为这是一个相关的 Reactable example，在单独的文件中有 R 和 css 以及条件格式。

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%);
}

但是，我无法用“状态”列中的彩色椭圆重现此示例。我不确定如何将 R 代码与 css 代码相关联。

Answer 1

在 reference on conditional styling and example for custom css 之后，我在 markdown 中创建了一个解决方案。我将 class 参数用于 CSS class 的完整列，并将函数应用于 style 参数以不同地设置每一行的样式。



    ---
    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%);"
          )
        }
      )
    ))
    ```

向 Reactable 列添加 css 样式

Add css styling to Reactable column

css

r

reactable