react-bootstrap-table-next中如何使用Column Filter？

Question

我有以下小部件代表 table 中数据的类别：

流程是当用户单击其中一个小部件时，table 应该仅显示该类别的数据。

到目前为止，我已经实现了以下内容：

 const columns = [
 { 
  ....
  dataField: "Category", 
  formatter: formatCategory,
  text: "Category",
  sort: true,
  filter: textFilter({
    getFilter: (filter) => {
      // nameFilter was assigned once the component has been mounted.
      categoryFilter = filter;
    }
  })
  ....
}

处理按钮上的单击事件并传递类别：

const handleWidgetClick = (category) => {
   categoryFilter = category;

   // When I am doing something like this I am getting Uncaught Error
   // categoryFilter is not a Function
   categoryFilter(category) 
};

我遵循了 here

的例子

我不确定what/where我做错了什么。请指导我完成它，谢谢

Answer 1

<BootstrapTable
  hover
  bordered={false}
  bootstrap4
  keyField={"apps.App"}
  **data={apps ? selectedCategory ?apps.filter((itm)=>{
  return itm.Category === selectedCategory
  }) :apps : no_Data}**
  columns={columns}
  filter={ filterFactory() }
  noDataIndication={intl.formatMessage({ id: "GENERAL.NO_DATA" })}
/>

react-bootstrap-table-next中如何使用Column Filter？

How to use Column Filter in react-bootstrap-table-next?

reactjs

react-bootstrap-table