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: 
Result after refreshing: 
