DT
DT copied to clipboard
rstudio
Dark mode in new version of dataTables
@yihui
The latest version of dataTables has a dark mode. Do you think we can enable it and how if we upgrade?
But how to assign the class
dark?
I don't think you can do it in DT. At least it's not straightforward. You'll have to use JavaScript as instructed at https://datatables.net/manual/styling/dark-mode
I did
library(shiny)
library(bslib)
library(DT)
js <- '
$(document).ready(function() {
$("html").attr("data-bs-theme", "dark");
});
'
ui <- page_sidebar(
tags$head(
tags$script(
HTML(js)
)
),
DTOutput("dtable"),
sidebar = sidebar()
)
server <- function(input, output, session) {
output[["dtable"]] <- renderDT({
datatable(iris)
})
}
shinyApp(ui, server)
Not dark. Looks like a css is missing?
I tried
$("html").attr("data-bs-theme", "dark")
and $("html").addClass("dark")
That' strange because I can see the html.dark in the inpector tools. I also tried different values of the styling argument of datatable. I tried with and without bslib.
I managed to get something dark outside shiny, using Bootstrap 5-3-2. But this is too dark!
Well, this looks complicated indeed, but I think at least you need to tell DT to use the Bootstrap theme (e.g., datatable(style = 'bootstrap'). I don't think the default theme will work with the dark mode.
I also tried different values of the
stylingargument ofdatatable. I tried with and without bslib.
It's style instead of styling (not sure if it was just a typo).
Yes, it was just a typo.
I've just managed to get it outside Shiny !!:
Beautiful! Except the paging.
Note that I got this one with Bootstrap 5-3-2 (downloaded the files on the datatables website).
What should I download otherwise ? bslib only supports 5-2 I believe.
No way with Bootstrap 4. I think it requires Bootstrap 4-6-0 and I see older versions in the <head>.
I abandon again.
So to sum up you have to add Bootstrap 5-3-2 as a HTML dependency and it works outside Shiny (up to the ugly pagination).
WORKS IN SHINY !!!!!!!
The "trick" was to put Bootstrap-5.3.2 in the www folder.
library(shiny)
library(DT)
ui <- fluidPage(
tags$head(
tags$link(href="bootstrap-5-3-2/css/bootstrap.min.css", rel="stylesheet"),
tags$script(src="bootstrap-5-3-2/js/bootstrap.min.js")
),
DTOutput("dtable"),
)
server <- function(input, output, session) {
output[["dtable"]] <- renderDT({
dtable <- datatable(
iris, style= "bootstrap4",
options = list(initComplete = JS(
'function() {$("html").attr("data-bs-theme", "dark");}')
))
})
}
shinyApp(ui, server)
What do we do? Even if the dark mode is suspicious, we can upgrade DataTables. We are not obliged to use the dark mode. I do a PR or not?
You can try to upgrade: https://github.com/rstudio/DT/blob/main/tools/update_DT.R The tricky thing is always testing. Thanks!
Ok, will do soon. And maybe the dark mode works with bslib, I don't remember whether I tried or not...