Conditionally adjust padding in reactable

Question

I would like to adjust the left padding of specific cells in a column in a reactable. I can get it to work for color (based on this answer), but not the padding. Any ideas?

MWE

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

Answer 1

Similar to color pass only the value to paddingLeft:

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"
          color <- "green"
        } else {
          paddingLeft <- "1px"
          color <- "black"
        }
        list(paddingLeft = paddingLeft, color = color)
      }
    )
  )
)