7

useSortBy sortType 属性的文档说：

sortType: String | Function(rowA: <Row>, rowB: <Row>, columnId: String, desc: Bool)

    Used to compare 2 rows of data and order them correctly.
    If a function is passed, it must be memoized. The sortType function should return -1 if rowA is larger, and 1 if rowB is larger. react-table will take care of the rest.
    String options: basic, datetime, alphanumeric. Defaults to alphanumeric.
    The resolved function from the this string/function will be used to sort the this column's data.
        If a string is passed, the function with that name located on either the custom sortTypes option or the built-in sorting types object will be used.
        If a function is passed, it will be used.
    For more information on sort types, see Sorting

但没有完全解释如何使用它。

那么如何提供一个 sortType 函数呢？

4

3 回答 3

16

sortType 函数的参数是：(rowA, rowB, columnId, desc)

columnId标识行被排序的列，因此允许获取单元格值。

desc标识排序的方向。即使desc提供了， sort 函数也不应该反转返回值。反应表自动执行此操作。

例如：

sortType: React.useMemo((rowA, rowB, id, desc) => {
       if (rowA.values[id] > rowB.values[id]) return 1; 
       if (rowB.values[id] > rowA.values[id]) return -1;
        return 0;
})

使用 sortType 的示例：

const columns = [{       
        Header: ...
        accessor: ...
        sortType: /*sortType func goes here... */        
}, ...]

function MyTable(columns, data)
{
 const { /*...*/ } = useTable({columns,data})
}
于 2020-09-16T20:40:17.900 回答
6

根据您的文档引用， sortType 是一个Column option。

Column传递给columns选项的任何对象都支持以下选项useTable()

例如，修改快速入门的定义列，如下所示：

const columns = React.useMemo(
  () => [
    {
      Header: 'Column 1',
      accessor: 'col1', // accessor is the "key" in the data
    },
    {
      Header: 'Column 2',
      accessor: 'col2',
      sortType: compareNumericString // custom function
    },
  ],
  []
)

function compareNumericString(rowA, rowB, id, desc) {
    let a = Number.parseFloat(rowA.values[id]);
    let b = Number.parseFloat(rowB.values[id]);
    if (Number.isNaN(a)) {  // Blanks and non-numeric strings to bottom
        a = desc ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY;
    }
    if (Number.isNaN(b)) {
        b = desc ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY;
    }
    if (a > b) return 1; 
    if (a < b) return -1;
    return 0;
}
于 2021-08-28T15:03:46.580 回答
4

我也很难弄清楚这一点。这就是我的做法。它在 typescript 中，但如果你需要它在纯 js 中，只需删除所有类型。第一，这里是自定义排序。它将对字符串进行排序，并始终将 nulls/blanks/undefined 放在最后。

const customStringSort: any = (rowA: Row, rowB: Row, columnId: string, desc: boolean) => {
  const defaultVal = desc ? 'AAAAAAAAAAAA' : 'ZZZZZZZZ';
  return (rowA.values[columnId] ?? defaultVal)
    .localeCompare(rowB.values[columnId] ?? defaultVal);
};

有两件事需要注意。

  1. 当返回被定义为数字时，我无法弄清楚为什么打字稿不喜欢它。我讨厌使用任何，但这有效。
  2. 反应表文档表明必须记住这一点。这不是，但它仍然有效。

接下来，您必须将此函数添加到 sortTypes。

const sortTypes: Record<string, SortByFn<SomeObject>> = {
  customStringSort: customStringSort,
};

接下来，将 sortTypes 添加到 useTable 实例。

const {
  getTableProps,
  getTableBodyProps
  headerGroups,
  rows,
  prepareRow,
  } = useTable(
    {
      columns,
      data,
      sortTypes
    },
  useSortBy
);

现在您可以将自定义函数添加到列定义中。

const columns: Column<SomeObject>[] = React.useMemo(() => 
  [
    { accessor: 'someColumnID', Header: 'Some Column', sortType:'customStringSort' },
  ],
  [],
);

希望这可以帮助！

--编辑：如果你想记住这个功能，这个工作。只需在适当的地方将 customStringSort 替换为 customStringSortMemo 即可。

const customStringSort: any = React.useCallback((rowA: Row, rowB: Row, columnId: string, desc: boolean) => 
  {
  const defaultVal = desc ? 'AAAAAAAAAAAA' : 'ZZZZZZZZ';
  return (rowA.values[columnId] ?? defaultVal).localeCompare(rowB.values[columnId] ?? defaultVal);
  },
[]);
    
const customStringSortMemo = React.useMemo(() => customStringSort[customStringSort]);
于 2021-06-09T18:57:04.737 回答