Interactively select which columns are displayed

Question

I am using reactable to generate a table in a quarto document. There are a bit too many columns. So I am thinking of displaying a few by default and then allow the user to change that if needed. I am looking for ideas on how to allow the user to have control over which columns are displayed. I am not sure if there is an option in reactable to do this. Alternative ideas and solutions are welcome.

Thoughts:

• observable?
• Custom JS (This is a nice implementation.)
• Reformat additional columns and hide behind an accordion?

library(reactable)
reactable(iris)

Answer 1

Not a complete answer, but it seems to be doable using Observable. Glin shows in this blogpost how to combine Observable with reactable in quarto for filtering rows. For selecting columns something along this lines might work (I am not an ojs user, i.e. I am not really sure how does column selection work here):

---
format: html
execute: 
  echo: false
---

## Using Observable Inputs to select variable sin reactable

```{ojs}
//| panel: input

viewof species = Inputs.checkbox(
  ["Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width", "Species"], 
  { value: ["Species"], label: "Variables:"}
)
```

```{ojs}
//| include: false
data = FileAttachment("iris.csv").csv({ typed: true })

filtered = data[species]

// Update table data when filtered data changes
Reactable.setData('tbl', filtered)
```

```{r}
library(reactable)

data <- read.csv("iris.csv")

reactable(
  data,
  wrap = FALSE,
  resizable = TRUE,
  minRows = 10,
  elementId = "tbl"
)
```