DT::datatable cross-referencing and captions

[simonjackman]

It seems that quarto wants tables to be the way kable makes them (piped/markdown style), not the JS chunks produced by, say, DT::datatable.

datatable produces output, but captions and cross-referencing are ignored.

Small example:

    ---
    title: "test"
    format: html
    execute:
      echo: false
    ---

    ```{r}
    library(knitr)
    library(DT)
    d <- iris[1:20,]
    ```

    # kable
    @tbl-kable comes here.

    ```{r}
    #| tbl-cap: "kable {#tbl-kable}"
    kable(d)
    ```

    # DT::datatable
    @tbl-datatable comes here.

    ```{r}
    #| tab-cap: "datatable {#tbl-datatable}"
    datatable(d)
    ```

Unexpected output in final html is shown in attached screenshot.

Many thanks for looking into this.

Sys info:

MacBook-Pro-4:results jackman$ quarto check

[✓] Checking Quarto installation......OK
      Version: 0.9.528
      Path: /Applications/quarto/bin

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

[✓] Checking Python 3 installation....OK
      Version: 3.9.10
      Path: /usr/local/bin/python3
      Jupyter: 4.10.0
      Kernels: julia-0.6, python3

(-) Checking Jupyter engine render....2022-06-07 14:10:55,569 - traitlets - WARNING - Kernel Provisioning: The 'local-provisioner' is not found.  This is likely due to the presence of multiple jupyter_client distributions and a previous distribution is being used as the source for entrypoints - which does not include 'local-provisioner'.  That distribution should be removed such that only the version-appropriate distribution remains (version >= 7).  Until then, a 'local-provisioner' entrypoint will be automatically constructed and used.
The candidate distribution locations are: ['/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/jupyter_client-7.3.2.dist-info']
[✓] Checking Jupyter engine render....OK

(/) Checking R installation...........Loadi
<img width="1001" alt="Screen Shot 2022-06-07 at 2 25 14 pm" src="https://user-images.githubusercontent.com/963653/172295722-9a0b57b8-8ef7-4a92-bcca-2258acb9bc9c.png">
ng .Rprofile for the current workflowr project
This is workflowr version 1.7.0
Run ?workflowr for help getting started
[✓] Checking R installation...........OK
      Version: 4.3.0
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Users/jackman/Library/R/arm64/4.3/library
        - /Library/Frameworks/R.framework/Versions/4.3/Resources/library
      rmarkdown: 2.14

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

[cderv]

For reference purposes, there is already a discussion item about this: #628
Sharing so that we can keep them up in sync.

DT tables are part of interactive tables, and they are specific HTML widgets and not tables per-se (not Markdown tables, nor HTML tables). As answered in #782, currently, they can be reference as Figures only

---
title: "test"
format: html
execute:
  echo: false
---

```{r}
d <- iris[1:20,]
```

# kable
@tbl-kable comes here.

```{r}
#| label: tbl-kable
#| tbl-cap: "kable"
knitr::kable(d)
```

# DT::datatable
@fig-datatable comes here.

```{r}
#| label: fig-datatable
#| fig-cap: "datatable"
DT::datatable(d)
```

It will be reference as Figures, but that is what is working currently.

Cross reference htmlwidgets will be something added in a later version probably. It requires some specific adjustments, also considering different computation language outputs.

By the way, for using references within computation chunk, it is best to use the label chunk option instead of using id in the caption. Syntax would be this way

```{r}
#| label: tbl-datatable
#| tbl-cap: "datatable"
DT::datatable(iris)
```

[MarekGierlinski]

Just to make you aware, the same problem arises with interactive gt tables, probably for the same reason.

---
title: "gt"
format: html
execute:
  echo: false
---

See @tbl-gt.

```{r}
#| label: tbl-gt
#| tbl-cap: "Caption not visible"
iris |>
  gt::gt() |> 
  gt::opt_interactive()
```

[rich-iannone]

@MarekGierlinski thanks for letting us know that interactive tables from gt have the same problem! We will ensure these tables are also handled and tested when we get to the work.

[cscheid]

The following document renders cleanly on main now:

---
title: "test"
format: html
execute:
  echo: false
---

```{r}
library(knitr)
library(DT)
d <- iris[1:20,]
```

## kable

@tbl-kable comes here.

```{r}
#| label: tbl-kable
#| tbl-cap: "kable"
kable(d)
```

## DT::datatable

@tbl-datatable comes here.

```{r}
#| label: tbl-datatable
#| tbl-cap: "datatable"
datatable(d)
```

Output:

[edward-quinn]

The following document renders cleanly on main now:

---
title: "test"
format: html
execute:
  echo: false
---

```{r}
library(knitr)
library(DT)
d <- iris[1:20,]

kable

@tbl-kable comes here.

#| label: tbl-kable
#| tbl-cap: "kable"
kable(d)

DT::datatable

@tbl-datatable comes here.

#| label: tbl-datatable
#| tbl-cap: "datatable"
datatable(d)

Output:

<img alt="image" width="297" src="https://user-images.githubusercontent.com/285675/269111028-1ed92ac3-495b-48a0-84ee-43a3a2868e2d.png">

I am still getting the "WARNING: Unable to resolve crossref @tbl-datatable" error with this code using the latest version of R and RStudio. Does this code work for anyone else?

[cscheid]

I am still getting the "WARNING: Unable to resolve crossref @tbl-datatable" error with this code using the latest version of R and RStudio. Does this code work for anyone else?

Yes, it does work for me. You need a 1.4 prerelease version of Quarto:

[edward-quinn]

I was unaware of quarto prerelease versions. Works like a charm now. Thank you!