How to apply bootstrap theme to buttons in a DT table

Question

I have a shiny app that presents data in a DT-Table. I use the Buttons extension in order to include a "Select All" and a "Deselect All" button and shinythemes to apply a bootstrap theme. I assign a class to the two DT-buttons in order to format them in the same way as all the other buttons in the app. However, this only changes the font, not the colour of the buttons.

Below is a screenshot of a minimal working example of an app including a normal action button that is correctly formatted and the two DT-Buttons that are not correctly formatted. Note that I have assigned the class "btn btn-primary" only to "Select All" in order to show that the font is indeed changed as a consequence of assigning the class.

And this is the code that creates the app:

library(shiny)
library(DT)

ui <- fluidPage(
  theme = shinythemes::shinytheme("lumen"),
  actionButton("button", "Click", class = "btn btn-primary"),
  dataTableOutput("table")
)

server <- function(input, output, session) {
  output$table <- renderDT(
    datatable(mtcars,
              extensions = c("Select", "Buttons"),
              selection = "none",
              options = list(
                dom = "Bfti",
                select = list(style = "multi"),
                buttons = list(
                  list(extend = "selectAll", className = "btn btn-primary"),
                  list(extend = "selectNone")
                )
              )
    ),
    server = FALSE
  )
}

shinyApp(ui, server)

How can I format the "Select All" and "Deselect All" buttons in the same way as the "Click" button?

I am aware, of course, that I could simply create two ordinary action buttons that perform the same actions. However, those are placed above the table and therefore use up more vertical space, which I don't want.

Answer 1

  output$table <- renderDT(
    datatable(mtcars,
              extensions = c("Select", "Buttons"),
              selection = "none",
              options = list(
                dom = "Bfti",
                select = list(style = "multi"),
                buttons = list(
                  list(
                    extend = "selectAll", 
                    className = "btn btn-primary"
                  ),
                  list(
                    extend = "selectNone",
                    className = "btn btn-primary"
                  )
                ),
                initComplete = JS("function(){$('.dt-buttons button').removeClass('dt-button');}")
              )
    ),
    server = FALSE
  )