可同时过滤和排序 React Table答案

【问题标题】：Filterable and sortable at the same time React Table可同时过滤和排序 React Table
【发布时间】：2021-10-22 10:53:11
【问题描述】：

希望您能帮助我解决我遇到的问题。我在我的网站上使用 React Table。我想同时使用可过滤和可排序的属性。我注意到当我使用可过滤时，可排序不再起作用。可能是 React Table 的错误？你知道我该如何解决这个问题吗？

const columns = () => [
{
  Header: 'Name',
  accessor: 'name',
  sortable: true,
},
{
  Header: 'ID',
  accessor: 'id',
  width: 80,
  sortable: true,
},
{
  Header: 'Country',
  accessor: 'country',
  width: 100,
  filterable: true,
  Filter: ({ filter, onChange }) => (
    // DROPDOWN WITH OPTIONS ...
  ),
},

]

【问题讨论】：

提供处理创建表和呈现的代码的其他部分。这段代码不够重现

标签： javascript reactjs react-table

【解决方案1】：

您绝对可以使用 react-table 钩子同时使表格可过滤和可排序。我创建了一个example 来说明它：

您无需将 sortable 或 filterable 道具传递给您的列数组。如果您在表格上实施了过滤并想要添加排序，您只需按照以下步骤操作：

导入useSortBy钩子
在useTable hook 之后调用它 useFilters hook : useTable(..., useFilters, useSortBy)
向您的 th 元素添加一些 UI，该 UI 将向用户显示排序顺序：

<span>
{column.isSorted ? 
  column.isSortedDesc
  ? " ?"
  : " ?"
  : ""}
</span>

【讨论】：

【解决方案2】：

我忘了提到我使用的是 react-table v6。正如你们中的一些人所说，绝对可以同时使用可过滤和可排序的。不幸的是，这似乎需要使用不同的行来完成。例如，如果您想通过下拉列表进行过滤，则位于列标签下方。

经过大量调试，我注意到我的问题来自 CSS。可过滤行位于列标签的顶部，因此禁用了可排序功能。不确定您是否见过如何解决此问题的示例。替换选择标签的列标签。如果是这样.. 如果您分享它，我将非常感激。非常感谢您的回答

【讨论】：

【解决方案3】：

这是一项修改，展示了它如何为您工作（因为您的整个解决方案并未共享）。见：https://github.com/vaclav18/react-table/blob/master/examples/filtering/src/App.js

现场示例在这里： https://react-table.tanstack.com/docs/examples/filtering

实时示例仅用于过滤 - 因此更改将位于： 3号线第 277 行第 347 行 sortable: true 在这里不是必需的

请参阅 /docs/src/pages/docs/api/useSortBy.md 了解更多信息。

【讨论】：