Override renderDT datatable style

Question

In a similar way to this question, it is possible to change the colour of selected rows in a datatable output using tags$style(HTML(...)) prior to the DTOutput() function. E.g.,

library(shiny)
library(DT)
library(shinythemes)

ui <- fluidPage(theme = shinytheme("cyborg"),
  tags$style(HTML('table.dataTable tr.selected td, table.dataTable td.selected {background-color: pink !important;}')),
  mainPanel(DT::dataTableOutput('mytable'))
)

server <- function(input, output,session) {

  output$mytable = DT::renderDataTable(    
    datatable(mtcars,
        #style = "bootstrap" # Uncomment to see how the custom css above is overriden
    )
  ) 
}
runApp(list(ui = ui, server = server))

The code above renders a plainly formatted white table that looks out of place in the dark Cyborg bootstrap theme. It does, however, have the custom css applied, which means the selected rows become pink. By contrast, if you uncomment the style argument within datatable the style of the datatable conforms exactly to the bootstrap theme, without the custom pink selected row style.

How do I apply the bootstrap theme to the datatable and override the style of selected rows?

score 1 · Accepted Answer · answered Mar 31 '20 at 12:24

1

The package shinythemes overrides both css styles and classes in html code. Thus, you need to take into account the new class names when applying custom css. The following instruction does the trick (instead of the original tags$style(HTML('table.dataTable tr.selected td,...))):

tags$style(HTML('table.dataTable tr.active td {background-color: pink !important;}'))

answered Mar 31 '20 at 12:24

DzimitryM

561
1
5
13

This is exactly what I needed. I put it here and everything worked. ``` ui <- fluidPage(theme = shinytheme("cyborg"), tags$style(HTML('table.dataTable tr.active td {background-color: #eb7734 !important;}')), ... ``` – RDavey Mar 31 '20 at 14:05

Override renderDT datatable style

1 Answers1