1

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

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

在下面的示例中，当您按分组进行分组时，group您会注意到A并C具有背景颜色，从数据中的第 1 行和第 3 行继承样式。我可以想象一种组织数据的 hacky 方式，因此只有非风格化的行排在第一位，但这并不合适，因为数据在初始呈现时会过于杂乱无章。

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

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"
    )
  )
)

可反应组背景样式

4

1 回答 1

0

我找到了一种使用 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"
    )
  )
)
于 2022-02-18T00:41:50.637 回答