如何使用自定义分组设置可反应单元格背景的样式 select

Question

我有一些数据要使用 reactable 呈现。我正在根据值设置单元格背景的样式。数据中有许多有用的组，但这些组本身没有有用的聚合值。

我面临的问题是，当使用自定义分组 select 对数据进行分组时，table 将保留前几行数据的样式，因此背景是彩色的.我希望分组行为空白。

在下面的示例中，当按 group 分组时，您会注意到 A 和 C 的背景是彩色的，继承了数据中第 1 行和第 3 行的样式.我可以想象一种组织数据的怪异方式，因此只有非程式化的行排在第一位，但这并不合适，因为数据在初始呈现时会过于混乱。

有没有办法在分组时去除样式，但为具有值的行保留样式？

library(reactable)
library(htmltools)

set.seed(1)

data <- data.frame(
  group = rep(c("A", "B", "C"), each = 5),
  value = rnorm(15)
)

htmltools::browsable(
  tagList(
    div(tags$label("Group by", `for` = "tab")),
    tags$select(
      id = "tab",
      onchange = "Reactable.setGroupBy('tab', this.value ? [this.value] : [])",
      tags$option("None", value = ""),
      tags$option("Group", value = "group"),
    ),

    reactable(
      data,
      columns = list(
        value = colDef(style = function(value){
          if (value < 0) list(background = "#ffa500")
        })
      ),
      defaultPageSize = 15,
      elementId = "tab"
    )
  )
)

Answer 1

我找到了使用 JavaScript 的方法。我在下面的示例中将变量 value 更改为 num，以便更清楚如何应用该函数。

分组是通过 JavaScript 在浏览器中完成的，因此据我所知，没有办法在 R 中控制组样式。

library(reactable)
library(htmltools)

set.seed(1)

data <- data.frame(
  group = rep(c("A","B","C"), each = 5),
  num = rnorm(15)
)

htmltools::browsable(
  tagList(
    div(tags$label("Group by", `for` = "tab")),
    tags$select(
      id = "tab",
      onchange = "Reactable.setGroupBy('tab', this.value ? [this.value] : [])",
      tags$option("None", value = ""),
      tags$option("Group", value = "group"),
    ),

    reactable(
      data,
      columns = list(
        num = colDef(style = JS("function(rowInfo) {
        var value = rowInfo.row['num']
        if (value < 0) {
          var background = '#ffa500'
        } 
        return {background: background}
      }"))
      ),
      defaultPageSize = 15,
      elementId = "tab"
    )
  )
)

如何使用自定义分组设置可反应单元格背景的样式 select

How to style reactable cell background with custom grouping select

r

reactable

htmltools