Add tooltip for Mui Datatables filter

Question

I want to change the filter icon tooltip for a mui datatable in my project. Currently it is coming up as 'Filter Table' and I want to change this to 'Filter' only: Filter Image

I tried doing this by adding, but this didnt work for me:

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

Answer 1

You can use mui-datatables's components prop to create custom 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>
    );
};

Demo: https://codesandbox.io/s/muidatatables-custom-toolbar-forked-z6ddl0