0

我正在尝试将反应表分组与排序结合起来，并且遇到了一些奇怪的冲突。具体来说，当什么都没有打开时，我希望排序正常工作，但是当一个组被展开以查看它的孩子时，我不希望组的顺序移动。我目前已经设置了一个挂钩来查看展开状态以及自定义排序功能，但我不确定这是否是最好的方法。

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正确未定义。基本上在这里我只是拥有它，因此如果其中任何一个（或子组）被扩展，它就会使用默认索引作为组的排序。

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

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

4

0 回答 0