React Table服务器端过滤，从列中分离过滤器

Question

我试图实现服务器端过滤我的表使用React表。然而，我在网上读到的大多数文档和文章都是在列标题上实现过滤器的。

我的应用程序布局，然而，要求过滤器是一个独立的组件FilterComponent，位于表的外面:

return (
<>
<FilterComponent columns={columns} />
<TableContainer className={classes.container}>
...
</TableContainer>
</>
);

FilterComponent组件

它基本上是一个Autocomplete组件列表，允许用户选择列和过滤条件。用户可以使用Add和Remove按钮来获得更多或更少的过滤器。

return (
<div>
{inputList.map((x, i) => {
return (
<div className="box" key={i}>
<Autocomplete ... />    // pick a column
<Autocomplete ... />    // pick an operator ("=", ">", "<". etc.)
<Autocomplete ... />    // pick a filter criteria

<div className="btn-box">
{inputList.length !== 1 && (
<button className="mr10" onClick={() => handleRemoveClick(i)}>
Remove
</button>
)}
{inputList.length - 1 === i && (
<button onClick={handleAddClick}>Add</button>
)}
</div>
</div>
);
})}
</div>

两个问题我使用Django作为后端，并正确配置了过滤器，这样你就可以把一些查询参数传递给AJAX调用来获得想要的结果。

过滤器设置

在react-table的例子中，我们似乎需要定义"Filter"one_answers";filter"每列:

columns {
{
Header: 'Status',
accessor: 'status',
Filter: SelectColumnFilter,
filter: 'includes',
},
}

然而，我找不到字符串"includes"的基础。我猜这是react-table的内置过滤器用来查找精确匹配的东西。但在Django中，语言更像是"iexact"或"icontains"等。我能把Django的话传进去吗?

同样适用于"Filter"选择。如果我已经在Django上定义了过滤器，我还需要在客户端重新实现过滤器吗?

查询生成器在表外

给定我的应用程序上面的布局，我如何使过滤器工作，如果他们从列分离?

Answer 1

我不是很熟悉Django或服务器端过滤，但我有同样的问题，把我的过滤器表头之外。

这个讨论给了我我正在寻找的答案，使用ref将过滤器引用到表实例。这样你就可以使用输入值来过滤表组件。

https://github.com/tannerlinsley/react-table/discussions/2181

具体来说，fadi-george发布了这个codesandbox-example:

https://codesandbox.io/s/react-table-imperative-ref-forked-x8r4x?file=/src/App.js

希望这至少能帮助你解决部分问题😊