如何在Shiny的reactable中将行选择复选框图标从对勾改为叉号？

你的尝试代码用prettyCheckbox替换默认选择列的方式，会断开Reactable自身的选择状态联动，导致getReactableState无法正确获取选中行。更简洁且兼容的方案是通过CSS自定义样式替换默认对勾图标，同时保留Reactable原生的选择逻辑。

实现步骤 #

1. 保留Reactable原生的selection = "multiple"配置，无需自定义.selection列的cell内容
2. 添加自定义CSS，覆盖选中状态下的图标样式，用叉号替换默认对勾

完整代码示例 #

library(shiny)
library(reactable)

ui <- fluidPage(
  titlePanel("行选择示例"),
  # 自定义CSS替换图标
  tags$style(HTML("
    /* 替换选中状态的对勾为叉号 */
    .reactable-select-input:checked + .reactable-select-icon::before {
      content: '\\f00d'; /* Font Awesome叉号的Unicode编码 */
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
    }
    /* 可选：调整图标大小与居中对齐 */
    .reactable-select-icon {
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  ")),
  reactableOutput("table"),
  verbatimTextOutput("selected")
)

server <- function(input, output, session) {
  selected <- reactive(getReactableState("table", "selected"))
  
  output$table <- renderReactable({
    reactable(
      iris, 
      selection = "multiple", 
      onClick = "select",
      columns = list(
        .selection = colDef(sticky = "left") # 保留原生选择列，仅设置固定左侧
      )
    )
  })
  
  observe({
    print(iris[selected(), ])
  })
}

shinyApp(ui, server)

代码说明 #

• CSS通过.reactable-select-input:checked + .reactable-select-icon::before选中已勾选状态的图标元素，用Font Awesome叉号的Unicode替换默认对勾内容
• Shiny默认已加载Font Awesome，无需额外导入；若版本不兼容，可手动添加tags$link(rel = "stylesheet", href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css")到fluidPage中
• 完全保留Reactable原生选择逻辑，getReactableState可正常获取选中行，同时实现图标替换

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