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)