React Ant design Table-自定义搜索过滤器

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.