How to prevent bslib to change DT format style in shiny apps?

Question

I'm trying to switch from {shinydashboard} to {bslib} as the UI toolkit for my {shiny} apps. But I'm having some troubles with the way the {DT} tables are rendered with {bslib}.

Is there a way to prevent {bslib} to change {DT} tables format style??

Here goes a minimal example:

1. Without {bslib}, my table is rendered following the style I provide:

Code:

library(shiny)
library(dplyr)
library(DT)

ui <- shiny::fluidPage(
    DT::DTOutput("tab1")
)

server <- function(input, output) {
    output$tab1 <- DT::renderDT({
        mtcars %>% 
            head() %>% 
            DT::datatable() %>% 
            DT::formatStyle(
                columns = "mpg", 
                target = "row", 
                color = DT::styleEqual(c(21), "white"),
                backgroundColor = DT::styleEqual(c(21), "#4d4d4d"),
            )
    })
}

shinyApp(ui = ui, server = server)

2. With {bslib}, the style I provide get messed up:

Code:

library(shiny)
library(dplyr)
library(DT)
library(bslib)

ui <- bslib::page_sidebar(
    DT::DTOutput("tab1")
)

server <- function(input, output) {
    output$tab1 <- DT::renderDT({
        mtcars %>% 
            head() %>% 
            DT::datatable() %>% 
            DT::formatStyle(
                columns = "mpg", 
                target = "row", 
                color = DT::styleEqual(c(21), "white"),
                backgroundColor = DT::styleEqual(c(21), "#4d4d4d"),
            )
    })
}

shinyApp(ui = ui, server = server)

See how in the first row the font color changes to black with {bslib}. How can I prevent this to happen? I would like to have the exact same table as without {bslib}

Answer 1

It turns out DT::datatable() has a parameter to control for that: style.

According to the function's documentation for the style parameter:

either 'auto', 'default', 'bootstrap', or 'bootstrap4'. If 'auto', and a bslib theme is currently active, then bootstrap styling is used in a way that "just works" for the active theme. Otherwise, DataTables 'default' styling is used. If set explicitly to 'bootstrap' or 'bootstrap4', one must take care to ensure Bootstrap's HTML dependencies (as well as Bootswatch themes, if desired) are included on the page. Note, when set explicitly, it's the user's responsibility to ensure that only one unique 'style' value is used on the same page, if multiple DT tables exist, as different styling resources may conflict with each other.

So, to prevent {bslib} to change the theme of DT::datatable(), all one needs to do is set the style paremeter of DT::datatable() to default. Like this: DT::datatable(style = "default").

So, applying this to the minimal example I provided in the question:

Code:

library(shiny)
library(dplyr)
library(DT)

ui <- shiny::fluidPage(
    DT::DTOutput("tab1")
)

server <- function(input, output) {
    output$tab1 <- DT::renderDT({
        mtcars %>% 
            head() %>% 
            DT::datatable(style = "default") %>% 
            DT::formatStyle(
                columns = "mpg", 
                target = "row", 
                color = DT::styleEqual(c(21), "white"),
                backgroundColor = DT::styleEqual(c(21), "#4d4d4d"),
            )
    })
}

shinyApp(ui = ui, server = server)