AG-Grid-React：筛选后无数据时如何显示‘No rows to show’覆盖层提示

方法一：使用内置自定义无数据模板 #

AG-Grid原生提供overlayNoRowsTemplate属性，可直接传入自定义HTML字符串，当表格无数据（包括筛选后无匹配结果）时，该模板会自动渲染显示。

示例代码：

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const MyGrid = () => {
  const columnDefs = [
    { field: 'make' },
    { field: 'model' },
    { field: 'year' }
  ];

  const rowData = [/* 你的业务数据 */];

  // 自定义无数据覆盖层模板
  const noRowsTemplate = `
    <div style="display:flex; align-items:center; justify-content:center; height:100%;">
      <span style="font-size:16px; color:#666;">No rows to show</span>
    </div>
  `;

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        overlayNoRowsTemplate={noRowsTemplate}
        // 全局开启筛选功能，也可在列定义中单独设置filter: true
        enableFilter={true}
      />
    </div>
  );
};

export default MyGrid;

方法二：用React组件作为覆盖层（支持复杂交互） #

如果需要添加交互元素（比如重置筛选按钮），可以通过frameworkComponents注册自定义React组件，再指定为无数据覆盖层。

示例代码：

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

// 自定义无数据覆盖层组件
const NoRowsOverlay = () => {
  // 需通过gridApi操作表格，这里可通过props或外部状态获取api实例
  const resetFilter = () => {
    window.gridApi?.setFilterModel(null);
    window.gridApi?.onFilterChanged();
  };

  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100%',
      flexDirection: 'column',
      gap: '12px'
    }}>
      <span style={{ fontSize: '16px', color: '#666' }}>No rows to show</span>
      <button style={{ padding: '6px 12px', cursor: 'pointer' }} onClick={resetFilter}>
        重置筛选
      </button>
    </div>
  );
};

const MyGrid = () => {
  const columnDefs = [
    { field: 'make' },
    { field: 'model' },
    { field: 'year' }
  ];

  const rowData = [/* 你的业务数据 */];

  const onGridReady = (params) => {
    // 保存gridApi供自定义组件调用
    window.gridApi = params.api;
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        // 注册自定义组件
        frameworkComponents={{ noRowsOverlay: NoRowsOverlay }}
        // 指定无数据覆盖层使用自定义组件
        overlayNoRowsComponent="noRowsOverlay"
        enableFilter={true}
        onGridReady={onGridReady}
      />
    </div>
  );
};

export default MyGrid;

关键注意事项 #

• 确保已开启筛选功能：通过全局enableFilter={true}或列定义中的filter: true配置。
• AG-Grid会自动检测筛选后的结果集状态，无需手动监听筛选事件控制覆盖层显隐。
• 可根据项目主题自定义模板/组件的样式，比如调整字体、颜色或布局。

内容的提问来源于stack exchange，提问作者KARTHIKEYAN.A