DT package not working with blogdown using hugo-fu

Question

I have a blogdown site based on the hugo-future-imperfect theme where a DT output is created correctly in the rmd but the data is not shown (although the headings are) when applying serve_site/build_site

I have created two brand new sites ( so with no other complications) to illustrate the issue. This is the code and outputs

```{r DT}
library(DT)
library(tidyverse)

iris %>% 
  datatable()
```

a) default theme

b) hugo-imperfect

Answer 1

From https://owi.usgs.gov/blog/leaflet/ and https://github.com/rstudio/blogdown/issues/20 the answer is to display the output in an iframe. So:

Bind the output to a variable in your code, do not display the output from this block:

```{r, message=FALSE, warning=FALSE, include=FALSE}
library(DT)
library(tidyverse)

d1 <- iris %>% 
  datatable()

d1

```

In the next block, save the widget to a separate file (hide the code and output from this one).

```{r, message=FALSE, warning=FALSE, include=FALSE}
library(htmlwidgets)
library(htmltools)

htmlwidgets::saveWidget(d1, file = "d1.html", selfcontained = TRUE)

```

The widget is not saved as d1.html, instead a folder d1 is created and a file index.html is created in the folder. You need to reference this index file from an iframe tag (outside of a code block)

<iframe seamless src="../d1/index.html" width="100%" height="500"></iframe>

You should see the output from this iframe in your page.

It's not a pretty workaround. Hopefully the problem will be solved within rblogdown soon.

Answer 2

In addition to MrHopko's answer above you can hack datatable support into your theme. I just hacked my hugo theme to support datatables this morning.

In my example you will make the changes in theme directly, but it is possible to use the override mechanism instead.

you can run DT::saveWidget(d1, "temp.html", selfcontained = FALSE) once to generate the necessary libraries. Then copy "temp_files/*" to "themes/your-theme/static/lib"

This will copy over a few javascript libraries. Then you will need to reference them in your theme. Then you need to bring in the libraries to your partials. Then you need to copy the dependencies from "temp.html" into their associated partials.

You then need to set it so your posts load these dependencies. In my case I needed to put the <script> tags into "themes/my-theme/layouts/partials/scripts.html" and the <link rel="stylesheet" ...> tags into "themes/my-theme/layouts/partials/head.html".

In my case I added:

<link href="{{ "lib/datatables-css-0.0.0/datatables-crosstalk.css" | relURL }}" rel="stylesheet">
<link href="{{ "lib/dt-core-1.10.16/css/jquery.dataTables.min.css" | relURL }}" rel="stylesheet">
<link href="{{ "lib/dt-core-1.10.16/css/jquery.dataTables.extra.css" | relURL }}" rel="stylesheet">
<link href="{{ "lib/crosstalk-1.0.0/css/crosstalk.css" | relURL }}" rel="stylesheet">

to head.html and

<script src="{{ "lib/htmlwidgets-1.0/htmlwidgets.js" | relURL }}"></script>
<script src="{{ "lib/jquery-1.12.4/jquery.min.js" | relURL }}"></script>
<script src="{{ "lib/datatables-binding-0.4/datatables.js" | relURL }}"></script>
<script src="{{ "lib/dt-core-1.10.16/js/jquery.dataTables.min.js" | relURL }}"></script> 
<script src="{{ "lib/crosstalk-1.0.0/js/crosstalk.min.js" | relURL }}"></script> 

to scripts.html

After that

```{r, results = "asis"}
DT::datatable(d1)
```

Should work.

Answer 3

You can use the package widgetframe.

Install the package and the save your datatable in a variable.

install.packages("widgetframe")

ts <- iris %>% DT::datatable()

So when you want to display the datatable, just do it:

widgetframe::frameWidget(ts)

That works for me!