Inject own stylesheet and specify css class in cell_spec

[erikgp]

The cell_spec function has an "extra_css" argument to specify styles for the element. It would be nice if there was a class argument to set the css class of the added span element for cleaner code.
Also, setting the background argument adds for example "border-radius: 4px" as a style. This looks nice, but is not always desirable and having the possibility to add a css class would make the code cleaner.

[dmurdoch]

Could you put together a minimal example of what code you need to do this now, and what code you'd need after your proposed change?

[dmurdoch]

BTW, here's a hack to let you do it with the current cell_spec:

cell_spec_classed <- function(..., class, extra_css = "") {
  extra_css <- paste0(extra_css, '" class = "', class)
  cell_spec(..., extra_css = extra_css)
}

This isn't a good solution, but will let you put together your examples more easily.

[erikgp]

Than you for your input.

I added the cell_spec_html() function to my code and added the parameter:
html_class = NULL
to the function header.
Then I added:

  if (!is.null(html_class)) {
    add_class <- paste0(' class = "', html_class, '" ')
  } else {
    add_class <- ""
  }

just before line 129, and changed line 129 to 140 to

  if (!is.null(link)) {
    if (new_tab) {
      target_blank = 'target="_blank" '
    } else {
      target_blank = NULL
    }
    x <- paste0('<a href="', link, '" style="', cell_style, '" ', target_blank,
                tooltip_n_popover, add_class, '>', x, '</a>')
  } else {
    x <- paste0('<span style="', cell_style, '" ',
                tooltip_n_popover, add_class, '>', x, '</span>')
  }

I have a number of values in cells where I want the background of some of the cells (all of the cell) to be conditionally colored, example:
1.

grouped_data <- mutate(grouped_data, mean_color = case_when(
  is.na(mean) || blue_max == 0 || paramclass == ""~ "white",
  mean <= blue_max ~ "blue",
  mean <= green_max ~ "green",
  mean <= yellow_max ~ "yellow",
  mean <= orange_max ~ "orange",
  TRUE ~ "red"
))

Later in the code:
2.

table_df <-   mutate(grouped_data, across(where(is.numeric), ~ round(., 2))) %>%
              mutate(mean = cell_spec_html(mean, html_class = mean_color)) %>%
              mutate(max = cell_spec_html(max, html_class= max_color))

# later ....

results_table <- table_df %>%
  mutate(Facet_Label = cell_spec(Facet_Label,"html")) %>%
  kable("html", escape = F, col.names = col_names) %>%
  add_header_above(header_vector) %>%
  kable_styling(htmltable_class = "better-table")
  
mstyle <- list(htmltools::htmlDependency(name="mystyle",
                                        version = "0.0.1",
                                        src=c(href="./"),
                                        stylesheet = "n.css",
                                        all_files = F))
save_kable(results_table, file="n.html", self_contained = F, extra_dependencies = list(mstyle))

Without classes I need (!?!?) to do something like:

table_df <-   mutate(grouped_data, across(where(is.numeric), ~ round(., 2))) %>%
              mutate(mean = cell_spec(mean, "html", background = mean_color, extra_css="display: block; text-align: center; width: 100% !important; padding: auto; border-radius:0;")) %>%
              mutate(max = cell_spec(max, "html", background = max_color, extra_css="display: block; text-align: center; width: 100% !important; padding: auto; border-radius:0;"))

Furthermore, I must set the colors to the exact colors I want in 1. above, and if I want to change the colors I must rerun many parts of the script.
If I can use classes I have the colors in the css file, and I only need to change the colors in the css file and reload the generated html-file.
I believe the code is cleaner and it is easier.

[dmurdoch]

Thanks, that's very helpful. I've just put together a PR based on your suggestion. I used "class" instead of "html_class" as the name, and modified your code a bit. Could you take a look? It is #872 . You can install it if you install from the "classed_cell_spec" branch.

[dmurdoch]

I've merged the PR.

[erikgp]

Sorry, I haven't tested it until know.
It works perfectly! Very nice!
Thank you very much.

There is possibly one small detail left.
In save_kable() it is possible to include a htmlDependency, and thus add a link to a stylesheet.
This is not possible with print() when printing the table in RStudio. Thus the table will look differently in RStudio and in the saved html file.
I changed the print.kableExtra() function to add the possibility to add a (list of) htmlDependency. However, when using RStudio electron can't load the file unless it is a web resource.
That is not convenient.

Then I added an argument to specify a css-file. The file is included with htmltools::includeCSS. It works, but it is not very flexible.
An alternative could be to allow for arbitrary extra html, and then let the user to determine what html to add, see below.
The added html is added in body part of the html file. It is not elegant when it is a style tag, but it works, and the change is minor.

print.kableExtra <- function(x, inject_html = "", ...) {
  view_html <- getOption("kableExtra_view_html", TRUE)
  if (view_html & interactive()) {
    dep <- list(
      rmarkdown::html_dependency_jquery(),
      rmarkdown::html_dependency_bootstrap(theme = "cosmo"),
      html_dependency_kePrint(),
      html_dependency_lightable()
    )
    html_kable <- htmltools::browsable(
      htmltools::HTML(
        inject_html,
        as.character(x),
        '<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [["$","$"]]}})</script><script async src="https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>'
      )
    )
    htmltools::htmlDependencies(html_kable) <- dep
    class(html_kable) <- "shiny.tag.list"
    print(html_kable)
  } else {
    cat(as.character(x))
  }
}

And to call the function with a stylesheet:

print(results_table, inject_html = as.character(htmltools::includeCSS("n.css")))

[erikgp]

Hmm... When I think about it, it is not harder to add the html outside the print function, so there is really no reason to change it.
It was an idea that I didn't think through.