如何修改Ag-grid中的“No data to display”提示消息？

当然可以修改，下面是几种常用的实现方式：

1. 直接通过gridOptions配置覆盖（最简方案） #

在配置Ag-grid的gridOptions时，添加localeText属性，覆盖默认的noRowsToShow字段即可：

const gridOptions = {
  // 其他配置...
  localeText: {
    noRowsToShow: "暂无数据，请稍后重试" // 替换成你的自定义提示内容
  }
};

如果是React/Vue等框架集成，直接在组件的gridOptions配置中加入该属性即可。

2. 通过本地化文件配置（多语言场景） #

如果项目需要支持多语言，可以借助Ag-grid的本地化机制，修改对应语言包中的字段：

比如针对中文语言包，导入后修改noRowsToShow的值：

import { Grid } from 'ag-grid-community';
import { localeText as zhLocale } from 'ag-grid-community/dist/locale/zh';

// 修改中文本地化文本
zhLocale.noRowsToShow = "暂无数据";

// 注册本地化配置
Grid.setLocaleText(zhLocale);

3. 自定义空数据覆盖组件（高度自定义场景） #

如果需要更复杂的空数据提示（比如添加图标、按钮、自定义样式），可以使用noRowsOverlayComponent自定义组件：

以React为例：

// 自定义空数据组件
const CustomNoRowsComponent = () => {
  return (
    <div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
      <p>😔 没有找到匹配的数据</p>
      <button style={{ marginTop: '10px', padding: '6px 12px', border: 'none', borderRadius: '4px', background: '#165DFF', color: '#fff' }}>点击刷新</button>
    </div>
  );
};

// 在gridOptions中配置自定义组件
const gridOptions = {
  // 其他配置...
  noRowsOverlayComponent: CustomNoRowsComponent
};

这种方式可以完全自定义空数据区域的内容和样式。

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