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

Question

我正在尝试在 React Ant 设计中自定义搜索过滤器 table，通常 Ant 设计允许为 example. But the requirement is to show permanent search boxes under the columns similar to the react table by Tanner 自定义搜索过滤器下拉菜单，而不是下拉菜单。

我试图在列的标题道具中传递 ReactNode，但它会产生奇怪的 onClick 副作用。有没有办法自定义 header?

Answer 1

为简单起见，您可以将第一行创建为：

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;

};

然后当您映射数组数据时，只需将返回的这个推入该数组的开头即可。

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

React Ant design Table- Customize the search filter

reactjs

antd

react-table-v6