用于反应表的单独过滤器和排序按钮

Question

我想为反应表中的每一列创建一个单独的按钮，用于排序和过滤，类似于下面给出的图片。

我可以使按钮工作，但每次我尝试单击按钮时，列都会被排序。

这里是CodeSandBox

• 如果我要删除 column.getSortByToggleProps()，则 onClick() 事件在按钮上不起作用。
• 即使单击 ASCENDING 按钮，我也无法进行排序 sortBy(id, false, false)，它正在抛出错误。

我想让它做什么。

• 当您单击过滤器图标时，不应对该列进行排序。
• 当您单击组件中的按钮时，它应该对列进行排序，而不是在标题标题上。
• 当您从过滤器中选择一个复选框时，组件应保持打开状态。

Answer 1

有一个表实例属性setSortBy()，可用于以编程方式设置排序。

您可以通过将对象数组传递给它来设置排序以组合多个排序：

setSortBy([{id: column.id, desc: false}])

https://react-table-v7.tanstack.com/docs/api/useSortBy#instance-properties:~:text=setSortBy