Table captions don't work with html widgets (e.g. DT, reactable)

[half-normal]

Bug description

Maybe this should be a feature request as I imagine it is known functionality, but it would be nice to have table captions work for html widgets. For example the reactablefmtr is a nice package for making interactive tables, but currently I have to use figure captions.

Steps to reproduce

## Test

```{r echo=FALSE}
#| label: tbl-DT
#| tbl-cap: "A table made with DT"
library(DT)
df <- data.frame(x = 1:2, y = c("A", "B"))
df |> datatable()
```

```{r echo=FALSE}
#| label: tbl-reactable
#| tbl-cap: "A table made with reactablefmtr"
library(reactablefmtr)
df |> reactable(theme = clean())
```

See @tbl-DT and @tbl-reactable for ...

Expected behavior

Table captions render.

Actual behavior

Table captions do not render.

Your environment

   sysname        release        version            machine    
   "Windows"    "10 x64"  "build 19045"      "x86-64" 

   quarto --version
   1.3.361
   
  R version 4.3.1 (2023-06-16 ucrt) -- "Beagle Scouts"
  Platform: x86_64-w64-mingw32/x64 (64-bit)

Quarto check output

[>] Checking versions of quarto binary dependencies...
Pandoc version 3.1.1: OK
Dart Sass version 1.55.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
Version: 1.3.361
Path: C:\Users\bford\AppData\Local\Programs\Quarto\bin
CodePage: 65001

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
Version: 3.10.10 (Conda)
Path: C:/Users/bford/AppData/Local/Programs/mambaforge/python.exe
Jupyter: 5.3.1
Kernels: python3

[>] Checking Jupyter engine render....OK

(-) Checking R installation...........── Attaching core tidyverse
packages ──────────────────────── tidyverse 2.0.0 ──
✔ dplyr 1.1.2 ✔ readr 2.1.4
✔ forcats 1.0.0 ✔ stringr 1.5.0
✔ ggplot2 3.4.2 ✔ tibble 3.2.1
✔ lubridate 1.9.2 ✔ tidyr 1.3.0
✔ purrr 1.0.1
── Conflicts ────────────────────────────────────────── tidyverse_conflicts() ──
✖ ::() masks
ℹ Use the conflicted package (http://conflicted.r-lib.org/) to force all conflicts to become errors
[>] Checking R installation...........OK
Version: 4.3.1
Path: C:/Users/bford/AppData/Local/Programs/R/R-4.3.1
LibPaths:
- C:/Users/bford/AppData/Local/Programs/R/R-4.3.1/library
knitr: 1.43
rmarkdown: 2.22

[>] Checking Knitr engine render......OK

[half-normal]

Here is a hacked together solution for anyone interested:

## Test {-}

Here is some body text. 

```{css classDummyTable, echo=FALSE}
.dummyTable .table thead {
    visibility: collapse;
}
.dummyTable .table tbody {
    visibility: collapse;
}
.dummyTable .table {
    border-collapse: inherit;
    padding-bottom: none;
}
.dummyTable .table.table.table-sm.table-striped.small {
    margin: auto;
}
```

```{r tblMtcarsCaption, echo=FALSE}
#| label: tbl-Mtcars
#| classes: dummyTable
#| tbl-cap: This caption was generated by a table with you cannot see
mtcars[1,] |> knitr::kable()   # Dummy table is completely hidden from report
```

```{r tblMtcarsTable, echo=FALSE}
mtcars %>% reactable()     # Real table shown in report 
```


In @tbl-Mtcars above we can see that we have a cross-ref'able table caption for a `reactable()` table.

[mcanouil]

Thanks for the report!

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[half-normal]

---
title: "Issue #6838"
subtitle: "Table captions don't work with html widgets (e.g. DT, reactable)"
engine: knitr
format:
  html:
    toc: true
    shift-heading-level-by: -1
    highlight-style: atom-one
---

```{r message=FALSE}
library(magrittr)
library(knitr)
library(reactablefmtr)
```

In mtcars `kable` we see @tbl-kable is captioned as expected. If we try with `reactablefmtr::reactable` we see that the caption and this cross-ref @tbl-reactable don't work. 

We can hack together a solution like I have done with css and a dummy table in @tbl-dummy. However it would be good if this just worked as expected for html widget tables. 

## mtcars `kable`


```{r echo=FALSE}
#| label: tbl-kable
#| tbl-cap: A table created with kable.
mtcars[1:3, ] |> kable()
```


## mtcars `reactable`

```{r echo=FALSE}
#| label: tbl-reactable
#| tbl-cap: A table created with reactable.
mtcars[1:3, ] %>% reactable()
```

## mtcars `reactable` & dummyTable class 

```{css classDummyTable, echo=FALSE}
.dummyTable .table thead {
    visibility: collapse;
}
.dummyTable .table tbody {
    visibility: collapse;
}
.dummyTable .table {
    border-collapse: inherit;
    padding-bottom: none;
}
.dummyTable .table.table.table-sm.table-striped.small {
    margin: auto;
}
```

```{r tblCaption, echo=FALSE}
#| label: tbl-dummy
#| classes: dummyTable
#| tbl-cap: This caption was generated by a table printed with kable, but below we only see a reactable table :) 
mtcars[1,] |> kable()   # Dummy table is completely hidden from report
```

```{r tblTable, echo=FALSE}
mtcars[1:3, ] %>% reactable()  # Real table shown in report 
```

[half-normal]

And here is the qmd rendered on my machine:

[mcanouil]

The reason is pretty simple, reactablefmtr does not emit a table but an HTML div.
You can see that using keep-md: true.
This means Quarto (in its current state) can't know it's supposed to be a table and process it as a table in the cross-reference system.

Unfortunately, there is not much to be done now, but the work done on the following issue should alleviate the constraint of having an actual table for it to be cross-referenced as a table.

• Epic: Crossref Overhaul #4944

---

To note the following is not valid, as you are defining code cell labels twice, one using inline R syntax and one using YAML syntax. Recommended syntax in Quarto is YAML. Note that mixing the various syntaxes (there is also the mutlitine R syntax) can cause unexpected behaviour.
For instance, which between tblCaption and tbl-dummy do you expect the label to be?

Quarto document	HTML
```{r tblCaption, echo=FALSE} #| label: tbl-dummy #| classes: dummyTable #| tbl-cap: This caption was generated ... kable(mtcars[1, ]) ```	```{r} #| echo: false #| label: tbl-dummy #| classes: dummyTable #| tbl-cap: This caption was generated ... kable(mtcars[1, ]) ```

PS: on mtcars[1,] |> kable() https://style.tidyverse.org/pipes.html?#short-pipes

[half-normal]

Thanks @mcanouil. Is Crossref Overhaul #4944 still in progress?

[mcanouil]

Opened issues mean not completed/resolved.

[cscheid]

This specific bug should be closed by #6620, which I do hope to merge today.

[cderv]

Closing as this now works with 1.4 following #6620 merge