Search code examples
rtabsdtquartoreveal.js

Tabsets not rendering datatables properly for Quarto Revealjs presentation


I am making a presentation in Quarto using Revealjs. I would like each slide to contain a panel-tabset with multiple tabs, each containing a datatable. When I view the rendered HTML document, several of the datatables fail to load. Specifically, the first tab on each page will always load, as will all the tabs on the first slide, but the others seem randomly hit and miss. The HTML source code clearly builds the datatables, they simply are not loading. If I refresh the HTML document on the tab of one of the missing datatables, it will show up (and maybe make some neighbors show up too, but others disappear). I've tested this across two browsers and two OS platforms, and the behavior persists.

Here is a reproducible example. After rendering, open the HTML output and look at Tabs 2 and 3 on Page 3, and you should see what I mean.

---
format: 
  revealjs

execute:
    echo: false
    message: false
---

```{r}
#| label: load-packages
#| include: false

library(tidyverse)
library(DT)

options(dplyr.summarise.inform = FALSE)
```


# Data prep

```{r echo=TRUE}
dat1 <- diamonds %>%
  group_by(cut) %>%
  summarize(n = n(), price = round(mean(price), 2))
dat2 <- diamonds %>%
  group_by(carat) %>%
  summarize(n = n(), price = round(mean(price), 2))
dat3 <- diamonds %>%
  group_by(clarity) %>%
  summarize(n = n(), price = round(mean(price), 2))
```


## Page 1

::: panel-tabset

### Tab 1

```{r}
#| label: tab-1-1
datatable(dat1)
```

### Tab 2

```{r}
#| label: tab-1-2
datatable(dat2)
```

### Tab 3

```{r}
#| label: tab-1-3
datatable(dat3)
```

:::

## Page 2

::: panel-tabset

### Tab 1

```{r}
#| label: tab-2-1
datatable(dat3)
```

### Tab 2

```{r}
#| label: tab-2-2
datatable(dat1)
```

### Tab 3

```{r}
#| label: tab-2-3
datatable(dat2)
```

:::

## Page 3

::: panel-tabset

### Tab 1

```{r}
#| label: tab-3-1
datatable(dat3)
```

### Tab 2

```{r}
#| label: tab-3-2
datatable(dat1)
```

### Tab 3

```{r}
#| label: tab-3-3
datatable(dat2)
```

:::

Result before refreshing: enter image description here

Result after refreshing: enter image description here


Solution

  • Well, I tracked down the source of the issue; answering my own question for the sake of anyone else that experiences this problem in the future.

    Per this discussion from 2016, The DT package is written to hold off on rendering until the table is visible. When I compile my presentation and then edit the 'datatables.js' document to comment out lines 73-76, the problem goes away.

    I'm going to reach out to the package authors about it, but given that this issue was already raised six years ago to no effect, nothing may come of it. As a short-term fix I cloned the package repository and commented out the lines myself, and loaded that into my script as a renamed package with otherwise identical functionality as DT.