在“Reactable”表格中自定义字体/样式

Question

我在这里关注本教程：https://glin.github.io/reactable/articles/examples.html#language-options - 我正在尝试制作一个交互式表格。我复制/粘贴了下面的代码，它成功地制作了一个交互式表格：

  library(reactable)
    
data <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price")]

 reactable(
    data,
    columns = list(
        Manufacturer = colDef(
            filterable = TRUE,
            # Filter by case-sensitive text match
            filterMethod = JS("function(rows, columnId, filterValue) {
        return rows.filter(function(row) {
          return row.values[columnId].indexOf(filterValue) !== -1
        })
      }")
        )
    ),
    defaultPageSize = 5
)

我唯一的问题是我的输出的字体/样式看起来与教程不同（我刚刚从教程中抓取了其中一个表格的屏幕截图，所有表格的字体/样式都是相同的）：

• 有谁知道为什么我的字体/样式与教程中的不匹配，是否有一些我可以指定的默认选项来解决这个问题？

Answer 1

问题是示例插图是通过 RMarkdown 创建的，它将添加一些默认的 CSS 样式规则，包括用于文档的字体系列。

当从 R 中运行相同的代码时，情况并非如此。也就是说，您会得到一个或多或少简单的 HTML 表格，几乎没有 CSS 规则，也没有字体系列。因此，浏览器或 RStudio 查看器或...将使用其默认字体系列来显示 HTML 输出。

因此，要获得与示例插图中相同的字体，您可以从 Markdown 文档中运行代码：

---
title: "Untitled"
output: html_document
date: "2022-09-13"
---

```{r}
library(reactable)

data <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price")]

reactable(
  data,
  columns = list(
    Manufacturer = colDef(
      filterable = TRUE,
      # Filter by case-sensitive text match
      filterMethod = JS("function(rows, columnId, filterValue) {
        return rows.filter(function(row) {
          return row.values[columnId].indexOf(filterValue) !== -1
        })
      }")
    )
  ),
  defaultPageSize = 5
)
```

第二个选项是在从 RScript 运行时通过

theme

参数设置字体系列，如 theming 示例中所示：

library(reactable)

data <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price")]

reactable(
  data,
  columns = list(
    Manufacturer = colDef(
      filterable = TRUE,
      # Filter by case-sensitive text match
      filterMethod = JS("function(rows, columnId, filterValue) {
        return rows.filter(function(row) {
          return row.values[columnId].indexOf(filterValue) !== -1
        })
      }")
    )
  ),
  defaultPageSize = 5,
  theme = reactableTheme(
    style = list(fontFamily = "-system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif")
  )
)