changing font size in R DataTables (DT)

问题:

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.

回答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.

回答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

回答3:

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