在当前页面上显示 react-table 中的新行

Question

我玩 ReactTable v7 有一段时间了，遇到了以下问题：当 table 排序并使用分页器时，有时添加（或编辑）一行会导致它在当前页面之外.

你可以在这里看到问题： https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-kitchen-sink

按名字 table 排序
按添加
输入名字为“zzzzz”的记录

记录已添加但当前处于隐藏状态，这让用户感到困惑。是否有解决问题的“标准”方法？我错过了什么吗？

在 v6 中我做了一个解决方法：

    React.useEffect(() => {
        if (editedElementId && reactTable) {
            const { data } = reactTable.props;

            if (data && data.length > 0) {
                const internal = reactTable.getResolvedState();

                let position = -1;
                internal.sortedData.forEach((row, i) => {
                    if (row._original.id === editedElementId) position = i;
                });

                if (position >= 0) {
                    const pageNumber = Math.floor(position / pageSize);
                    setPage(pageNumber);
                } else {
                    alert.info("Element not visible");
                }
            }
        }
    }, [editedElementId]);

...

    <ReactTable
       ref={(r) => {setReactTable(r);}}
...

但也许有一种内置的方法可以实现它？

Answer 1

目前没有办法只对当前显示的元素进行排序，不。

React Table v7 的 useSortBy 钩子对整个输入数据数组进行排序，因此按名字降序（A->Z）排序自然会将 'ZZZZZZ' 放在列表的末尾，这将由于分页而被隐藏。 v7 的实现方式可能与您已经在做的类似，使用 useTable 挂钩中公开的属性而不是 reactTable.resolvedState() 等。另一种方法是编写您的自己的自定义 sortBy 方法，只对项目 [0...n] 进行排序，其中 n 是当前显示的项目数。

作为旁注，由于 autoResetSortBy 属性在您链接的示例中默认为真，因此按名字排序的步骤无关紧要——因为添加新的函数列表的用户改变了数据数组，排序方法被重置。该函数将新用户附加到列表的末尾，因此它将始终位于新页面上，即使“每页行数”选项设置为“全部”也是如此。这两个问题都可以通过将 autoResetSortBy 设置为 false 并更改 addUserHandler.

中的 pageSize 来解决

在当前页面上显示 react-table 中的新行

Showing the new row in react-table on the current page

reactjs

react-table-v7