React Table同时启用filterable与sortable属性后排序失效问题咨询

这不是React Table的已知Bug，问题出在你的列配置存在疏漏。

React Table不会为配置了自定义筛选组件的列隐式开启排序能力，所有需要排序的列都必须显式声明sortable: true属性才会生效，你当前的Country列只配置了filterable属性，未添加排序开关。

修复步骤 #

1. 修正列配置，给需要同时开启筛选和排序的列补加sortable: true，修正后的代码如下：

const columns = () => [
{
  Header: 'Name',
  accessor: 'name',
  sortable: true,
},
{
  Header: 'ID',
  accessor: 'id',
  width: 80,
  sortable: true,
},
{
  Header: 'Country',
  accessor: 'country',
  width: 100,
  filterable: true,
  sortable: true, // 新增该行即可同时启用筛选和排序
  Filter: ({ filter, onChange }) => (
    // DROPDOWN WITH OPTIONS ...
  ),
},
]

2. 若补加配置后排序仍未生效，按以下优先级排查：

• 检查自定义表头的渲染逻辑：如果你重写了表头组件，需要确认没有阻止点击事件冒泡、没有覆盖默认的排序触发逻辑
• 核对React Table版本：v7及后续版本排序属性名为enableSorting，同时需要确保useSortBy钩子已经正确注入到表格实例中
• 检查是否有全局排序配置覆盖了列级配置：如果表格实例层面设置了disableSorting为true，所有列的排序能力都会被关闭

内容的提问来源于stack exchange，提问作者Zenit