如何配置ag-grid使最后一页显示空行填充空白区域？

数据老陈

2026-5-14

嘿，这个问题我之前帮不少开发者捋顺过——ag-grid分页后最后一页留着大块空白确实挺影响观感的。下面给你两个实用的实现思路，都是纯前端就能搞定，完全不会碰真实业务数据：

方法1：动态添加占位空行（最直接的视觉填充）

核心思路是算出当前页应该显示的总行数（比如每页10行），对比最后一页的真实数据量，差值就是需要补的空行数量，然后给这些空行加特殊样式，让它们看起来和表格融为一体。

步骤：

先获取ag-grid的分页配置和当前页数据：用gridApi.paginationGetPageSize()拿每页行数，gridApi.getModel().getRowData()拿当前页真实数据
计算需要补充的空行数量：const emptyRowsNeeded = pageSize - (totalRowCount % pageSize); 注意如果总数据刚好是页容量的整数倍，就不需要补，所以要加个判断if (totalRowCount % pageSize === 0) emptyRowsNeeded = 0;
创建和真实数据结构匹配的空行对象（避免列渲染报错），可以给空行加个标记字段比如isEmpty: true方便后续识别
把空行拼到当前页数据末尾，传给ag-grid的rowData
给空行单独加CSS类，设置样式让它仅占位置，不干扰交互

示例代码（JS部分）：

// 假设你已经拿到gridApi实例
const pageSize = gridApi.paginationGetPageSize();
const totalRowCount = gridApi.getDisplayedRowCount();
const currentPageData = gridApi.getModel().getRowData();
const currentPageLength = currentPageData.length;

let emptyRowsNeeded = pageSize - (totalRowCount % pageSize);
if (totalRowCount % pageSize === 0) emptyRowsNeeded = 0;

// 创建和真实数据结构一致的空行
const emptyRows = Array.from({ length: emptyRowsNeeded }, (_, idx) => ({
  ...currentPageData[0], // 复制真实行的字段结构，避免列渲染出错
  id: `empty-row-${Date.now()}-${idx}`, // 唯一ID，避免rowKey冲突
  isEmpty: true
}));

// 合并真实数据和空行，更新表格
const newRowData = [...currentPageData, ...emptyRows];
gridApi.setRowData(newRowData);

CSS样式：

/* 给空行加样式，和真实行区分但不突兀 */
.ag-row.empty-row {
  background-color: #f9f9f9; /* 和表格背景保持一致 */
  pointer-events: none; /* 禁止点击，避免误操作 */
}

.ag-row.empty-row .ag-cell {
  color: transparent; /* 隐藏空行内容 */
  border-bottom: none; /* 可选：去掉空行底部边框，更自然 */
}

⚠️ 注意：要在分页切换时重新计算空行数量，比如监听paginationChanged事件，在回调里重新执行上面的逻辑。

方法2：底部占位元素填充（不修改rowData，更优雅）

如果你不想动真实的rowData（怕影响排序、过滤等功能），可以直接在表格底部加一个高度匹配空白区域的占位div，用CSS让它和表格样式统一。

步骤：

监听表格的ready和paginationChanged事件，每次分页切换时计算空白高度
计算当前页真实行占用的高度：currentPageLength * rowHeight（如果是动态行高，要拿真实行的高度计算）
算出剩余空白高度：pageSize * rowHeight - currentPageLength * rowHeight
创建一个占位div，设置对应高度，添加到表格容器底部

示例代码：

// 初始化时绑定事件
gridApi.addEventListener('ready', fillEmptySpace);
gridApi.addEventListener('paginationChanged', fillEmptySpace);

function fillEmptySpace() {
  const gridPanel = gridApi.getGridPanelElement();
  const rowHeight = gridApi.getRowHeight(); // 固定行高直接用这个，动态行高需要取真实行高度
  const currentPageLength = gridApi.getModel().getRowData().length;
  const pageSize = gridApi.paginationGetPageSize();
  
  const totalNeededHeight = pageSize * rowHeight;
  const currentUsedHeight = currentPageLength * rowHeight;
  const emptyHeight = totalNeededHeight - currentUsedHeight;
  
  // 先移除之前的占位元素，避免重复添加
  const existingPlaceholder = gridPanel.querySelector('.empty-space-placeholder');
  if (existingPlaceholder) existingPlaceholder.remove();
  
  if (emptyHeight <= 0) return;
  
  // 创建占位元素
  const placeholder = document.createElement('div');
  placeholder.className = 'empty-space-placeholder';
  placeholder.style.height = `${emptyHeight}px`;
  placeholder.style.width = '100%';
  placeholder.style.backgroundColor = '#f9f9f9';
  placeholder.style.borderTop = '1px solid #e0e0e0'; // 和表格行分隔线一致
  
  // 添加到表格容器底部
  gridPanel.appendChild(placeholder);
}

这个方法的优势是完全不干扰数据层，空元素只是视觉填充，不会影响表格的任何数据相关操作。

额外提示

如果用的是动态行高，计算行高时要改用gridApi.getDisplayedRowAtIndex(0).getRowElement().clientHeight获取真实行的高度，要是行高不一致，可以取所有行的高度平均值或者最大值来计算。
样式调整时尽量和表格原有风格统一，比如背景色、边框粗细，这样填充的空白才会看起来自然，不会显得突兀。

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