react-table 没有正确排序小数

Question

我正在尝试使用 react-table 对带有小数的列进行排序，但排序呈现不正确。

这是尝试从上到下对年龄列进行排序时呈现的顺序：

0.89        
0.14    
0.8

什么时候渲染：

0.89
0.8 
0.14

使用codesandbox的问题演示： https://codesandbox.io/s/new-bird-puhhr?file=/src/App.js

单击 age 列以重现该问题。

我通过重写 orderByFn 设法让它工作。但是这个 hack 只适用于对一列进行排序。

orderByFn: function defaultOrderByFn(arr, funcs, dirs) {
  if (dirs[0]) {
    return arr.sort((a, b) => b.original.age - a.original.age);
  } else {
    return arr.sort((a, b) => a.original.age - b.original.age);
  }

非常感谢任何解决此问题的帮助。

Answer 1

您可以在 react-table 中的每列应用自己的排序逻辑。

正如我在您的示例中看到的那样，在初始化列时使用 sortType 字段覆盖默认排序，您已接近解决问题。

在 age 列的 sortType 字段中应用此箭头函数，并且在升序和降序中排序应该都能正常工作，因为库会处理它。

sortType: (rowA, rowB) => {
          if (rowA.original.age > rowB.original.age) return -1;
          if (rowB.original.age > rowA.original.age) return 1;
        }

根据您的示例参见codesandbox。

react-table 没有正确排序小数

react-table not sorting decimal numbers correctly

reactjs

react-table