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

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!

Answer 1

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.