How to change the color of the ColumnVisibility buttons in DT/Shiny

Question

I am building a table using the DT package in a Shiny Dashboard. The table has several columns and I used DT's ColVis functionality to allow users to hide/show only the columns they're interested in.

My question is - is it possible to change the color of those buttons once the Column visibility button is clicked on? As of right now, the colors aren't different enough and its hard to tell which columns are visible and which ones aren't without navigating to the table. I've included a screenshot that shows what I mean. The Site_ID column is not visible in the table, while the Participant_ID column is.

I used inspect element in google chrome to find out the objects name and it looked to be: a.dt-buttons.buttons-columnVisibility, and was under body.skin-blue, div.dt-button-collection.

Using this info I added the following line to my ui.R code:

tags$head(tags$style(HTML(".skin-blue .dt-button-collection .buttons-columnVisibility .active a{background-color: #4d4d4d}")))

But this didn't appear to do anything. Any help on implementing this custom CSS/HTML into my dashboard would be appreciated.

Hallie Swan · Accepted Answer · 2017-10-06T23:23:30.090

Based on this answer, it looks like the button color needs to be set with background. I also used !important to override the DT button style, although this may not be the best practice.

Here's a small working example:

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)

How to change the color of the ColumnVisibility buttons in DT/Shiny

1 Answers1