React Ant design Table- Customize the search filter

Question

I am trying to customize the search filter in React Ant design table, typically ant design allows customizable dropdown for search filter, for example. But the requirement is to show permanent search boxes under the columns similar to the react table by Tanner, rather than a dropdown.

I tried to pass a ReactNode in title prop for columns, but it creates weird onClick side effects. Is there a way to customize the header?

Answer 1

Making it simple, you can create the first row as:

getFieldsForEachColumn = (columns) => {
const row = {};
columns.forEach((element, index) => {
  if (element.searchable) {
    const inputFieldCell = (
      <Input onChange={(e) => this.handleOnChange(e.target.value, element.title)}/>
    );
    row[Object.keys(data[0])[index + 1]] = inputFieldCell
  } else {
    row[Object.keys(data[0])[index + 1]] = null;
  }
});
return row;

};

And then when you are mapping the array data, just push this returned in the started of that array.