Utilisez bslib pour personnaliser le CSS de DT::datatable dans les applications Shiny

Question

J'essaie d'appliquer des styles CSS personnalisés à un DT :: datatable dans une application brillante. Lorsque l'utilisateur sélectionne une ligne dans le tableau, je souhaite que la ligne sélectionnée ait un texte jaune et noir au lieu du texte bleu et blanc par défaut. Je n'arrive pas à le faire avec succès lorsque j'utilise également le package bslib.

(Une question similaire a été posée ici, mais je ne peux pas y répondre, comme je le décrirai ci-dessous).

Sans bslib, je peux réussir à appliquer le CSS comme ceci :

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML("table.dataTable tbody tr.selected td {
             color: black !important;
             box-shadow: inset 0 0 0 9999px yellow !important;}"
      )
    )
  ),
  DT::dataTableOutput("test_table")
)

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

  output$test_table <- DT::renderDataTable({
    DT::datatable(iris, selection = 'single')
  })
}

shinyApp(ui, server = server)

CSS pour le succès

Cependant, j'ai découvert qu'en utilisant le thème bslib, je ne pouvais pas appliquer le CSS en utilisant la même méthode.

J'ai vu ces deux ressources indiquant l'utilisation de la fonction bslib::bs_add_rules pour résoudre ce problème :

• https://github.com/rstudio/bslib/issues/360
• Remplacer la sélection de couleur par défaut de DT lors de l'utilisation de bslib

Sur cette base, j'ai essayé les variantes suivantes, mais je n'arrive pas à les faire fonctionner :

library(shiny)

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

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

  output$test_table <- DT::renderDataTable({
      DT::datatable(iris, selection = 'single')
  })
}

shinyApp(ui, server = server)

CSS infructueux

Answer 1

Le problème vient de la balise object. Si vous vérifiez le code HTML, vous verrez que lorsque vous utilisez sass::as_sass, ce devrait être .table.dataTable tbody tr.active td , pas table. dataTable tbody tr.selected td

library(shiny)

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

server <- function(input, output, session) {
  
  output$test_table <- DT::renderDataTable({
    DT::datatable(iris, selection = 'single')
  })
}

shinyApp(ui, server = server)