R Shiny DT 数据表如何更改选定的类

Question

有没有办法更改所选行/列/单元格的类而无需使用“选择”扩展？

问题：设置style = "bootstrap"时，所选项目的类是class = "active" 。 因为引导主题通常将active设置为某种灰色，所以 DT 必须覆盖引导的active背景颜色，这样它就不会与白色/灰色交替的行颜色混淆。 我不想覆盖颜色，而是想将类从active更改为info 。 这样，我选择的任何主题都会看起来不错，并且所选行不会与未选择的行混淆。

此外，DT 选择覆盖 bootstrap 的active背景颜色的蓝色使搜索词的突出显示看起来很可怕。 请参阅示例。 DT 为style="default"选择的蓝色在所选引导主题中并不总是很好看。

顺便说一句，我使用“选择”扩展名成功地将所选类更改为info并将其设置在选项中，但这会带来其他问题，主要是我无法预先选择一行。

library(shiny)
library(DT)

dt <- data.frame(colA = sample(c("one","two"),10,replace=T), ColB = rnorm(10))

ui <- basicPage(
  DTOutput("test_table")
)

server <- function(input, output) {
  
  output$test_table <- renderDT({
    datatable(dt,
      style = "bootstrap",
      selection = list(mode = "single", selected = 1),
      options = list(searchHighlight = T, search = list(search = "o"))
    )
  })
}

shinyApp(ui = ui, server = server)

Answer 1

我找到了一种通过使用bslib包来解决这个问题的方法。 bslib加载您想要的bootstrap版本。 如果您加载版本 4 或 5，则可以参考bootstrap创建的:root css 自定义属性变量，例如--bs-info 。 您可以覆盖或使用变量的值。 有关如何使用 css 自定义属性，请参阅 mozzilas 的帮助

您可以将所选行的颜色设置为变量，例如--bs-primary或--bs-warning 。 这是所有引导 css 变量的列表

在以下示例中，我将active类设置为具有background-color = var(--bs-primary) 。 所选行将显示所选主题的原色。 唉，没有硬编码 CSS！ 如果用户选择了主题，则所选行将始终遵循主题的颜色。

library(shiny)
library(DT)

dt <- data.frame(colA = sample(c("one","two"),10,replace=T), ColB = rnorm(10))

ui <- fluidPage(
  theme = bslib::bs_theme(version = 5, bootswatch = "sandstone"),
  tags$head(tags$style(HTML("
      .table.dataTable tbody td.active, .table.dataTable tbody tr.active td {
            background-color: var(--bs-primary)!important;}
      "))),
  
  DTOutput("test_table")
)

server <- function(input, output) {
  
  output$test_table <- renderDT({
    datatable(dt,
              style = "auto",
              selection = list(mode = "single", selected = 2),
              options = list(searchHighlight = T, search = list(search = "o"))
    )
  })
}

shinyApp(ui = ui, server = server)