change colour of controls in R DT datatable

Question

In R shiny and datatable (DT) would like to change the colour of the control text to blue, as it suggests it can be here:

https://datatables.net/manual/styling/theme-creator

by adjusting the Control text: value to #0000ff which seems to change the colour of the text for the pagination buttons to be blue as well as the search text etc on the webpage, but i would like this for a shiny app with a datatable that has been rendered. Any help would be much appreciated.

Please see below for the example where the text has not had its text colour changed to blue...

  library(DT)
  library(shiny)

  ui=shinyUI(

    fluidPage(
      tags$head(tags$style(HTML("table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
                                background-color: #9c4242 !important;
                                } "))),
      DT::dataTableOutput("tt")
      )
    )

  server=shinyServer(function(input, output) {
    output$tt=DT::renderDataTable(
      DT:::datatable(
        head(iris, 50),rownames = FALSE,options = list(dom='ptl',
                                                       initComplete = JS(
                                                         "function(settings, json) {",
                                                         "$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});",
                                                         "}")
        ),
        container = tags$table(
          class="compact",
          tags$thead(tags$tr(lapply(colnames(iris), tags$th)))
        )
      ) %>% formatStyle(columns=colnames(iris),color='white',background = 'black',target = 'row')
    )
  })


  shinyApp(ui=ui,server=server)

You just need to apply some CSS. If you inspect the page you linked, it changes the following elements .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate — Xiongbing Jin

Xiongbing Jin Xiongbing Jin · Accepted Answer · 2016-05-25T20:02:21

Here is an example (only included UI code)

ui=shinyUI(

    fluidPage(
        tags$head(tags$style(HTML("table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
                                  background-color: #9c4242 !important;
                                  }
                                  "))),
        tags$style(HTML(".dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            color: #0000ff !important;
        }")),
      DT::dataTableOutput("tt")
        )
    )

change colour of controls in R DT datatable

1 Answers