multiple reactable in div in flexdashboard each with own horizontal scroll?

[dillon-nagle]

Hi - massive fan of reactable, and I use it a lot with flexdashboard.

I have a use case where I have multiple reactable tables with more columns than the width of the page, but I want to retain hard coded column width's. When I put more than one reactable into a div() each reactable table has it's own x-scroll bar when I want to override to have the entire container or div scroll together.

I am a total css hack, so have struggled to identify in the inspector if this is coming from reactable or from flexdashboards own bootstrap implementation. I have a reprex below of my problem:

---
title: "Test"
output:
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)

Test

Test Container

```{r test, echo = FALSE, fig.height=8} library(reactable) #create data frame with 10 random numbers between 1 and 20 df <- as.data.frame(matrix(runif(n=65, min=10000, max=20000), nrow=5)) #define column names names(df) <- c('A', 'B', 'C', 'D', 'E', 'F','G', 'H', 'I', 'J', 'K','L','M') df1 <- df df2 <- df div( class = "my-container", reactable::reactable( df, defaultColDef = colDef( align = "center", width = 142, html = TRUE )), reactable::reactable( df1, defaultColDef = colDef( align = "center", width = 142, html = TRUE )), reactable::reactable( df2, defaultColDef = colDef( align = "center", width = 142, html = TRUE )) ) ```

Appreciate the help and apologies if this is the wrong forum for this!

[glin]

Hi, if I understood correctly, it's probably reactable's thing, nothing specific about flexdashboard. Tables are responsive by default so wide tables will get limited to the container/page width, with a scroll bar, to prevent it from breaking layouts and causing the entire page to scroll.

Sometimes you don't want this though, so this may be one of those cases where the outer container, flexdashboard panel in this case, is already handling page overflow with scrollbars.

One way to do this is to disable fullWidth, e.g. in this example. There might be different/better ways with manual styling but I can't think of it off the top of my head.. but anyway, this might work well enough:

div(
  class = "my-container",
  reactable::reactable(
    df,   
    defaultColDef = colDef(
      align = "center",
      width = 142,
      html = TRUE
    ),
    fullWidth = FALSE
  ),
  reactable::reactable(
    df1,
    defaultColDef = colDef(
      align = "center",
      width = 142,
      html = TRUE
    ),
    fullWidth = FALSE
  ),
  reactable::reactable(
    df2,
    defaultColDef = colDef(
      align = "center",
      width = 142,
      html = TRUE
    ),
    fullWidth = FALSE
  )
)

[dillon-nagle]

@glin - this is actually perfect! I had seen the fullWidth but didn't realise it would still work in combination with a hardcoded column width argument. Appreciate the response, and reactable's flexibility overall!