1

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?

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Aditya
  • 13
  • 1
  • 4
  • You can add a separate row for the search bards which will be there by default in the table data array. And add onChange, onSubmit events on them. – MubashirEbad Sep 28 '20 at 07:51
  • Thanks, How can we pass the input component in row data? I did something like this: const transformData = (columns, data = []) => { const col = {}; columns.forEach((element) => { if (element.searchable) col[element.title] = ; }); return [col, ...data]; }; – Aditya Sep 28 '20 at 09:40
  • Check my answer below – MubashirEbad Sep 28 '20 at 09:54

1 Answers1

0

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.

MubashirEbad
  • 289
  • 1
  • 7