react-table小数类型列排序结果不正确，如何实现通用修复？

排序错误根因 #

react-table默认采用字符串字典序排序，若小数字段为字符串类型或未做数值识别，就会出现0.14排在0.8前面的异常结果。

通用解决方案 #

方案1：accessor字段直接转数值（优先推荐，最简单）

如果小数是从接口/数据源拿到的字符串格式，在定义列的accessor时直接转成数值类型，react-table默认排序逻辑会自动按数值规则排序，无需额外配置：

const columns = [
  // 其余列配置
  {
    Header: 'age',
    accessor: row => Number(row.age)
  }
]

方案2：列级别自定义sortType（灵活适配多类型列）

如果不想修改accessor返回值，可以单独给数值列配置排序规则，不影响其他列排序逻辑，天然支持多列排序：

const columns = [
  // 其余列配置
  {
    Header: 'age',
    accessor: 'age',
    sortType: (rowA, rowB) => {
      return Number(rowA.values.age) - Number(rowB.values.age)
    }
  }
]

方案3：全局重写orderByFn适配多列排序

如果有大量数值列不想逐个配置，可以将原有只支持单列的orderByFn修改为遍历所有排序规则的版本：

orderByFn: function defaultOrderByFn(arr, sortFns, directions) {
  return arr.sort((a, b) => {
    // 按优先级遍历所有排序规则
    for (let i = 0; i < sortFns.length; i++) {
      const cmpRes = sortFns[i](a, b)
      if (cmpRes !== 0) {
        return directions[i] ? -cmpRes : cmpRes
      }
    }
    return 0
  })
}

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