changing font size in R DataTables (DT)

Question

Have been trying to change the font size of all text in the tables generated by DT. However, I could only figure out how to change the size of the records using formatStyle(names(datCalc), fontSize = '12px'). The column headers and buttons have text of the same size. Using R Markdown in RStudio.

Administer

Since the resulting widget is comprised of HTML, you can use CSS. The most practical way to do so depends on the context. One option is to just include a stylesheet via the RMarkdown header with sufficiently specific selectors to style it as you like. – Showboat

Answer 1

I think you almost got there. I solved it by explicitly telling DT::formatStyle() which columns I wanted. I first tried using the names() or colnames() approach, as you did. For some reason this didn't work:

iris %>%
  DT::datatable() %>%
  DT::formatStyle(columns = colnames(.), fontSize = '50%')

However, we know the iris dataset has 5 columns, so I just did this:

iris %>%
  DT::datatable() %>%
  DT::formatStyle(columns = c(1, 2, 3, 4, 5), fontSize = '50%')

In this case, I use font-size = 50%, but you can also specify font-size = 12pt as you did. You can also supply logical vectors like c(T, F, F, F, T) to the columns argument, and the formatting will apply to those columns for which you have stated TRUE.

Mafala

The reason colnames(.) didn't work is that the pipe doesn't return iris but whatever DT::datatable() returns (i.e. a list). If you write colnames(iris) it works. – Headword

This doesn't really work; it only changes the fontsize for text inside the table, not for the whole table. – Nina

Answer 2

Adding CSS through a javascript table header call seems to do the trick (i.e 'this.api().table().header()' ).

datatable(..., options=list(
  initComplete = JS(
        "function(settings, json) {",
        "$(this.api().table().header()).css({'font-size': '50%'});",
        "}")))
  )

Citation: Section 4.3 @ https://rstudio.github.io/DT/options.html

Unpolite

Answer 3

Building on the answers given by Antex and sabeepa. If you want to change the font size of everything, including the DT components outside of the table itself, use the table().container(). So the code would look like this:

font.size <- "10pt"

df %>% 
   DT::datatable(
     options=list(
       initComplete = htmlwidgets::JS(
          "function(settings, json) {",
          paste0("$(this.api().table().container()).css({'font-size': '", font.size, "'});"),
          "}")
       ) 
     )

Errata

Answer 4

Was able to change the header and the footer by changing the CSS with the JS table and column content font size with the formatStyle as follows. However, the header and the footer font size stayed the same. I would like to change header/footer/body (entire font for the table) in one swoop. Is that possible?

datatable(head(iris, 20), options = list(
  initComplete = JS(
    "function(settings, json) {",
    "$(this.api().table().header()).css({'font-size': '5px', 'background-color': '#c2d1f0', 'color': '#fff'});",
    "}"))) %>%  formatStyle(columns = colnames(.$x$data), `font-size` = '12px')

Attempted to update CSS for columns with the following command without success

"$(this.api().columns().data()).css({'font-size': '5px'});"

"$(this.api().table().footer()).css({'font-size': '10px});"

"$(this.api().tables().body()).css({'font-size': '10px'});"

Modulate