如何调整flexdashboard中DT数据表格的显示高度

核心原因 #

flexdashboard行布局默认会自动分配各内容块高度，你未将上方plotly图表纳入明确的Row块定义，导致图表占用了大部分页面高度，同时你设置的100pc、10000等夸张高度值会触发flex弹性布局的收缩规则，反而无法生效。

修改后的完整代码 #

---
title: "Plots and tables"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
---

{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)
library(dplyr)
library(tidyverse)
library(data.table)
library(plotly)
library(htmlwidgets)
library(DT)

Page 1
================================

Row
--------------------------------------------------------

### 可视化图表 {data-height=700}
{r fig.width=14}
# 注意提前定义好绘图对象p1
plotlyp1 <- ggplotly(p1)
plotlyp1

Row
--------------------------------------------------------

### 数据表格 {data-height=1000}
{r}
DT::datatable(one.data_bp,
  rownames = FALSE, 
  fillContainer = TRUE,
  filter = 'top', 
  options = list(
    pageLength = 25, 
    lengthMenu = c(5, 10, 15, 20, 25),
    scrollY = "100%",
    autoHeight = FALSE
  )
)

关键修改点 #

• 将plotly图表和DT表格分别放入两个独立的Row块，明确划分布局结构，删除原有页面、行上的自定义style和无效的超大高度值
• 给两个内容块分别设置合理的data-height属性，数值可根据你的显示需求自行调整
• DT配置中新增fillContainer = TRUE参数，让表格自动适配父容器的高度
• DT的options中新增scrollY = "100%"和autoHeight = FALSE，关闭DT的自动高度计算，适配父容器高度

修改后25行数据可以完整显示在页面中，不需要额外滚动，也无需使用标签页临时方案。

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