如何让可调整大小的reactable表格列宽不小于表头宽度？

我正在创建一个reactable可调整大小表格，目前遇到的问题是：由于表格支持调整大小，部分较长的列名无法完整显示。以下是可复现的示例代码：

library(reactable)
data <- aggregate(. ~ Species, iris, toString)

reactable(
  data,
  wrap = FALSE,
  resizable = TRUE,
  bordered = TRUE,
  columns = list(Petal.Length = colDef(name = "Petal Length (cm)"),
                 Sepal.Length = colDef(name = "Sepal Length (cm)"))
)

^{创建于2024-12-03，使用reprex v2.1.1}

如图所示，初始状态下部分列的宽度不足以显示完整表头。我希望表格保持可调整大小的特性，同时设置列的最小宽度为表头宽度，请问该如何实现？

解决方案1：手动指定列最小宽度 #

直接在colDef中添加minWidth参数，根据表头内容长度设置合适的最小宽度值，确保表头完整显示，同时保留列的可调整功能：

library(reactable)
data <- aggregate(. ~ Species, iris, toString)

reactable(
  data,
  wrap = FALSE,
  resizable = TRUE,
  bordered = TRUE,
  columns = list(
    Species = colDef(minWidth = 120),
    Petal.Length = colDef(name = "Petal Length (cm)", minWidth = 150),
    Sepal.Length = colDef(name = "Sepal Length (cm)", minWidth = 150),
    Petal.Width = colDef(minWidth = 120),
    Sepal.Width = colDef(minWidth = 120)
  )
)

你可以根据实际表头的长度，灵活调整minWidth的数值，保证表头内容不会被截断。

解决方案2：用CSS自动适配表头宽度 #

如果不想手动设置数值，可以通过自定义CSS让表头自动适配内容宽度，同时禁止表头文字换行：

library(reactable)
data <- aggregate(. ~ Species, iris, toString)

reactable(
  data,
  wrap = FALSE,
  resizable = TRUE,
  bordered = TRUE,
  columns = list(
    Petal.Length = colDef(name = "Petal Length (cm)"),
    Sepal.Length = colDef(name = "Sepal Length (cm)")
  ),
  theme = reactableTheme(
    tableStyle = list(
      "th" = list(
        whiteSpace = "nowrap"
      )
    ),
    css = list(
      ".reactable-header" = list(
        minWidth = "fit-content"
      )
    )
  )
)

这种方式会让列的最小宽度自动匹配表头内容的宽度，初始状态下表头完整显示，也不影响后续的列宽调整操作。

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