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.

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.

Answer 2

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'});"

Answer 3

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

Answer 4

Building on the answers given by Antex and sabeepa. If you want to chage 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, "'});"),
          "}")
       ) 
     )