Crosstalk makes scroll bar not visible in flexdashboard when combined with reactable

Question

I use the excelent crosstalk r package to make filters for my reactable htmlwidget. I show the reactable in flexdashboard. When using the groupBy feature of reactable, I noticed that there was no scroll bar when I make the table larger than the area where it has been put in.

Here is an example Tha helps making the issue clear:

---
title: "Focal Chart (Top)"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
---

Row {data-height=500}
-------------------------------------

### Chart 1

```{r}
library(crosstalk)
library(reactable)

```

Row {data-height=500}
-------------------------------------

### With crosstalk filtering

```{r}
cars <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "Price")]
data <- SharedData$new(cars)

bscols(
  widths = c(3, 9),
  list(
    filter_checkbox("type", "Type", data, ~Type),
    filter_slider("price", "Price", data, ~Price, width = "100%"),
    filter_select("mfr", "Manufacturer", data, ~Manufacturer)
  ),
  reactable(data,groupBy = "Manufacturer")
)
```   

### Without crosstalk

```{r}
 reactable(data,groupBy = "Manufacturer")
```

Two tables are shown. When decollapsing e.g. Chevrolet in both tables, in the right one (the one without crosstalk filtering) a scroll bar will appear. In the left however, no scroll bar appears.

How can I make my crosstalk/reactable scrollable? Is this issue solvable? Many thanks in advance!

I am getting `Error in reactable(data, groupBy = "Manufacturer") : \`data\` must be a data frame or matrix` — Daniel_j_iii, Jun 13 '20 at 17:48
@DanielJachetta that seems strange, because I copied the code from the ractable website. In my system all seems to work well. — rdatasculptor, Jun 13 '20 at 18:13

superboreen · Answer 1 · 2020-06-15T14:53:41.353

I don't think this is a complete answer but it might get you closer. I exaggerated the minWidth so you could see the effect.

sticky_style <- list(position = "sticky", left = 0, background = "#fff", zIndex = 1,
                     borderRight = "1px solid #eee")


crosstalk::bscols(
  widths = c(3, 9),
  list(
    filter_checkbox("type", "Type", data, ~Type),
    filter_slider("price", "Price", data, ~Price, width = "100%"),
    filter_select("mfr", "Manufacturer", data, ~Manufacturer)
  ),
  reactable(data,columns = list(
    Manufacturer = colDef(
      style = sticky_style,
      headerStyle = sticky_style
    )
  ),  defaultColDef = colDef(minWidth = 300))
)

By the way, @DanielJachetta, I had the same problem so updated both crosstalk and reactable packages and the problem went away. Good luck.

maybe you have ideas for this https://stackoverflow.com/questions/62393123/how-to-render-column-total-with-javascript-when-using-grouped-rows-in-reactabl issue as well? — rdatasculptor, Jun 15 '20 at 16:56

Crosstalk makes scroll bar not visible in flexdashboard when combined with reactable

1 Answers1