如何在DT / Shiny中更改ColumnVisibility按鈕的顏色

Question

我正在使用Shiny Dashboard中的DT包構建表格。 該表有幾列，我使用了DT的ColVis功能，以允許用戶僅隱藏/顯示他們感興趣的列。

我的問題是-單擊“列可見性”按鈕后是否可以更改這些按鈕的顏色？ 截至目前，顏色還不夠不同，如果不導航到表格，很難分辨哪些列是可見的，哪些列不是可見的。 我提供了一個截圖，顯示了我的意思。 在表格中看不見Site_ID列，而在Participant_ID列中則看不到。

我使用了谷歌瀏覽器中的inspect元素來找出對象名稱，它看起來是：a.dt-buttons.buttons-columnVisibility，位於body.skin-blue，div.dt-button-collection下。

使用此信息，我在ui.R代碼中添加了以下行：

tags $ head（tags $ style（HTML（“。skin-blue .dt-button-collection .buttons-columnVisibility .active a {background-color：＃4d4d4d}”））））

但這似乎沒有任何作用。 在我的儀表板中實現此自定義CSS / HTML的任何幫助將不勝感激。

Answer 1

根據此答案 ，看來按鈕顏色需要設置為background 。 我也使用!important來覆蓋DT按鈕樣式，盡管這可能不是最佳實踐 。

這是一個小的工作示例：

library(DT)
library(shiny)

ui <- basicPage(
    tags$head(
        tags$style(
        HTML(
            ".dt-button.buttons-columnVisibility {
              background: #FF0000 !important;
              color: white !important;
              opacity: 0.5;
           }
        .dt-button.buttons-columnVisibility.active {
              background: black !important;
              color: white !important;
              opacity: 1;
           }"
             )
        )
        ),
    h2("The iris data"),
    DT::dataTableOutput("mytable")
)

server <- function(input, output) {
    output$mytable = DT::renderDataTable({
        datatable(
            iris, rownames = FALSE,
            extensions = 'Buttons', 
            options = list(dom = 'Bfrtip', buttons = I('colvis'))
        )
    })
}

shinyApp(ui, server)