0

UPDATE: Edited code to depict tabs already exist

I have a Quarto qmd file with an R plotly figure rendered as html. I want to provide an option (button/link) for the user to change the view from plot to the data table, and vice versa. What is the best way to go about this?

The code below shows the plot and table side by side. I would like to show either the plot or the table with the option to switch view to the other.

---
title: "MTCars"
format: 
  html:
    code-fold: true
---

::: panel-tabset 

## Tab 1
```{r, echo=FALSE, out.height="30%"}
#| warning: false
#| layout-ncol: 2

library(DT)
library(plotly)
  plot_ly( mtcars,
    x = ~disp,
    y = ~wt,
    type = 'scatter', 
    mode = 'lines', 
    height = 400,
    width = 700
  ) 

datatable(mtcars)
  
```

## Tab 2

:::
apprunner2186
  • 217
  • 1
  • 6

1 Answers1

1

You could use a (nested) tabset panel? I.e.

---
title: "MTCars"
format: html
---

::: {.panel-tabset}

## Tab 1

::: {.panel-tabset}

## Plot

```{r, error=FALSE, message=FALSE, echo=FALSE}
library(plotly)
  plot_ly(mtcars,
    x = ~disp,
    y = ~wt,
    type = 'scatter', 
    mode = 'lines', 
    height = 400,
    width = 700
  ) 
```

## Table

```{r, echo=FALSE}
library(DT)
datatable(mtcars)
```

:::

## Tab 2

:::

Output:

enter image description here

See: https://quarto.org/docs/interactive/layout.html#tabset-panel

**Update: Nested version according to comment.

harre
  • 7,081
  • 2
  • 16
  • 28
  • Unfortunately that wont work. I already have tabs separating the data by domain. I'm looking for something within the tab to switch views. Unless nested panel-tabsets is an option? – apprunner2186 Sep 02 '22 at 14:15
  • You can do **nested panel-tabsets** if that layout could work and I think it might be the best native option. I bet the button can be scripted. – harre Sep 02 '22 at 14:22