使用bslib在Shiny应用中自定义DT::datatable的CSS
P粉081360775
P粉081360775 2024-03-29 21:41:03
0
1
427

我正在尝试将自定义 CSS 样式应用于闪亮应用程序中的 DT::datatable。当用户选择表中的一行时,我希望所选行为黄色、黑色文本,而不是默认的蓝色、白色文本。当我还使用 bslib 包时,我无法成功完成此操作。

(这里提出了类似的问题,但我无法回答,正如我将在下面描述的那样)。

没有bslib,我可以成功应用css,如下所示:

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

但是,我发现使用 bslib 主题,我无法使用相同的方法来应用 css。

我已经看到这两个资源指向使用 bslib::bs_add_rules 函数来解决此问题:

  • https://github.com/rstudio/bslib/issues/360
  • 使用 bslib 时覆盖 DT 默认选择颜色

基于这些,我尝试了以下变体,但似乎无法使其工作:

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

P粉081360775
P粉081360775

全部回复(1)
P粉722409996

问题出在对象标签上。如果您检查 HTML 代码,您会发现当您使用 sass::as_sass 时,它应该是 .table.dataTable tbody tr.active td ,而不是 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)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板