Changing the colors of rpivotTable in Shiny - css

Question

I'm desperately trying to change the default colors of the rpivotTable package. I have also posted an issue in the github of the creator of the package, but no one has answered yet, so if someone has an idea how to fix this problem, I'd be more than grateful.
My main problem is changing the blue colors in the rectangles below the variable choice: Example
With this function that I have found on the internet, I manage to change the whole background, but not the specific thing I want (outside of Shiny only so far):
style_widget <- function(hw=NULL, style="", addl_selector="") {
stopifnot(!is.null(hw), inherits(hw, "htmlwidget"))
# use current id of htmlwidget if already specified
elementId <- hw$elementId
if(is.null(elementId)) {
# borrow htmlwidgets unique id creator
elementId <- sprintf(
'htmlwidget-%s',
htmlwidgets:::createWidgetId()
)
hw$elementId <- elementId
}
htmlwidgets::prependContent(
hw,
htmltools::tags$style(
sprintf(
"#%s %s {%s}",
elementId,
addl_selector,
style
)
)
)
}
pivot_graph<-rpivotTable(mtcars)
browsable(
tagList(
style_widget(hw=pivot_graph, "background-color: rgb(245, 245, 245);", "table td")
)
)
However, when I try to do it Shiny, I can't figure out what to put where and how to do it (or even if it's at all possible with this function). Any help is appreciated. My Shiny code so far:
library(shiny)
library(rpivotTable)
library(rvest)
ui <- fluidPage(
titlePanel("Cars"),
sidebarLayout(
sidebarPanel(
fileInput('file1', 'Choose CSV File',
accept=c('text/csv','text/comma-separated-values,text/plain','.csv')),
actionButton("save1","Save Table 1")
# actionButton("save2","Save Table 2")
),
mainPanel(
tabsetPanel(
tabPanel("Pivot Table 1",
rpivotTableOutput("table")),
tabPanel("Pivot Table 2",
rpivotTableOutput("table2"))
)
)
)
)
server <- function(input, output,session)
{
session$onSessionEnded(stopApp)
observe({
file1 = input$file1
if (is.null(file1)) {
return(NULL)
}
st_data <<- read.csv(file1$datapath)
output$table <- renderRpivotTable({
rpivotTable(mtcars,
rendererName="Table",
onRefresh = htmlwidgets::JS("function(config) {Shiny.onInputChange('myData',
document.getElementById('table').innerHTML); }")
)
})
output$table2 <- renderRpivotTable({
rpivotTable(mtcars,aggregatorName="Average",
rendererName="Table",
onRefresh = htmlwidgets::JS("function(config) {Shiny.onInputChange('myData',
document.getElementById('table').innerHTML); }")
)
})
summarydf <- eventReactive(input$myData,{
input$myData %>%
read_html %>%
html_table(fill = TRUE) %>%
.[[2]]
})
observeEvent(input$save1, {
if(nrow(summarydf() )<1) return()
write.csv(summarydf(), file="./cars1.csv")
})
# summarydf1 <- eventReactive(input$myData1,{
# input$myData1 %>%
# read_html %>%
# html_table(fill = TRUE) %>%
# .[[4]]
# })
#
# observeEvent(input$save2, {
# if(nrow(summarydf1() )<1) return()
# write.csv(summarydf1(), file="./cars2.csv")
# })
})
}
shinyApp(ui = ui, server = server)

Answer 1

The following code will change the light blue to a very deep blue.
You can change any pivot.min.css code in a similar way: the only challenge is to identify which is the right element!
To change the colour, search for a JavaScript colour map and change #000080 to whatever you need.
library(shiny)
df <- iris
ui <- fluidPage(
tags$style(type="text/css",".pvtRows, .pvtCols { background: #000080 none repeat scroll 0 0; }" ),
fluidRow(
column(width=10, rpivotTableOutput("pivot"))
)
)
server <- function(input, output, session) {
output$pivot<-renderRpivotTable({
rpivotTable(df,
rendererName="Heatmap",
cols=c("Species"),
rows=c("Petal.Width"),
aggregatorName="Count"
)
})
}
shinyApp(ui = ui, server = server)
Please let me know if this is addressing your requirement.