自定义排序 TanStack Table V8

Question

如果单元格中有两个值，如何对列进行排序？

columnHelper.accessor('violations', {
  id: 'violations',
  header: () => <p>Violations</p>,
  cell: (info) => (
    <div>
      <p>{info.getValue().count}</p>
      <p>{info.getValue().percent}%</p>
    </div>
  ),
}),

如果有办法，你能提供一个实现的例子吗？

Answer 1

您可以为每列传递一个自定义排序函数。 这是

count

:

上的排序示例

{
  id: 'violations',
  header: () => <p>Violations</p>,
  cell: (info) => (
    <div>
      <p>{info.getValue().count}</p>
      <p>{info.getValue().percent}%</p>
    </div>
  ),
  sortingFn: (
    rowA,
    rowB,
    columnId
  ) => {
    const numA = rowA.getValue(columnId).count;
    const numB= rowB.getValue(columnId).count;

    return numA < numB ? 1 : numA > numB ? -1 : 0;
  }
}