排序时如何避免更改在反应表中展开的分组行的位置

如何解决排序时如何避免更改在反应表中展开的分组行的位置

我正在尝试将 react-table 分组与排序结合起来，但遇到了一些奇怪的冲突。具体来说，当没有打开任何东西时，我希望排序正常工作，但是当一个组被展开以看到它的孩子时，我不希望组的顺序移动。我目前已经设置了一个钩子来观察展开状态和自定义排序功能，但我不确定这是否是最好的方法。

const sortFnc = React.useMemo(
  () =>
    (
      rowA: RWTypes.Row<Object>,rowB: RWTypes.Row<Object>,columnId: string,desc: boolean
    ) => {
      if (
        Object.keys(expanded).some(
          (id) =>
            (id.startsWith(rowA.groupByID + ":") && !id.includes(">")) ||
            id.includes(">" + rowB.groupByID + ":")
        )
      ) {
        return (desc ? 1 : -1) * (rowA.index > rowB.index ? -1 : 1);
      }
      return rowA.values[columnId] > rowB.values[columnId] ? 1 : -1;
    },[expanded]
);

我必须在这里使用扩展，因为当将行传递到 sortFnc 时，无论出于何种原因，似乎 row.isExpanded 都未正确定义。基本上在这里我只是拥有它所以它使用默认索引作为组的排序，如果其中任何一个（或子组）被扩展。

这里的问题是，如果组已经排序，那么您会得到一种奇怪的用户体验，即在展开时将组从排序顺序更改为原始索引顺序，然后在扩展时返回排序顺序展开。如果我可以获得显示该行的当前索引，这可以解决，但我似乎不知道如何获得。

我也认为可能还有更好的方法来完全做到这一点。谢谢！