Shiny中DT条件格式表格选中行的颜色与透明度定制问题

问题背景 #

需要在Shiny应用中实现满足以下要求的表格：

• 基于bslib主题构建
• 表格包含数值驱动的条件格式
• 支持单行/多行选中
• 选中行后仍能清晰查看原有条件格式

默认DT组件的选中行样式会用不透明底色覆盖条件格式，且因项目限制无法使用rhandsontable或formattable包，只能通过DT内置的formatStyle和styleInterval实现条件格式。当前实现中，已格式化列的选中效果正常，但行号列及未格式化列出现透明黄色与蓝色叠加的问题。

蓝色来源分析 #

该蓝色是DT组件默认的选中行背景色，来自DT自带的CSS样式。原有CSS仅覆盖了tr.active td的样式，但未处理DT选中行默认的tr.selected td类样式，导致未设置条件格式的单元格（包括行号列）仍会加载DT默认的蓝色选中底色，与自定义的透明黄色高亮叠加后出现混合色。

解决方法 #

通过以下两步修正CSS样式：

1. 同时覆盖tr.selected和tr.active两类选中行的样式（兼容不同交互状态）
2. 重置选中单元格的默认背景色为透明，仅通过box-shadow实现高亮效果，避免与条件格式底色或默认选中底色叠加

完整示例代码 #

library(shiny)
library(dplyr)

ui <- bslib::page_fluid(
  theme = bslib::bs_add_rules(
    bslib::bs_theme(),
    sass::as_sass("table.dataTable tbody tr.selected td,
             table.dataTable tbody tr.active td {
               color: black !important;
               background-color: transparent !important;
               box-shadow: inset 0 0 0 9999px rgba(255, 255, 0, 0.2) !important;
             }")
  ),
  DT::dataTableOutput("test_table")
)

server <- function(input, output, session) {

  iris_small = iris %>% dplyr::slice_sample(n = 10)

  output$test_table <- DT::renderDataTable({

    cols_to_format <- c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width")

    # 生成19个分位数断点和20个从白到红的渐变颜色
    brks <- quantile(iris_small[cols_to_format], probs = seq(.05, .95, .05), na.rm = TRUE)
    clrs <- round(seq(255, 40, length.out = length(brks) + 1), 0) %>%
      {paste0("rgb(255,", ., ",", ., ")")}

    iris_dt <- DT::datatable(
      iris_small,
      selection = 'multiple',
      class = "hover row-border order-column compact nowrap",
    )

    iris_dt <- iris_dt %>%
      DT::formatStyle(
        cols_to_format,
        target = "cell",
        backgroundColor = DT::styleInterval(brks, clrs)
      )

    iris_dt
  })
}

shinyApp(ui, server = server)

效果说明 #

• 已格式化列：选中行的透明黄色高亮会叠加在条件格式底色之上，原有颜色梯度清晰可见
• 行号列及未格式化列：选中时仅显示透明黄色高亮，无蓝色底色叠加
• 保持了bslib主题的一致性，同时满足所有需求

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