Ag-grid加载数据时如何隐藏所有行 避免空行显示问题

方案1：CSS强制隐藏占位空行（最便捷，无业务侵入） #

ag-grid 25.x版本加载过程中生成的临时空行有固定类名，直接通过自定义样式隐藏即可，不会影响正常数据渲染和自定义cellRenderer的逻辑：

/* 给你的ag-grid外层容器添加自定义类名custom-ag-grid */
.custom-ag-grid .ag-row-no-data,
.custom-ag-grid .ag-loading-row,
.custom-ag-grid .ag-row:empty {
  display: none !important;
}
/* 可选：隐藏空行容器的默认最小高度，避免出现空白间隙 */
.custom-ag-grid .ag-body-viewport:has(.ag-row-no-data) {
  min-height: 0 !important;
}

方案2：通过Grid配置和状态控制空行生成 #

调整数据加载逻辑和grid配置，从根源避免空行渲染：

1. 组件中定义加载状态变量，请求数据前标记为加载中，请求完成后标记为加载完成
2. 加载状态下将rowData设置为null而非空数组，同时开启空行占位屏蔽配置
   示例代码：

import { GridOptions } from 'ag-grid-community';

export class YourGridComponent {
  gridOptions: GridOptions = {
    // 原有配置保留，新增以下两项
    suppressNoRowsOverlay: true,
    rowBuffer: 0
  };
  rowData: any[] | null = null;
  loading = false;

  fetchGridData() {
    this.loading = true;
    this.rowData = null;
    this.yourDataService.getData().subscribe(res => {
      this.rowData = res;
      this.loading = false;
    })
  }
}

方案3：自定义cellRenderer兼容适配 #

如果上述方案仍不生效，可以在你的cellRendererFramework对应组件中增加加载状态判断，加载时直接返回空内容：

// 自定义cellRenderer组件
export class YourCellRendererComponent {
  displayContent = '';

  agInit(params: any) {
    // 通过context传递全局加载状态，无数据/加载中时返回空内容
    if (params.context.loading || !params.data) {
      this.displayContent = '';
      return;
    }
    // 原有默认内容逻辑保留
    this.displayContent = params.value ?? '默认展示内容';
  }
}

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