In R language with (reactable) How to align all bars for different values when using data_bars() and setting text_position = "outside-base"

Question

I want to align all bars to appear in a nice way and not too missy for the columns when I am using data_bars() for a column inside reactable().. when the value is less than 10. the bar appears to the left of others with value > 10. because it starts after the intergers when I position then outside-base. I want exactly to position the numbers outside-base but the bars appears in a consistent way.

I provide a simple r code here.

data <- data.frame(
  Group = c("Red Group 1","Red Group 2","Red Group 3","Red Group 4","Red Group 5",
            "Blue Group 1","Blue Group 2","Blue Group 3","Blue Group 4","Blue Group 5",
            "Green Group 1","Green Group 2","Green Group 3","Green Group 4","Green Group 5"),
  Pct1 = c(.27, .82, .044, .68, .78, 
           .74, .66, .33, .23, .02, 
           .50, .055, .40, .70, .60),
  Pct2 = c(.33, .17, .87, .54, .037,
           .84, .72, .061, .48, .077,
           .01, .39, .60, .55, .81)
)

reactable(
  data,
  pagination = FALSE,
  defaultColDef = colDef(
    cell = data_bars(data, 
                     text_position = "outside-base",
                     number_fmt = scales::percent)
  )
)

Answer 1

text_position = 'inside-base' would make it a bit less messy, might want to use a different text color ...