时间戳

首页 > 解决方案 > 可同时过滤和排序 React Table

javascript - 可同时过滤和排序 React Table

问题描述

希望你能帮助我解决我遇到的问题。我在我的网站上使用 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 ...
  ),
},

]

标签： javascriptreactjsreact-table

解决方案

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

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

推荐阅读