Changing background-image (or any two worded css properties) in rhandsontable

Question

There are a lot of examples out there that illustrate how to use a custom rendering with rhandsontables, but unfortunately they all use a single worded css properties, like color or background.

How about two worded css-properties like background-color, background-image, font-size etc.? Replacing the hyphen(-) with a dot(.) doesn't work.

And using hyphens breaks the code and throws this error:

ReferenceError: invalid assignment left-hand side

In that code example, I want to assign a linear-gradient as background-image and change the color to red, if the value is "F". The red color happens, but no gradient appears.

How can I fix that?

library(rhandsontable)
library(shiny)

DF = data.frame(val = 1:10, bool = TRUE, big = LETTERS[1:10], stringsAsFactors = FALSE)

ui <- fluidPage(
  rHandsontableOutput("tbk")
)

server <- function(input, output) {
  output$tbk <- renderRHandsontable({
    rhandsontable(DF, width = 550, height = 300) %>%
      hot_cols(renderer = "
               function (instance, td, row, col, prop, value, cellProperties) {
               Handsontable.renderers.TextRenderer.apply(this, arguments);

               if (value == 'F') {
                 td.style.background-image = 'linear-gradient(to right, transparent, green)';
                 td.style.color = 'red';

               } else if(value == 'J') {
                 td.style.background = 'lightgreen';

               } else if(value == 'A' | value == 'x') {
                td.style.background = 'lightblue'}
               }")
  })
}

shinyApp(ui, server)

Answer 1

If I tried few more minutes, I wouldn't have needed to ask the question. But anyway, it might be useful for other people which are strugling with that, as I didn't find too much reference on that.

The solution is to remove the hyphen and dot and make the first letter upper-case.

So background-image becomes backgroundImage, or font-size becomes fontSize!

library(rhandsontable)
library(shiny)

DF = data.frame(val = 1:10, bool = TRUE, big = LETTERS[1:10], stringsAsFactors = FALSE)

ui <- fluidPage(
  rHandsontableOutput("tbk")
)

server <- function(input, output) {
  output$tbk <- renderRHandsontable({
    rhandsontable(DF, width = 550, height = 300) %>%
      hot_cols(renderer = "
               function (instance, td, row, col, prop, value, cellProperties) {
                 Handsontable.renderers.TextRenderer.apply(this, arguments);
                 if (value == 'F') {
                   td.style.backgroundImage = 'linear-gradient(to right, transparent, green)';
                   td.style.fontSize = '25px';
                   td.style.color = 'red';

                 } else if(value == 'J') {
                   td.style.background = 'lightgreen';

                 } else if(value == 'A' | value == 'x') {
                  td.style.background = 'lightblue'}
               }")
  })
}
shinyApp(ui, server)