Horizontal scrolling in DetailsList

[zuffereymarie]

First of all, thanks a lot to the developpers for the super nice package ;-)

My problem is the following : I would like to display a table with a lot of columns using DetailsList. I am struggling : how can I add an horizontal scroll bar ?

Here the code for a minimal example (package tutorial adapted). At this stage, only a small subset of the columns are visible. How can I allow horizontal scrolling ?

I am quite new to shiny.fluent, maybe another Fluent component would be more appropriate ?

Thanks in advance for any help or suggestion

library(shiny)
library(shiny.fluent)
makeCard <- function(title, content, size = 12, style = "") {
  div(
    class = glue("card ms-depth-8 ms-sm{size} ms-xl{size}"),
    style = style,
    Stack(
      tokens = list(childrenGap = 5),
      Text(variant = "large", title, block = TRUE),
      content
    )
  )
}
ui <- fluentPage(
  tags$style(".card { padding: 28px; margin-bottom: 28px; }"),
  uiOutput("analysis")
)
server <- function(input, output, session) {
  output$analysis <- renderUI({
    Stack(
      tokens = list(childrenGap = 10), horizontal = TRUE,
      makeCard("Top results", div(style="max-height: 500px; overflow: auto", 
      DetailsList(items = cbind(cbind(fluentSalesDeals,fluentSalesDeals), fluentSalesDeals))))
    )
  })
}
shinyApp(ui, server)

[jakubsob]

Hi @zuffereymarie,

we can obtain this behavior by using constrainMode and layoutMode props with setting max-width on parent div:

library(shiny)
library(shiny.fluent)
makeCard <- function(title, content, size = 12, style = "") {
  div(
    class = glue("card ms-depth-8 ms-sm{size} ms-xl{size}"),
    style = style,
    Stack(
      tokens = list(childrenGap = 5),
      Text(variant = "large", title, block = TRUE),
      content
    )
  )
}
ui <- fluentPage(
  tags$style(".card { padding: 28px; margin-bottom: 28px; }"),
  uiOutput("analysis")
)
server <- function(input, output, session) {
  output$analysis <- renderUI({
    Stack(
      tokens = list(childrenGap = 10), horizontal = TRUE,
      makeCard(
        "Top results", 
        div(
          style = "
            max-height: 500px;
            max-width: 500px;
            overflow: auto;
          ",
          DetailsList(
            constrainMode = 0,
            layoutMode = 0,
            items = cbind(cbind(fluentSalesDeals,fluentSalesDeals), fluentSalesDeals),
          )
        )
      )
    )
  })
}
shinyApp(ui, server)