Image generated from table reactable is shrinking

[eduardogtc]

I'm trying to generate an image from a table generated with the package Reactable, but the table inside the picture is shrinking. I've tried some args like vwidth and cliprect, but it didn't work.

If I open the HTML that was generated in the process, the table is ok.

Below there is a simple code to demonstrate it. (this behaviour happens with differents reactables)

library(htmltools)
library(reactable)
library(htmlwidgets)
library(webshot)

data <- MASS::Cars93[20:49, c("Make", "MPG.city", "MPG.highway")]

# Render a bar chart with a label on the left
bar_chart <- function(label, width = "100%", height = "16px", fill = "#00bfc4", background = NULL) {
    bar <- div(style = list(background = fill, width = width, height = height))
    chart <- div(style = list(flexGrow = 1, marginLeft = "8px", background = background), bar)
    div(style = list(display = "flex", alignItems = "center"), label, chart)
}

car_table <- reactable(data, 
    pagination=FALSE,
    columns = list(
    MPG.city = colDef(name = "MPG (city)", align = "left", cell = function(value) {
        width <- paste0(value / max(data$MPG.city) * 100, "%")
        bar_chart(value, width = width)
    }),
    MPG.highway = colDef(name = "MPG (highway)", align = "left", cell = function(value) {
        width <- paste0(value / max(data$MPG.highway) * 100, "%")
        bar_chart(value, width = width, fill = "#fc5185", background = "#e1e1e1")
    })
))

html <- "car_table.html"
saveWidget(car_table, html)
# webshot(html, "car_table.png", vwidth = "2480", cliprect = "viewport")
webshot(html, "car_table.png" )

This is the picture generated in the Rstudio Viewer:

This is the image generated by webshot:

Below there is an even simpler example with the same issue.

iris_table <- reactable(
    iris[1:30, ],
    # searchable = TRUE,
    striped = TRUE,
    highlight = TRUE,
    bordered = TRUE,
    pagination = FALSE,
    theme = reactableTheme(
        borderColor = "#dfe2e5",
        stripedColor = "#f6f8fa",
        highlightColor = "#f0f5f9",
        cellPadding = "8px 12px",
        style = list(
            fontFamily = "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"
        ),
        searchInputStyle = list(width = "100%")
    )
)

html <- "iris_table.html"
saveWidget(iris_table, html)
webshot(html, "iris_table.png" )

Image from Rstudio

Image from webshot

Thanks, Eduardo