Search code examples
htmlrr-markdownhtmlwidgetsformattable

Stripe effect in formattable(), shadow in light gray every other row. R


I was wondering, does anyone know how to achieve the "stripe" style seen in kableExtra? That is to shadow in light gray odd rows but not even rows? Something like the following picture:

enter image description here

Given my code using formattable, I am going to export the table to a pdf document, so I would like to know If I can achieve that effect? is it possible? I tried modifying td's, tr's but the actual cells were very strangely shaded creating an undesired effect. This is the current code I got and its output:

library("htmltools")
library("webshot")  
library(formattable)
DF <- data.frame(Ticker=c("", "", "", "IBM", "AAPL", "MSFT"),
                 Name=c("Dow Jones", "S&P 500", "Technology", 
                        "IBM", "Apple", "Microsoft"),
                 Value=accounting(c(15988.08, 1880.33, 50, 
                                    130.00, 97.05, 50.99)),
                 Change=percent(c(-0.0239, -0.0216, 0.021, 
                                  -0.0219, -0.0248, -0.0399)))

################################## FUNCTIONS ##################################
unit.scale = function(x) (x - min(x)) / (max(x) - min(x))
export_formattable <- function(f, file, width = "100%", height = NULL, 
                               background = "white", delay = 0.2)
    {
      w <- as.htmlwidget(f, width = width, height = height)
      #Remove row height!
      w <- htmlwidgets::prependContent(w, tags$style("td { padding: 0px  !Important;}"))
      path <- html_print(w, background = background, viewer = NULL)
      url <- paste0("file:///", gsub("\\\\", "/", normalizePath(path)))
      webshot(url,
              file = file,
              selector = ".formattable_widget",
              delay = delay)
    }
###############################################################################

FT <- formattable(DF, align =c("l","c","r","c"), list(
  Name=formatter("span", 
                 style = x ~ ifelse(x == "Technology", style(font.weight = "bold"), NA)), #NOT APPLIED when we output to PNG with the function!
  #Value = color_tile("white", "orange"),
  Value = color_bar("orange" , fun = unit.scale
                    ),
  Change = formatter("span", 
                     style = x ~ style(color = ifelse(x < 0 , "red", "green"), "font.size" = "18px"), 
                     x ~ icontext(ifelse(x < 0, "arrow-down", "arrow-up"), x)
                     )),
  table.attr = 'style="font-size: 18px; font-family: Calibri";\"')

FT
#OUTPUT the table in the document as an image!
export_formattable(FT,"/outputpath/FT.png")

enter image description here

Thanks in advance!


Solution

  • You can use .table-striped inside the table.attr argument to add zebra-striping to any table row.

    Code

    FT <- formattable(DF, align =c("l","c","r","c"), list(
      Name=formatter("span", 
                     style = x ~ ifelse(x == "Technology", style(font.weight = "bold"), NA)), #NOT APPLIED when we output to PNG with the function!
      #Value = color_tile("white", "orange"),
      Value = color_bar("orange" , fun = unit.scale
      ),
      Change = formatter("span", 
                         style = x ~ style(color = ifelse(x < 0 , "red", "green"), "font.size" = "18px"), 
                         x ~ icontext(ifelse(x < 0, "arrow-down", "arrow-up"), x)
      )),
      table.attr = 'class=\"table table-striped\" style="font-size: 18px; font-family: Calibri"')
    

    Table enter image description here