0

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

例如，如果 Flag <=2，此表的 Flag 列将为 Red，如果 Flag > 2，则为 Green。

带有标志列的可反应表

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示例，它在单独的文件中包含 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 代码相关联。

4

1 回答 1

0

按照关于条件样式的参考和自定义 css 的示例，我在 markdown 中创建了一个解决方案。我class为整个列使用 CSS 类的参数，并将函数应用于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%);"
          )
        }
      )
    ))
    ```
于 2020-09-05T07:58:18.103 回答