Utilisez bslib pour personnaliser le CSS de DT::datatable dans les applications Shiny
P粉081360775
P粉081360775 2024-03-29 21:41:03
0
1
430

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

P粉081360775
P粉081360775

répondre à tous(1)
P粉722409996

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)
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal