Issues generating to pdf or saving the table as image

[eduardogtc]

Hi,

Thanks for the awsome package. I'm excited in produce some reports with this tool, but I'm facing some problems in generate pdf from a rmarkdown file with reactable. After getting a lot of errors, I decided to create a simple file to test it.

But the table generated in the PDF from this simple example was shrunk. This is the same behaviour I got when I try to generate an image with webshot package.

This is the simple example:

   ---
   title: "Untitled"
   author: "Eduardo"
   date: "13/08/2020"
   output: pdf_document
   ---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}
library(htmltools)
library(reactable)


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

car_table
```

## Including Plots

You can also embed plots, for example:

```{r pressure, echo=FALSE}
plot(pressure)
```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

This is the pdf generated:

Test-reactable-pdf .pdf

In the code bellow I also tried to generate an image from the reactable:

    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 image with the same issue **

I also copied the Twitter Followers Demo, but I can't even knit to pdf. I got the error below:

    LaTeX Error: Environment show-hidden undefined.

    Error: LaTeX failed to compile twiter-report.tex. See https://yihui.org/tinytex/r/#debugging for debugging tips. See twiter-report.log for more info.
    Execution halted

Thanks
Eduardo

[glin]

Hi, thanks for the report and examples. I believe the problem is that webshot (via PhantomJS) doesn't support some CSS features that reactable uses -- in particular, flexbox for layout. A beta version of PhantomJS may have supported it, but it looks like that version was abandoned when PhantomJS was discontinued. See ariya/phantomjs#14793

Unfortunately, I don't think there's a good solution other than to wait for webshot2, which uses a more modern browser engine. Using the development version of webshot2, here's the screenshot I get for the example table above:

library(webshot2)

webshot(html, "car_table.png")

I don't know if webshot2 is ready to use in rmarkdown though - probably not yet. So if possible, I'd recommend using a different table package with better PDF support.

edit: Alternatively, you could save an HTML document to PDF with your browser, but you might run into some of the background color issues described in #18.

[eduardogtc]

Thanks for the answer @glin,

I've tried to used webshot2, but I couldn't make it work.

Instead, my solution was to use Selenium to take a screenshot of the page. But this approach generated another problem: a lot of whitespace below the table (my table is short).

The workaround for that was installing ImageMagick in my PC and calling the command line: "C:\Program Files\ImageMagick-7.0.10-Q16-HDRI\convert" screenshot.png -trim output.png. You need to use the full path because there are other convert programs in windows.

I'm not sure this solution will work on the more complex table, but so far, so good.

Regarding using a different package, I will stick with reactable. The final result it's much better than the others.

Thanks,
Eduardo