为 Mui 数据表过滤器添加工具提示

Question

我想更改项目中 mui 数据表的过滤器图标工具提示。目前它显示为 'Filter Table'，我只想将其更改为 'Filter'： Filter Image

我尝试通过添加来做到这一点，但这对我不起作用：

const options = {{
  textLabels: {
    body: {
      toolTip: "Filter",
    },
    filter: {
      title: "FILTERS",
    },
  }
}

Answer 1

您可以使用 mui-datatables 的 components 道具来创建自定义 Tooltip

<MUIDataTable
   data={data}
   columns={columns}
   components={{
      Tooltip: CustomTooltip
   }}
/>

const CustomTooltip = ({ children, ...props }) => {
    return (
      <MuiTooltip
        {...props}
        title={props.title === "Filter Table" ? "Filter" : props.title}
      >
        {children}
      </MuiTooltip>
    );
};

演示：https://codesandbox.io/s/muidatatables-custom-toolbar-forked-z6ddl0

为 Mui 数据表过滤器添加工具提示

Add tooltip for Mui Datatables filter

material-ui

mui-datatable