reactable中如何条件调整指定列单元格的左内边距？

问题说明 #

想要调整reactable中某列特定单元格的左内边距，已实现基于条件修改字体颜色，但内边距设置无效。以下是最小可复现代码：

library(reactable)
library(dplyr)

df <- iris |>
  group_by(Species) |>
  slice(1:3) |>
  select(Species, Sepal.Length)

reactable::reactable(df,
                     columns = list(
    Species =  colDef(align = "left",
                     style = function(value, index) {
                       if (df$Species[index] == "setosa") {
                         paddingLeft <- "padding-left: 10px;"
                         color <- "red"
                       } else if (df$Species[index] == "versicolor") {
                         paddingLeft <- "padding-left: 30px !important;"
                         color <- "green"
                       } else {
                         paddingLeft <- "padding-left: 1px;"
                         color <- "black"
                       }
                       list(paddingLeft = paddingLeft, color = color)
                     })
                     ))

解决办法 #

问题出在style函数中CSS属性的赋值方式：你给paddingLeft传了完整的CSS声明字符串（比如"padding-left: 10px;"），但reactable要求直接传属性值，属性名用驼峰式（或带引号的短横线式）。

修改后的代码如下：

library(reactable)
library(dplyr)

df <- iris |>
  group_by(Species) |>
  slice(1:3) |>
  select(Species, Sepal.Length)

reactable::reactable(df,
                     columns = list(
    Species =  colDef(align = "left",
                     style = function(value, index) {
                       if (df$Species[index] == "setosa") {
                         paddingLeft <- "10px"
                         color <- "red"
                       } else if (df$Species[index] == "versicolor") {
                         paddingLeft <- "30px !important"
                         color <- "green"
                       } else {
                         paddingLeft <- "1px"
                         color <- "black"
                       }
                       # 也可以用带引号的短横线式写法："padding-left" = paddingLeft
                       list(paddingLeft = paddingLeft, color = color)
                     })
                     ))

关键修改点 #

• 把paddingLeft的值从完整CSS声明（"padding-left: 10px;"）改为单纯的属性值（"10px"）
• reactable会自动将驼峰式的paddingLeft映射为CSS的padding-left属性，无需手动写完整声明
• 若需强制覆盖原有样式，可在值中添加!important（如"30px !important"）

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