web-dev-qa-db-fra.com

modification de la taille de police dans R DataTables (DT)

J'ai essayé de changer la taille de la police de tout le texte dans les tableaux générés par DT. Cependant, je pouvais seulement comprendre comment changer la taille des enregistrements en utilisant formatStyle(names(datCalc), fontSize = '12px'). Les en-têtes de colonne et les boutons ont du texte de la même taille. Utilisation de R Markdown dans RStudio.

12
tmesis

Je pense que tu y es presque arrivé. Je l'ai résolu en disant explicitement à DT::formatStyle() quelles colonnes je voulais. J'ai d'abord essayé d'utiliser l'approche names() ou colnames(), comme vous l'avez fait. Pour une raison quelconque, cela n'a pas fonctionné:

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

Cependant, nous savons que l'ensemble de données iris a 5 colonnes, donc je viens de faire ceci:

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

Dans ce cas, j'utilise font-size = 50%, Mais vous pouvez également spécifier font-size = 12pt Comme vous l'avez fait. Vous pouvez également fournir des vecteurs logiques comme c(T, F, F, F, T) à l'argument columns, et la mise en forme s'appliquera aux colonnes pour lesquelles vous avez indiqué TRUE.

A pu changer l'en-tête et le pied de page en changeant le CSS avec la taille de police du contenu de la table et de la colonne JS avec le formatStyle comme suit. Toutefois, l'en-tête et la taille de la police du pied de page sont restés les mêmes. Je voudrais changer l'en-tête/pied de page/corps (police entière pour le tableau) d'un seul coup. Est-ce 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')

Vous avez tenté de mettre à jour CSS pour les colonnes avec la commande suivante sans succès

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

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

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

L'ajout de CSS via un appel d'en-tête de table javascript semble faire l'affaire (c'est-à-dire '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

4
sabeepa

S'appuyant sur les réponses données par Antex et sabeepa. Si vous souhaitez modifier la taille de la police de tout, y compris les composants DT en dehors du tableau lui-même, utilisez la fonction table().container(). Ainsi, le code ressemblerait à ceci:

font.size <- "10pt"

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