CODEWITHSUNDEEP
htmlcssrshinyrhandsontable
RanonKahn
RanonKahn

Reputation: 862

How to display specific column header in Rhandsontable in a particular color using css?

I would like change the header color of specific columns to a specific color using css. For example can someone suggest on how to change the color of the header 'mpg', 'hp' and 'gear' to red color, and change the color of 'disp', 'wt' and 'carb' to blue color in the following example table?

My question is almost similar to the question posted in this forum earlier.

library(shiny)
library(rhandsontable)

ui <- fluidPage(
  rHandsontableOutput("table1"),
  tags$style(type="text/css", "#table1 th {font-weight:bold;}")
)

server=function(input, output, session) {

  output$table1 <- renderRHandsontable({
    rhandsontable(head(mtcars),rowHeaders=F)
  })
}

shinyApp(ui,server)

Upvotes: 1

Views: 1287

Answers (2)

muramat
muramat

Reputation: 26

Lastly I had similar issue to make custom HTML header for rhandsontable and found this thread. The solution is really nice. But I also ran into a problem with using hot_col() after setting colHeaders = table_headers_html within rhandsontable().

I was able to make following workaround; it just modifies the column headers directly in the object created with rhandsontable() - after setting desired options with hot_col().

server=function(input, output, session) {

    output$table1 <- renderRHandsontable({
        rhandsontable_object <- rhandsontable(
            head(mtcars),
            rowHeaders=F
        ) %>%
          hot_col(col = mpg, allowInvalid = TRUE)

        rhandsontable_object$x$colHeaders <- table_headers_html

        rhandsontable_object
    })
}

Upvotes: 1

Yifu Yan
Yifu Yan

Reputation: 6106

It needs some knowledge of HTML. One way to do it is to convert column names from plain text to HTML:

library(shiny)
library(rhandsontable)
library(purrr)
library(glue)
table_headers <- colnames(mtcars)
table_headers_html <- purrr::map_chr(table_headers, function(column){
    if(column %in% c('mpg', 'hp', 'gear')){
        color = "red"
    } else if (column %in% c('disp', 'wt', 'carb')) {
        color = "blue"
    } else {
        color = "black"
    }
    glue::glue("<span style='color:{color}'>{column}</span>")
})

> table_headers_html
 [1] "<span style='color:red'>mpg</span>"    "<span style='color:black'>cyl</span>"  "<span style='color:blue'>disp</span>" 
 [4] "<span style='color:red'>hp</span>"     "<span style='color:black'>drat</span>" "<span style='color:blue'>wt</span>"   
 [7] "<span style='color:black'>qsec</span>" "<span style='color:black'>vs</span>"   "<span style='color:black'>am</span>"  
[10] "<span style='color:red'>gear</span>"   "<span style='color:blue'>carb</span>"

Once you have the column headers in HTML, you can do the following in server codes:

server=function(input, output, session) {

    output$table1 <- renderRHandsontable({
        rhandsontable(
            head(mtcars),
            rowHeaders=F,
            colHeaders = table_headers_html
        )
    })
}

enter image description here

Upvotes: 2

Related Questions