javascriptrshinydt

change colour of controls in R DT datatable


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)

Solution

  • 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")
            )
        )