Incorrect figure position when rendering a html file with Quarto

Question

Using Quarto Markdown in RStudio, I'm trying to position a figure (ggplot2 barplot) to the right hand side of a table (reactable). When I render the page (to html), the figure is displaying to the right of the code and not to the right of my table underneath the code. This is not the case in the Quarto example given here.

Here is a minimal example of my code

```{r, echo=TRUE, results='hold'}
#| fig-column: margin

library(reactable)
reactable(iris)

library(ggplot2)
ggplot(iris, aes(x=Sepal.Length, y=Species)) + 
        geom_bar(stat = "identity")

```

Any ideas as to why my figure is not displaying to the right of the table itself? I would like this to be the case because if I decide to collapse or open my code, I want both the figure and the table to move (up and down) with that event. I don't want this event to result in the table moving up and down and the figure staying to the right of the code.

Answer 1

It's happening because in this current quarto version (‘1.0.38’), interactive tables (e.g. reactable, DT) are not treated as Tables and are considered more like figures.

Quoting from this github issue

DT tables are part of interactive tables, and they are specific HTML widgets and not tables per-se (not Markdown tables, nor HTML tables)

See these related Github issues/discussion #782, #628, #1084.

But as an alternative, you can create similar representation with column: screen-inset-right and layout chunk options.

---

---
title: "margin figure"
format: html
---

## Quarto


```{r}
#| label: multiple_output
#| echo: true
#| column: screen-inset-right
#| fig-height: 8
#| layout: "[75, 25]"

library(reactable)
reactable(iris)

library(ggplot2)

ggplot(iris, aes(x=Sepal.Length, y=Species)) + 
        geom_bar(stat = "identity")

```

Which looks like after rendering,