使用 ReactJS 对 Ant Design Table 中的 null 值进行排序

Question

我使用ReactJS中的antdesign表格来显示数值数据。列中存在空值，这会导致排序功能出现问题。问题是，我希望无论排序方向如何，空值始终显示在表的末尾，但不幸的是，我只能在一个方向上实现这一点。我做错了什么？

我尝试的自定义排序功能是：

const customSorter = (a, b,col) => {
    
    if (a[col] === null && b[col] === null) {
      return 0;
    } else if (a[col] === null) {
      return -1;
    } else if (b[col] === null) {
      return 1;
    }
  
    return parseFloat(a[col]) - parseFloat(b[col]);};

Answer 1

您需要修改条件，以便无论是按升序还是降序排序，在这两种情况下都将空值推到末尾。

const customSorter = (a, b, col, sortOrder) => {
    if (a[col] === null && b[col] === null) {
        return 0;
    } else if (a[col] === null) {
        return 1;  // Push `a` with null at the end
    } else if (b[col] === null) {
        return -1; // Push `b` with null at the end
    }

    const numA = parseFloat(a[col]);
    const numB = parseFloat(b[col]);
    return sortOrder === 'ascend' ? numA - numB : numB - numA;
};