web-dev-qa-db-ja.com

R DataTables（DT）のフォントサイズの変更

DTによって生成されたテーブル内のすべてのテキストのフォントサイズを変更しようとしています。ただし、formatStyle(names(datCalc), fontSize = '12px')を使用してレコードのサイズを変更する方法を理解することしかできませんでした。列ヘッダーとボタンには同じサイズのテキストがあります。 RStudioでのRマークダウンの使用。

rformattingr-markdowndt
12
tmesis

もうすぐ到着したと思います。 DT::formatStyle()にどの列が必要かを明示的に伝えることで解決しました。最初に、あなたがしたように、names()またはcolnames()アプローチを使用してみました。何らかの理由でこれはうまくいきませんでした：

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

ただし、irisデータセットには5つの列があることがわかっているため、次のようにしました。

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

この場合、_font-size = 50%_を使用していますが、_font-size = 12pt_を指定することもできます。 columns引数にc(T, F, F, F, T)のような論理ベクトルを指定することもできます。フォーマットは、TRUEを指定した列に適用されます。

14
Juan Carlos Villaseñor Derbez

次のように、JSテーブルでCSSを変更し、formatStyleで列コンテンツのフォントサイズを変更することで、ヘッダーとフッターを変更できました。ただし、ヘッダーとフッターのフォントサイズは同じままです。ヘッダー/フッター/ボディ（テーブルのフォント全体）を一度に変更したいと思います。それは可能ですか？

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')

次のコマンドで列のCSSを更新しようとしましたが、成功しませんでした

"$(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

JavaScriptテーブルヘッダーの呼び出しを介してCSSを追加することでトリックを実行するように見えます（つまり、「this.api（）。table（）。header（）」）。

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

引用：セクション4.3 @ https://rstudio.github.io/DT/options.html

4
sabeepa

Antexとsabeepaの回答に基づいて構築します。テーブル自体の外にあるDTコンポーネントを含むすべてのフォントサイズを変更する場合は、table().container()を使用します。したがって、コードは次のようになります。

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