使用bslib在Shiny應用程式中自訂DT::datatable的CSS
P粉081360775
P粉081360775 2024-03-29 21:41:03
0
1
378

我正在嘗試將自訂 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)
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!