如何修改mui-datatables默认"Sorry,no matching records found"提示信息

MUIDataTable 所有内置的展示文本都可以通过组件的options配置项自定义，空数据提示的修改步骤如下：

• 找到你调用MUIDataTable时传入的options配置对象
• 在options中新增text子配置对象，在text对象内添加noMatch属性，属性值就是你要自定义的空状态提示文案

完整代码示例 #

import MUIDataTable from "mui-datatables";

const CustomEmptyTable = () => {
  // 表格列配置
  const columns = ["产品名称", "价格", "库存", "分类"];
  // 空数据源
  const data = [];

  const options = {
    pagination: true,
    selectableRows: "none",
    // 文本自定义配置
    text: {
      // 此处可替换为任意你需要的提示文案
      noMatch: "暂无相关产品数据，请添加后重试",
      // 其他内置文本也可在此处统一修改，例：
      // searchPlaceholder: "搜索产品...",
      // download: "导出数据"
    }
  };

  return <MUIDataTable
    title="产品列表"
    data={data}
    columns={columns}
    options={options}
  />
};

export default CustomEmptyTable;

动态修改提示 #

如果需要根据业务场景动态切换空状态提示，只需将noMatch的属性值绑定为React的state变量，state更新时提示文案会自动同步渲染。

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