CODEWITHSUNDEEP
htmlcssrshinydt
Jordan Wrong
Jordan Wrong

Reputation: 1245

Change color of filter labels in DT Shiny R

I have a DT in shiny where I have added a filter to each of the column names. I have also added a custom css to change the color of the table. However, when I go to filter a column, the values on the slider blend in with the background. I would like to make the values "black". See attached photo.

#ui body
body(
 tags$style(HTML('table.dataTable tr:nth-child(even) {background-color: #1b1b21 !important;color: #e8e8e8 !important;}}')),
        tags$style(HTML('table.dataTable tr:nth-child(odd) {background-color: #242932 !important; color: #e8e8e8 !important;}')),
        tags$style(HTML('table.dataTable th {background-color: #1b1b21 !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: #5daa45 !important;
        }"))

DTOutput("mytable")
)

enter image description here

Upvotes: 0

Views: 546

Answers (1)

Sada93
Sada93

Reputation: 2835

It could be done similar to how you are changing the other colors, here are the CSS selectors:

tags$style(HTML('table.dataTable thead tr td {color: black !important;}')),

Reproducible example:

library(shiny)
library(DT)

ui <- fluidPage(
  tags$style(HTML('table.dataTable tr:nth-child(even) {background-color: #1b1b21 !important;color: #e8e8e8 !important;}}')),
  tags$style(HTML('table.dataTable tr:nth-child(odd) {background-color: #242932 !important; color: #e8e8e8 !important;}')),
  tags$style(HTML('table.dataTable thead tr td {color: black !important;}')),
  tags$style(HTML('table.dataTable th {background-color: #1b1b21 !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: #5daa45 !important;
        }")),
    dataTableOutput("mytable")
)

server <- function(input, output, session) {
  
  output$mytable <- renderDataTable({
    datatable(cars,filter = "top")
  })
}

shinyApp(ui, server)

Upvotes: 1

Related Questions