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

Question

Is there a way to change the class of the selected row/column/cell without having to use the "Select" extension?

The problem: when style = "bootstrap" is set, the class for the selected item is class = "active" . Because bootstrap themes usually set active to some sort of grey, DT must override bootstrap's active background color so it's not confused with the white/grey alternating row colors. Instead of overriding the color, I want to change the class from active to info . This way, any theme I choose will look nice and the selected row will not be confused with the not-selected rows.

Additionally, the blue that DT chose to override bootstrap's active background color makes the highlight of search terms look hideous. See the example. And the blue that DT chose for the style="default" does not always look good with the selected bootstrap theme.

BTW, I successfully changed the selected class to info using the "Select" extension and setting it in the options, but that presented other problems, mainly that I could not pre-select a row.

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

I found a way to solve this problem by using the bslib package. bslib loads the bootstrap version you want. If you load version 4 or 5 you can then refer to the :root css custom property variables bootstrap creates, such as --bs-info . You can either overwrite or use the variable's value. See mozzilas' help on how to use css custom properties

You could set the color of the selected row to variables such as --bs-primary or --bs-warning . Here is a list of all the bootstrap css variables

In the following example, I'm setting the class active to have background-color = var(--bs-primary) . The selected row will show the primary color for any theme selected. Alas, NO HARD CODING CSS! In the event the user choses the theme, the selected row will always adhere to the theme's colors.

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)