Условное форматирование с помощью Reactable и Blogdown

Используя пакет R Reactable и RMarkdown, я хочу создать таблицу где столбец имеет зеленый квадрат для статуса ‹= 2 и красный квадрат в противном случае.

Если я попытаюсь отформатировать столбец состояния на основе его значения, он создаст неокрашенный квадрат. См. Изображение.

введите описание изображения здесь

В файле .Rmd ниже я могу заставить CSS сделать цветной квадрат в столбце, только если столбец не имеет значений.

Подводя итог, в столбце «Состояние» я бы хотел цветные квадраты (зеленый квадрат для состояния ‹= 2 и красный квадрат в противном случае) без видимых чисел, выровненных по левому краю с названием столбца« Состояние ».

Столбец Flag нужен только для того, чтобы показать, что 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, 5),
  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)
  })  
))

person ixodid    schedule 06.09.2020    source источник


Ответы (1)


Использование 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, 5),
  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)
  })  
))

введите описание изображения здесь

person Waldi    schedule 09.09.2020
comment
Заменяет ли это: htmltools :: div (class = class, #) число в столбце «Статус» цветным символом #, который не всегда виден из-за того же цвета фона? Можно ли сделать это без скрытого символа, как я продемонстрировал в столбце «Флаг»? Кроме того, цветные квадраты должны быть квадратами, а не прямоугольниками со скругленными углами. - person ixodid; 09.09.2020
comment
Я нашел скругленные квадраты аккуратными, но вы можете удалить их, установив border-radius из .tag на 1 пиксель или даже 0. '#' - это заполнитель и может быть любым символом (но не пробелом), он исчезает в цвете фона. Преимущество персонажа в том, что он легко центрируется под статусом. - person Waldi; 09.09.2020
comment
см. мое редактирование с обоими решениями: скрытый символ или поле - person Waldi; 09.09.2020