如何在react-bootstrap-table-next中使用列过滤器？

Question

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

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

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

 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

中的示例

我不确定自己在哪里/什么地方做错了。 请指导我 谢谢

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" })}
/>