如何解决AG-Grid显示空行线条的问题？

如图所示，AG-Grid显示出空行线条，该问题在多个表格中出现，不清楚原因。

我通过以下代码加载数据：

const loadPaginated = async ({ success, request: { startRow = 0, endRow = 100 } }) => {
  const { content, totalElements } = await query({ startRow, endRow }); // content: Array(23), totalElements: 23
  success({ rowData: content, rowCount: totalElements });
};

<AgGridReact
  serverSideDatasource={{ getRows: onLoadPaginated }}
  serverSideStoreType="partial"
  rowModelType="serverSide"
  pagination
  paginationAutoPageSize
  columnDefs={columnDefs}
/>

环境信息 #

• ag-grid-community 26.2.1
• ag-grid-enterprise 26.2.1
• ag-grid-react 26.2.0
• 已获取AG-Grid授权

我尝试过清除数据、刷新视图、改用rowData替代serverSideDatasource，但问题仍未解决，希望恢复正常的行显示。

可能的解决方向 #

1. 校验数据总量与分页参数
   确认后端返回的totalElements是否完全匹配实际数据总量，服务端分页模式下rowCount会决定表格渲染的总行数框架，数值偏差可能导致空行。同时检查startRow和endRow的计算逻辑，确保分页区间内的数据无缺失。

2. 排查列定义配置
   检查columnDefs是否存在错误：比如列的field属性对应的数据字段不存在、cellRenderer有异常逻辑等。可以临时简化列定义，只保留基础字段，逐步排查出引发问题的列配置。

3. 统一AG-Grid版本
   当前ag-grid-react版本（26.2.0）与核心库版本（26.2.1）不一致，版本差异可能触发渲染bug。建议将ag-grid-react升级到26.2.1，保持所有AG-Grid相关包版本统一后再测试。

4. 检查样式冲突
   空行线条可能是自定义样式或全局样式覆盖了AG-Grid默认行样式。检查项目中针对.ag-row、.ag-cell等类的自定义CSS规则，尤其是涉及display、height、border的设置，临时移除后观察是否恢复正常。

5. 调整服务端分页配置
   尝试修改serverSideStoreType为full，或暂时关闭paginationAutoPageSize，手动设置paginationPageSize为固定值（如10），观察空行是否消失。同时确保getRows方法中success回调的参数格式完全符合AG-Grid要求，无遗漏或错误字段。

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