在Shiny.fluent的DetailsList中实现R Shiny应用横向滚动

问题描述 #

在R语言Shiny应用中使用shiny.fluent的DetailsList组件展示多列表格时，无法显示横向滚动条，仅能看到少量列。示例代码如下：

library(shiny)
library(shiny.fluent)
library(glue)

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)

实现横向滚动的方法 #

方案1：CSS容器控制（最简方案） #

问题核心是外层容器宽度被限制，导致表格无法横向展开。只需修改包裹DetailsList的div样式，明确开启横向滚动，并确保容器能适配表格宽度：

# 修改renderUI中的内容部分
makeCard("Top results", 
         div(style="max-height: 500px; overflow-y: auto; overflow-x: auto; width: 100%; min-width: fit-content;", 
             DetailsList(items = cbind(cbind(fluentSalesDeals,fluentSalesDeals), fluentSalesDeals)))
)

• overflow-x: auto：当表格宽度超过容器时自动显示横向滚动条
• min-width: fit-content：确保容器宽度至少能容纳表格内容的最小宽度
• overflow-y: auto：保留纵向滚动功能

方案2：直接给DetailsList设置样式 #

无需外层div，直接通过DetailsList的styles参数给组件根元素添加横向滚动：

DetailsList(
  items = cbind(cbind(fluentSalesDeals,fluentSalesDeals), fluentSalesDeals),
  styles = list(root = list(maxHeight = "500px", overflowX = "auto", overflowY = "auto"))
)

方案3：JS辅助（适配复杂场景） #

如果CSS方案无效（比如组件内部有强制宽度限制），可以用JS动态调整容器宽度：

在ui的fluentPage中添加脚本：

ui <- fluentPage(
  tags$style(".card { padding: 28px; margin-bottom: 28px; }"),
  tags$script(HTML("
    $(document).on('shiny:value', function(event) {
      if (event.target.id === 'analysis') {
        setTimeout(function() {
          const listEl = document.querySelector('.ms-DetailsList');
          if (listEl) {
            const parent = listEl.parentElement;
            parent.style.overflowX = 'auto';
            parent.style.minWidth = listEl.scrollWidth + 'px';
          }
        }, 100);
      }
    });
  ")),
  uiOutput("analysis")
)

更合适的Fluent组件选型 #

• DetailsList进阶优化：该组件本身支持固定列功能，通过fixedColumns参数可以锁定左侧/右侧列，提升多列表格的可读性：

  DetailsList(
    items = cbind(cbind(fluentSalesDeals,fluentSalesDeals), fluentSalesDeals),
    fixedColumns = list(left = 2), # 固定左侧2列
    styles = list(root = list(maxHeight = "500px", overflowX = "auto"))
  )
  

• 无需替换组件：DetailsList本身就是shiny.fluent中针对大量数据/列的表格类组件，优化样式和参数即可满足需求，无需更换其他组件。

内容的提问来源于stack exchange，提问作者mazu