如何在reactable表格中对多列指定行进行条件格式化？

需求说明 #

需要对reactable表格中的所有数值列仅第1行应用以下条件格式化规则：

• 若第1行单元格数值大于第2行对应列数值，背景设为绿色
• 若与第2行数值相差在10%以内，背景设为橙色
• 若比第2行数值低10%以上，背景设为红色

解决方案 #

利用reactable的defaultColDef统一配置所有列的样式规则，通过style函数的row和col参数定位行与列，无需为每列重复编写格式化逻辑。核心逻辑是：

1. 判断当前行是否为第1行
2. 仅对数值列进行判断，排除非数值列（如示例中的name列）
3. 提取第1行和第2行的对应列数值，计算差值比例后应用对应背景色

完整代码示例 #

library(reactable)

set.seed(1)
name <- c("Player A", "Player B", "Team")
var1 <- rnorm(3, 1000, 200)
var2 <- rnorm(3, 1000, 200)
var3 <- rnorm(3, 1000, 200)

d <- data.frame(name, var1, var2, var3)

reactable(d,
          defaultColDef = colDef(
            align = "center",
            format = colFormat(digits = 1),
            style = function(value, index, row, col) {
              # 仅对第1行的数值列应用样式
              if (index == 1 && col$name != "name") {
                # 获取第2行对应列的数值
                row2_value <- d[2, col$name]
                # 计算差值比例
                diff_ratio <- (value - row2_value) / row2_value
                
                if (diff_ratio > 0) {
                  # 大于第2行数值：绿色背景
                  list(backgroundColor = "#90EE90")
                } else if (abs(diff_ratio) <= 0.1) {
                  # 相差10%以内：橙色背景
                  list(backgroundColor = "#FFA500")
                } else {
                  # 低于10%以上：红色背景
                  list(backgroundColor = "#FF6347")
                }
              } else {
                # 其他行/列保持默认样式
                list()
              }
            }
          )
)

代码说明 #

• index == 1：精准定位表格的第1行
• col$name != "name"：排除非数值的name列，只处理数值列
• diff_ratio <- (value - row2_value) / row2_value：计算第1行数值相对第2行的比例差值，用于判断区间
• 根据差值比例返回对应的背景色样式，其他行/列返回空列表保持默认格式

内容的提问来源于stack exchange，提问作者user13973103