White space from datatable screenshot in Rmarkdown PDF

Question

i am facing a problem with the new possibility of taking a screenshot of html widgets for further implementation, in for example pdf document. The screenshot of the datatable (DT package) has too high height, which appears as a white space in rmarkdown document (it is easily spotted by the position of the fig.cap, that is way below the end of the datatable).i cannot understand why is this happening and i would like to remove it (no white space under the datatable). Have a look at the example below for the test.Rmd which fully shows the problem:

---
output:
  pdf_document:
    toc: yes
header-includes:
    - \usepackage{fancyhdr}
    - \usepackage[ngerman]{babel}
---
\addtolength{\headheight}{1.0cm} 
\pagestyle{fancyplain} 
\renewcommand{\headrulewidth}{0.4pt}
\renewcommand{\footrulewidth}{0.4pt}
\chead{Test}
\lhead{\scriptsize\today}


```{r, fig.align='center', fig.pos='htb!', fig.width=12, fig.cap="The height of screenshot is too high!!",fig.height=3,echo=FALSE, cache=FALSE, warning = FALSE, message = FALSE, tidy=TRUE}
library(DT)
library(webshot)
datatable(mtcars[1:2,],rownames=FALSE, options = list(dom='t',ordering=F))
```

• Additionally i have tried different number of displayed rows in datatable, and i have noticed if the datatable has > 20 rows then figure is well displayed with the caption.
• However my table in original pdf file has for example 2 rows (can be bit more --> the number of rows is reactive, as this rmarkdown is a downloable report that belongs to shiny app), thats why in example i have used only two rows from mtcars dataset.

Answer 1

I had this issue in a Shiny app using renderUI to render a datatable object. I had to add width = 100% and height = 100%. So maybe try:

datatable(mtcars[1:2, ], rownames = FALSE, options = list(dom = "t", ordering = F), height = "100%")

Answer 2

On the webpage from which you are grabbing the table, is there a CSS selector? If you can find one that encloses just the table it may just grab the table and not a shot of the whole page. See this example:

webshot("http://www.nfl.com/superbowl/results/superbowl/", "nfl.png",
         selector = "div.columnStats")

To find the CSS selector, I went to the webpage ( in this case http://www.nfl.com/superbowl/results/superbowl/) in a browser and then hit Ctrl+u to view the source. I scrolled until I found the table and on line 1374 found

<!-- Records table -->
    <div class="columnStats">

I translated div class="columnStats" into the option div.columnStats, which I specified for selector.

Windows

I was able to reproduce your error. In your actual application is there a CSS selector you can specify? (see NFL example above).

MAC

No problems with whitespace. Here's what I did:

I had never used DT, webshot, or PhantomJS. So after:

install.packages("DT")
install.packages("webshot")
webshot::install_phantomjs()

I knit'd the test.Rmd you posted on my mac and got:

Answer 3

Can you try to add the following to r chunk and see if this works:

screenshot.opts = list(delay = 1, cliprect = c(0, 0, 1000, 150)), dev='jpeg'