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

【问题标题】：Showing the new row in react-table on the current page在当前页面的 react-table 中显示新行
【发布时间】：2021-11-21 11:13:42
【问题描述】：

我玩 ReactTable v7 有一段时间了，遇到了以下问题：当表格被排序并使用分页器时，有时添加（或编辑）一行会导致它超出当前页面。

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

按名字对表格进行排序
按添加
输入名字为“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);}}
...

但也许有一个内置的方法来实现它？

【问题讨论】：

标签： reactjs react-table-v7

【解决方案1】：

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

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

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

【讨论】：