1

I may be using the term "responsive" incorrectly in this context but I am trying to create a table using DT::datatable in blogdown/Hugo where the container adjusts to the "Show entries" selection, like the first table on the DT page. I am able to do this in a regular html document using knitr/R markdown but cannot get this behavior in blogdown. My understanding is that to have an html widget in blogdown (with Hugo) I need to use widgetframe package. Cool. The widgetframe documentation has a demonstration with the DT package here (bottom of page) . As you can see though, when you adjust the "Show entries" the container stays the same.

A minimal example for straight-up R Markdown/knitr html document where the container responds to "Show entries".

library(DT)
datatable(iris)

A minimal example using widgetframe in blogdown where the container does not respond to "Show entries".

library(widgetframe)
library(DT)
dt <-  datatable(
  head(iris, 20), 
  options = list(
     columnDefs = list(list(className = 'dt-center', targets = 5)),
     pageLength = 5, lengthMenu = c(5, 10, 15, 20)),
  fillContainer = T)

frameWidget(dt, height = 350, width = '95%')

I have tried manually controlling the height in both the frameWidget and DT commands. I can control the container size but cannot get it to respond to the number of "Show entries". Thanks

jjscott
  • 11
  • 1

1 Answers1

0

You don't need to use the widgetframe package. Don't set fillContainer, it will force the DT table to fit in the container. The default DT::datatable(df) will do exactly what you expected.

Here is a full-text example of a blogdown post:

---
title: A showcase for responsive DT table
date: '2019-12-17'
---

```{r}
DT::datatable(head(iris, 20))
```
TC Zhang
  • 2,757
  • 1
  • 13
  • 19
  • thank you for the suggestion @tc-zhang. Unfortunately this makes a table with only the header row only and no other data, no other rows. – jjscott Dec 18 '19 at 18:59
  • [My working example in my blogdown site](http://tc.rbind.io/post/2019/12/17/showcase-for-responsive-dt-table/) – TC Zhang Dec 19 '19 at 04:20
  • [Rmd source](https://github.com/rbind/blogsite/blob/master/content/post/2019-12-17-showcase-for-responsive-dt-table.Rmd) Hope this helps. – TC Zhang Dec 19 '19 at 04:21
  • I still have the same issue but thanks to your example TC Zhang I am now pretty sure this is a problem with my Hugo theme (which is Academic Hugo) . I still get the same thing, header row only, nothing else. – jjscott Dec 20 '19 at 12:02
  • can you provide your repo? – TC Zhang Dec 21 '19 at 00:55
  • Of course. Here is the [demo page](https://istmobiome.rbind.io/projects/trans-water/test/) with several examples. Here is a [table](https://istmobiome.rbind.io/projects/trans-water/d1/) from the demo page that is responsive in a stand-alone html, and here is the [GitHub repo](https://github.com/istmobiome/web/blob/master/content/projects/trans-water/test.Rmd) for the demo. Thank you for your help TC Zhang. – jjscott Dec 22 '19 at 13:17
  • Found the problem, jquery loaded multiple times. [Related question](https://stackoverflow.com/questions/31227844/typeerror-datatable-is-not-a-function). Please file an issue to the Hugo academic theme repo. This is beyond what I can debug. – TC Zhang Dec 23 '19 at 04:36
  • I submitted this issue to the Academic GitHub repo [#1493](https://github.com/gcushen/hugo-academic/issues/1493). – jjscott Dec 23 '19 at 13:48
  • 1
    and then it was rejected because apparently this is not a bug. – jjscott Dec 23 '19 at 18:27