Change placeholder text for filter search in Ant Table

Question

Is there any way I can change the default placeholder text in Ant Table? I created a working example using CodeSandbox. Could anyone please advise?

I checked the Ant design documentation if there is any prop to customize it but didn't find any apart from the whole customized filter dropdown which I didn't want to create it.

Below is column configuration from my code.

const columns = [
  {
    title: "Address",
    dataIndex: "address",
    filters: [
      {
        text: "London",
        value: "London",
      },
      {
        text: "New York",
        value: "New York",
      },
    ],
    onFilter: (value, record) => record.address.startsWith(value),
    filterSearch: true,
    width: "40%",
  },
];

...

const App = () => (
  <Table columns={columns} dataSource={data} onChange={onChange} />
);

Image for reference.

Answer 1

The <Table> component can be passed the locale prop with type

export interface TableLocale {
  filterTitle?: string;
  filterConfirm?: React.ReactNode;
  filterReset?: React.ReactNode;
  filterEmptyText?: React.ReactNode;
  filterCheckall?: React.ReactNode;
  filterSearchPlaceholder?: string;
  emptyText?: React.ReactNode | (() => React.ReactNode);
  selectAll?: React.ReactNode;
  selectNone?: React.ReactNode;
  selectInvert?: React.ReactNode;
  selectionAll?: React.ReactNode;
  sortTitle?: string;
  expand?: string;
  collapse?: string;
  triggerDesc?: string;
  triggerAsc?: string;
  cancelSort?: string;
}

The relevant part is filterSearchPlaceholder.

<Table
  columns={columns}
  dataSource={data}
  onChange={onChange}
  locale={{
    filterSearchPlaceholder: 'put anything here'
  }}
/>