Shiny中bootstrap5+RowGroup的条纹DT表格选中行消失问题求助

在Shiny应用中，当使用style = "bootstrap5"并启用RowGroup扩展的条纹样式DT::datatable()时，第一组内的偶数行被选中后会消失，无法像其他行一样正常显示高亮效果。

复现代码 #

library(bslib)
library(DT)
library(shiny)

shiny::shinyApp(
  ui = shiny::fluidPage(
    DT::DTOutput("table"),
    shiny::verbatimTextOutput("rows_selected")
  ),
  server = function(server, input, output) {
    df <- data.frame(
      "group" = c(rep(1, 5), rep(2, 5)),
      "A" = 1:10,
      "B" = 11:20,
      "C" = LETTERS[1:10]
    )
    output$rows_selected <- shiny::renderText({
      paste("row selection info", input$table_rows_selected)
    })
    output$table <- DT::renderDT({
      DT::datatable(
        data = df,
        style = "bootstrap5",
        class = "stripe",
        rownames = FALSE,
        selection = "single",
        extensions = c("RowGroup"),
        options = list(
          rowGroup = list(dataSrc = 0),
          dom = "tfrBip"
        )
      )
    })
  }
)

会话信息 #

R version 4.4.1 (2024-06-14 ucrt)
Platform: x86_64-w64-mingw32/x64
Running under: Windows 11 x64 (build 22631), RStudio 2024.9.0.375

Locale:
  LC_COLLATE=German_Germany.utf8  LC_CTYPE=German_Germany.utf8    LC_MONETARY=German_Germany.utf8
  LC_NUMERIC=C                    LC_TIME=German_Germany.utf8    

Package version:
  base64enc_0.1.3     bslib_0.9.0         cachem_1.1.0        cli_3.6.3           commonmark_1.9.2   
  compiler_4.4.1      crayon_1.5.3        crosstalk_1.2.1     digest_0.6.37       DT_0.33            
  evaluate_1.0.3      fastmap_1.2.0       fontawesome_0.5.3   fs_1.6.5            glue_1.8.0         
  graphics_4.4.1      grDevices_4.4.1     highr_0.11          htmltools_0.5.8.1   htmlwidgets_1.6.4  
  httpuv_1.6.15       jquerylib_0.1.4     jsonlite_1.8.9      knitr_1.49          later_1.4.1        
  lazyeval_0.2.2      lifecycle_1.0.4     magrittr_2.0.3      memoise_2.0.1       methods_4.4.1      
  mime_0.12           promises_1.3.2      R6_2.5.1            rappdirs_0.3.3      Rcpp_1.0.14        
  rlang_1.1.5         rmarkdown_2.29      rstudioapi_0.17.1   sass_0.4.9          shiny_1.10.0       
  sourcetools_0.1.7.1 stats_4.4.1         tinytex_0.54        tools_4.4.1         utils_4.4.1        
  withr_3.0.2         xfun_0.50           xtable_1.8-4        yaml_2.3.10    

问题原因与解决方案 #

原因分析 #

dataTables.bootstrap5.min.css中的条纹样式CSS规则优先级高于选中行的高亮样式，直接覆盖了负责高亮的box-shadow属性：

table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
    box-shadow: none
}

这条规则会覆盖默认选中行的高亮样式：

table.dataTable>tbody>tr.selected>* {
    box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
    color: rgb(var(--dt-row-selected-text))
    /* 其他属性 */
}

修复方案 #

通过自定义CSS为选中行的box-shadow属性添加!important，强制提升其优先级，确保高亮效果正常显示。修改后的UI部分需添加如下自定义样式：

tags$head(
  tags$style(type = "text/css", HTML("
      table.dataTable>tbody>tr.selected>* {
        box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected)) !important;
      }
  "))
)

完整的修复后代码示例：

library(bslib)
library(DT)
library(shiny)

shiny::shinyApp(
  ui = shiny::fluidPage(
    tags$head(
      tags$style(type = "text/css", HTML("
          table.dataTable>tbody>tr.selected>* {
            box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected)) !important;
          }
      "))
    ),
    DT::DTOutput("table"),
    shiny::verbatimTextOutput("rows_selected")
  ),
  server = function(server, input, output) {
    df <- data.frame(
      "group" = c(rep(1, 5), rep(2, 5)),
      "A" = 1:10,
      "B" = 11:20,
      "C" = LETTERS[1:10]
    )
    output$rows_selected <- shiny::renderText({
      paste("row selection info", input$table_rows_selected)
    })
    output$table <- DT::renderDT({
      DT::datatable(
        data = df,
        style = "bootstrap5",
        class = "stripe",
        rownames = FALSE,
        selection = "single",
        extensions = c("RowGroup"),
        options = list(
          rowGroup = list(dataSrc = 0),
          dom = "tfrBip"
        )
      )
    })
  }
)

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