rr-markdownpagedownreactable

R Markdown: Printing reactable tables with pagedown::chrome_print causes some unreadable rows


I'm trying to create parametrized R markdown reports that contain some text and a table. I'm firstly creating html output (and use css for custom style) and then I print them with pagedown package. All is near to perfect except that in some reports the tables don't print well on the page break. I canont find whether the issue comes from the reactable package or pagedown. But I also tried printing manually from Chrome and the output doesn't look exactly the same. In some cases the result was good and in some cases the first row on the new page was still a little squished (although less than with pagedown::chrome_print).

This is how the output looks like: 1

And how it should look like: 2

Example code:

---
title: "test"
output: html_document
knit: pagedown::chrome_print
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
library(reactable)
# create some input
sometext <- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis nec erat et pellentesque. Integer varius rhoncus velit, a luctus lectus aliquam vitae. Mauris pulvinar turpis nibh, ut porttitor velit congue luctus. Mauris cursus convallis dui molestie ornare. Vestibulum enim nibh, iaculis aliquam velit in, aliquam placerat enim. Sed interdum non ex et fringilla. Quisque massa orci, auctor nec consequat non, posuere eget mi. Vestibulum lacinia quis arcu vel malesuada. In risus lacus, auctor at nisi non, tincidunt condimentum enim. Maecenas posuere pellentesque feugiat. Cras vel lectus placerat, euismod ipsum a, vulputate felis. Morbi bibendum ex id quam consectetur dapibus. Ut vel magna ac nulla venenatis imperdiet sit amet in mi."
sometext <- strsplit(sometext, split = ",")[[1]]
sometext <- rep(sometext, 3)
sometext <- as.data.frame(matrix(sometext, ncol = 2))
```
<br><br>

```{r}
reactable::reactable(sometext, sortable = FALSE, highlight = TRUE, pagination = FALSE, rownames = TRUE, columns = list('V1' = colDef(maxWidth = 355),'V2' = colDef(maxWidth = 355)))
```

Do you have any advice of what could be set differently to make it work?


Solution

  • In the end I found the solution in a different package for tables so I post it here for future reference.

    I used formattable package:

    ```{r}
    row.names(sometext) <- NULL
    formattable::format_table(sometext, align = "l")
    ```
    

    and to achieve the same formatting as reactable I added a css code:

    .table tbody tr td {
        padding: 7px 9px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: .5px solid #f2f2f2 }
    
    .table thead tr th {
        padding: 7px 9px;
        vertical-align: bottom;
        border-bottom: 2px solid #e9e9e9 }
    

    Actually the printing result is even better with formattable as it automatically adds header on a new page.