Reactable表格字体/样式问题：为何与教程输出样式不符？

差异原因 #

• 官方教程的表格是嵌入在R Markdown文档或Shiny应用中的，这些环境默认加载了Bootstrap等全局样式；而直接在R控制台/脚本中运行生成的表格，仅使用reactable的基础默认样式，没有外部样式加持。
• 官方示例可能隐式使用了自定义主题参数，或者教程页面本身的CSS样式影响了表格显示效果。

修复选项 #

1. 使用内置主题快速匹配教程样式 #

reactable提供了reactableTheme()函数可以自定义基础样式，以下配置可以近似还原教程中的表格外观：

library(reactable)

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

reactable(
    data,
    columns = list(
        Manufacturer = colDef(
            filterable = TRUE,
            filterMethod = JS("function(rows, columnId, filterValue) {
        return rows.filter(function(row) {
          return row.values[columnId].indexOf(filterValue) !== -1
        })
      }")
        )
    ),
    defaultPageSize = 5,
    theme = reactableTheme(
        borderColor = "#e0e0e0",
        stripedColor = "#f7f7f7",
        highlightColor = "#f0f0f0",
        headerStyle = list(
            backgroundColor = "#f5f5f5",
            fontWeight = "bold",
            padding = "10px 12px"
        ),
        cellStyle = list(
            padding = "8px 12px",
            borderBottom = "1px solid #e0e0e0"
        )
    )
)

2. 嵌入到R Markdown/Shiny环境中 #

如果是在R Markdown文档（.Rmd）或Shiny应用中使用reactable，直接渲染表格即可自动继承环境的全局样式（比如Bootstrap），无需额外配置就能和教程显示效果一致。

3. 自定义CSS实现完全匹配 #

如果需要更精细的样式控制，可以添加自定义CSS规则：

library(reactable)
library(htmltools)

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

reactable(
    data,
    columns = list(
        Manufacturer = colDef(
            filterable = TRUE,
            filterMethod = JS("function(rows, columnId, filterValue) {
        return rows.filter(function(row) {
          return row.values[columnId].indexOf(filterValue) !== -1
        })
      }")
        )
    ),
    defaultPageSize = 5,
    dependencies = htmlDependency(
        name = "custom-reactable-styles",
        version = "1.0",
        src = tempdir(), # 可替换为你的CSS文件实际路径
        stylesheet = "custom-reactable.css"
    )
)

创建custom-reactable.css文件，写入以下样式：

.reactable {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    width: 100%;
    border-collapse: collapse;
}
.reactable-header {
    background-color: #f5f5f5;
    border-bottom: 2px solid #ddd;
}
.reactable-th {
    padding: 10px 12px;
    font-weight: bold;
    text-align: left;
}
.reactable-td {
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
}
.reactable-striped .reactable-tr-even {
    background-color: #f7f7f7;
}
.reactable-highlight {
    background-color: #f0f0f0;
}

内容的提问来源于stack exchange，提问作者stats_noob