R Shiny调用updateReactable更新数据后条件列颜色未更新问题

• 基于Shiny搭建的应用使用reactable组件渲染任务状态表，状态列配置了基于值的条件颜色样式，数据通过updateReactable()方法实现无重渲染更新，避免丢失用户已设置的排序、筛选、分页等交互状态。
• 初始加载时条件样式正常：Open状态显示红底黑字，Done状态显示绿底白字。但调用updateReactable()更新数据后，单元格样式不会随值的变化同步更新，新修改为Done的单元格仍然保留Open的红色背景。

最小可复现代码 #

library(shiny)
library(reactable)

ui <- fluidPage(
  reactableOutput("table"),
  actionButton("go", "Go")
)

d <- data.frame(x = sample(letters, 10, replace = TRUE), status = "Open")
d[1, "status"] <- "Done"

cols_bg <- c("Open" = "red", "Done" = "green")
cols_font <- c("Open" = "black", "Done" = "white")

server <- function(input, output, session) {
  # 仅首次渲染表格，后续通过updateReactable更新数据
  output$table <- renderReactable({
    reactable(d,
              columns = list(
                status = colDef(name = "Status", 
                                style = function(value) {
                                  list(background = cols_bg[[value]],
                                       fontWeight = 600, color = cols_font[[value]])
                                })
              )
    )
  })
  
  # 点击按钮将部分行状态更新为Done，刷新表格数据
  observeEvent(input$go, {
    ids <- sample(nrow(d), 0.7*nrow(d))
    d$status[ids] <- "Done"
    updateReactable("table", d)
  })
}

shinyApp(ui, server)

异常效果 #

点击更新按钮后，所有被修改为Done的单元格未正确渲染绿色背景，样式与值不匹配。

问题根源是：当colDef的style回调仅接收value作为参数时，旧版本reactable在updateReactable()更新数据时不会重新触发该回调计算样式，导致样式复用旧值。
两种可保留用户交互状态的修复方式，任选其一即可：

方法1：给R语言的style回调增加row形参 #

不需要修改其他逻辑，仅需要给style的匿名函数增加row参数（即使函数内部不使用该参数），强制reactable在数据更新时重新计算每个单元格的样式：

status = colDef(name = "Status", 
                style = function(value, row) { # 新增row参数即可
                  list(background = cols_bg[[value]],
                       fontWeight = 600, color = cols_font[[value]])
                })

该方法改动最小，完全兼容原有R语言写法，更新数据时不会丢失排序、筛选、分页状态。

方法2：使用JavaScript编写条件样式 #

将样式逻辑改为客户端JS实现，数据更新时会自动重新计算样式，不存在R回调不触发的问题：

# 列配置替换为如下写法
status = colDef(name = "Status",
                style = JS("function(rowInfo) {
                  const colorMap = {
                    Open: {bg: 'red', font: 'black'},
                    Done: {bg: 'green', font: 'white'}
                  }
                  const curStatus = rowInfo.values.status
                  return {
                    background: colorMap[curStatus].bg,
                    fontWeight: 600,
                    color: colorMap[curStatus].font
                  }
                }"))

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