如何避免rpivotTable与HTML报告内其他内容重叠？

rpivotTable作为HTML交互组件，默认仅设置初始渲染高度，交互操作（新增/删除行列、调整筛选条件）触发的尺寸变化不会自动更新父容器高度，因此会和下方内容重叠，手动设置固定height/width参数无法适配动态尺寸变化。

注意：示例代码中rpivotTable的rows、columns参数需要传入字符串格式的字段名，否则可能出现非标准求值报错，修改后参数为rows = "mpg", columns = c("cyl", "hp")。

方案1：添加ResizeObserver监听器（推荐，适配所有动态变化场景） #

在rpivotTable的代码块中用htmltools嵌入JS监听脚本，自动同步容器高度，动态调整下方元素位置：

library(tidyverse)
library(rpivotTable)
library(htmltools)

# 渲染带高度监听的透视表
tagList(
  rpivotTable(mtcars, rows = "mpg", columns = c("cyl", "hp")),
  tags$script(HTML("
    const observer = new ResizeObserver(entries => {
      for (let entry of entries) {
        entry.target.parentElement.style.height = entry.contentRect.height + 'px';
      }
    });
    document.addEventListener('DOMContentLoaded', () => {
      const pivotEle = document.querySelector('.rpivotTable');
      if (pivotEle) observer.observe(pivotEle);
    });
  "))
)

# 下方图表正常编写即可，会自动适配透视表高度
ggplot(mtcars, aes(mpg, cyl)) +
  geom_bar(stat="identity")

方案2：添加自定义CSS快速修复 #

如果不需要极致的动态适配，可直接在Rmd中加入CSS样式，强制rpivotTable父容器高度自适应：
在Rmd任意位置加入以下CSS代码块：

.rpivotTable-container, .html-widget {
  height: auto !important;
}

该方案无需修改原有R代码，适配大部分常规使用场景。

两种方案都可以实现rpivotTable尺寸变化时，下方内容自动下移腾出空间，不会出现重叠问题。

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