抑制rReact基团聚集中的括号

zyfwsgd6  于 2023-07-31  发布在  React
关注(0)|答案(3)|浏览(118)

我使用R的reactable包来创建一个按特定变量分组的数据表。这将显示一个折叠的表,该表可以展开以显示子行。折叠的行标题旁边有一组括号,指示下面嵌套了多少个子行。是否可以取消这组括号,使其不显示?这会让我的用户感到困惑。
这里有一个例子。如果我运行下面的代码块,它会生成一个按物种分组的表,每个物种旁边都有一组括号,比如“Setosa(50)”。如何从这个字符串中删除“(50)”,使它只显示“Setosa”?谢谢你的帮助!

library(reactable)
reactable(iris, groupBy = "Species", columns = list(
  Sepal.Length = colDef(aggregate = "count"),
  Sepal.Width = colDef(aggregate = "mean"),
  Petal.Length = colDef(aggregate = "sum"),
  Petal.Width = colDef(aggregate = "max")
))

字符串

2mbi3lxu

2mbi3lxu1#

这可以通过一些css的魔法来实现:
首先,在reactable调用中添加一些自定义类:

library(reactable)
reactable(
   iris, 
   groupBy = "Species",
   class = "noParenthesis"
)

字符串
然后添加以下样式到你的css文件:

.noParenthesis .rt-expandable > div {
  height: 21px;
  display: -webkit-inline-box;
}

.noParenthesis .rt-expandable > div > span {
    display: table-caption;
    color: transparent;
}

.noParenthesis .rt-expandable > div > span:first-line {
    color: #333333;
}

q35jwt9p

q35jwt9p2#

这个问题很老了,但是有一种更干净的方法来处理这个问题,而不是直接调整CSS。您可以在colDef方法的grouped属性中编写一个JavaScript函数,该函数定义分组时单元格文本中呈现的内容。下面是文档中的一个简单示例,它实现了所需的结果:

colDef(
  # Render grouped cells without the row count
  grouped = JS("function(cellInfo) {
    return cellInfo.value
  }")

字符串
您可以在他们的文档中看到这一点

gk7wooem

gk7wooem3#

看起来答案还没有-根据维护者glin的问题https://github.com/glin/reactable/issues/94
这在今天是不可能的,即使是使用自定义JS,但它以前被要求过(#33)。我会把它放在下一个版本的列表中。用法可能看起来像这样:

相关问题