使用Reactable和Blogdown进行条件格式

如何解决使用Reactable和Blogdown进行条件格式

使用R的Reactable包和RMarkdown，我想创建一个表，其中 列的状态

如果我尝试根据其值设置“状态”列的格式，它将创建一个非彩色正方形。查看图片。

在下面的.Rmd文件中，只有在该列没有值的情况下，我才能让CSS在该列中制作彩色正方形。

总而言之，我想在状态列下添加彩色正方形（状态正方形为

“标记”列仅用于显示CSS正在工作。

RMarkdown文件

title: Conditional Colored Square in Reactable Table
author: IX
date: 'September 5,2020'
slug: test
categories: []
tags: []
output: 
  html_document
---

```{css,echo=FALSE}
 .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;
}
```



```{r,echo=FALSE,message=FALSE,warning=FALSE}
library("reactable")

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 = c(1,2,3,4,Flag = c("","","")
)

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

解决方法

使用css是正确的方法。

由于paste，颜色没有出现在您提供的示例中：

class <- paste0("tag box green",tolower(value))

这将导致green1，green2，...是未定义的选择器类。

尝试：

---
title: Conditional Colored Square in Reactable Table
author: IX
date: 'September 5,2020'
slug: test
categories: []
tags: []
output: 
  html_document
---

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


.green {
  background: green;
  color: green;
}

.red {
  background-color: red;
  color: red;
}
```



```{r,echo=FALSE,message=FALSE,warning=FALSE}
library("reactable")

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 = c(1,2,3,4,Flag =  c("","","")
)

reactable(orders,columns = list(
  Status = colDef(cell = function(value) {
    if (value <= 2) {
      class <- "box green"
    } else {
      class <- "box red"
    }
    htmltools::div(class = class,"")  
  }),Flag = colDef(cell = function(value) {
      class <- paste0("tag box")
      htmltools::div(class = class,value)
  })  
))