Search code examples
javascriptrr-markdowndtflexdashboard

Add Scroll to Side of DataTable (Package DT)

I have a created a flexdashboard through RMarkdown. In my Rmarkdown document I wanted to add a datatable from the package DT which would be able to have your table interactive. The issue I am having is that when I create this, there is no scroll bar on the side to scroll up and down the table. I know I need to implement javascript which is provided in this link but I am not sure how to implement javascript with RMarkdown: https://datatables.net/examples/basic_init/scroll_xy.html

I attempted scrollY but when I do that the header alignment is completely off.

The sample code for this is below and completely reproducible because I am also using the mtcars dataset.

---
title: "Morning Reportab"
date: "`r format(Sys.time(), '%d %B, %Y')`"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
---

```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
```

Row
-----------------------------------------------------------------------

### AGORA {data-height=170}

```{r}
datatable(mtcars)
```

Row
-----------------------------------------------------------------------


### Chart B {data-height=170}

```{r}
datatable(mtcars)
```

Row
-----------------------------------------------------------------------


### Chart C

```{r}
datatable(mtcars)
```

This is the output screenshot: enter image description here

How do I add a scroll bar on the side of each table in this rmarkdown?

Any help would be great, thanks!

Solution

  • If you have the latest version of the package DT installed (>= 0.2) then scrollbars should be added by default. If this is not the case, you can edit the option fillContainer globally by

    options(DT.fillContainer = T)

    If you want to edit only specific tables you can go by

    datatable(myData, fillContainer = T)