Reactable选中行高亮：如何避免Shiny表格重渲染？

reactable会自动给选中的行添加reactable-selected的CSS类，直接通过自定义CSS修改这个类的样式就行，完全不用依赖rowStyle触发重渲染，很适合大型数据集的场景。

修改后的完整代码 #

library(shiny)
library(reactable)
library(nycflights13)
library(dplyr)

ui <- fluidPage(
  # 添加自定义CSS，直接控制选中行的样式
  tags$style(HTML("
    .reactable .reactable-selected {
      background-color: #c0d6e4 !important;
      color: #000 !important;
    }
  ")),
  reactableOutput("table"),
  verbatimTextOutput("selectedRowsText")
)

server <- function(input, output, session) {
  data <- nycflights13::flights |> filter(month == 1)
  
  selected <- reactive(getReactableState("table", "selected"))
  
  output$table <- renderReactable({
    reactable(
      data,
      selection = "multiple",
      onClick = "select"
      # 移除原有的rowStyle，不再通过R端逻辑控制样式
    )
  })
  
  # 可选：显示选中行的索引，验证选中功能正常
  output$selectedRowsText <- renderPrint({
    selected()
  })
}

shinyApp(ui, server)

关键说明 #

• 删掉rowStyle参数，彻底避免每次选中行时触发Shiny的表格重渲染
• 样式变更完全在前端完成，依托reactable自带的选中行CSS类，R端无需再处理样式逻辑
• 用!important是为了确保自定义样式优先级高于reactable默认的选中行样式，保证高亮效果生效

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