使用AG Grid Server Side Row Model时如何显示「No Data Found」空数据提示

方法1：使用内置模板快速配置 #

Server Side Row Model下，可直接通过overlayNoRowsTemplate配置自定义无数据提示内容，当当前加载的数据集为空时会自动显示：

const gridOptions = {
  rowModelType: 'serverSide',
  overlayNoRowsTemplate: '<span style="padding: 12px; color: #666; font-size: 14px;">No Data Found</span>',
  // 其他Grid配置项
};

方法2：结合服务器返回数据手动控制 #

如果需要区分「加载中」和「无数据」状态，可在服务器返回数据后，通过Grid API手动控制overlay的显示/隐藏：

// 服务器请求完成后的回调函数示例
function handleServerResponse(params) {
  const fetchedData = params.response.data;
  // 将数据传递给AG Grid
  params.success({ rowData: fetchedData });

  // 根据返回数据量控制提示显示
  if (fetchedData.length === 0) {
    params.api.showNoRowsOverlay();
  } else {
    params.api.hideOverlay();
  }
}

注意：分页场景下，仅当第一页返回空数据时才显示无数据提示，避免后续空分页干扰。

方法3：自定义复杂无数据组件 #

如果需要带交互元素（比如刷新按钮）的提示，可自定义组件并通过overlayNoRowsComponent配置：

// 自定义无数据提示组件
const CustomNoDataOverlay = () => {
  return (
    <div style={{ padding: '30px', textAlign: 'center', color: '#999' }}>
      <div style={{ fontSize: '32px', marginBottom: '8px' }}>😔</div>
      <div>No Data Found</div>
      <button 
        style={{ marginTop: '16px', padding: '6px 12px', cursor: 'pointer' }}
        onClick={() => {/* 触发数据刷新逻辑 */}}
      >
        点击刷新
      </button>
    </div>
  );
};

// Grid配置
const gridOptions = {
  rowModelType: 'serverSide',
  overlayNoRowsComponent: CustomNoDataOverlay,
  // 其他Grid配置项
};

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