如何让我的 React 表始终重置为第 1 页？

Question

我的反应表显示基于用户选择的 2 或 3 个不同过滤器的数据。 每次更改搜索过滤器并更新表格数据时，表格都会首先显示上次查看的页码。 每次更改搜索过滤器时，如何确保表格始终从第 1 页开始？

反应表代码：

<ReactTable
                    data={this.props.summarydata}
                    columns = {columns}
                    defaultPageSize = {40}
                    pageSizeOptions = {[20, 50, 100, 500]}
                    style={getStyle}
                    loadingText = {"Loading..."}
                    noDataText={"No data found. Please edit search parameters."}
                    minRows={10}
                    resizable={true}
                    previousText = {"Previous"}               
                >
                    {(state, filteredData, instance) => {
                        this.ReactTable = state.pageRows.map(post => { return post._original});
                        return(
                            <div>
                                {filteredData()}
                            </div>
                        )
                    }}

                </ReactTable>      

Answer 1

根据文档，您可以像这样将autoResetPage道具添加到您的表格选项对象中，

<ReactTable
                    data={this.props.summarydata}
                    columns = {columns}
// This one!
                    autoResetPage={true}
                    defaultPageSize = {40}
                    pageSizeOptions = {[20, 50, 100, 500]}
                    style={getStyle}
                    loadingText = {"Loading..."}
                    noDataText={"No data found. Please edit search parameters."}
                    minRows={10}
                    resizable={true}
                    previousText = {"Previous"}               
                >
                    {(state, filteredData, instance) => {
                        this.ReactTable = state.pageRows.map(post => { return post._original});
                        return(
                            <div>
                                {filteredData()}
                            </div>
                        )
                    }}

                </ReactTable> 

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        page,
        prepareRow,
        filters,
        allColumns,
        setFilter,
        selectedFlatRows,
        // below new props related to 'usePagination' hook
        canPreviousPage,
        canNextPage,
        pageOptions,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        setPageSize,
        state: {pageIndex, pageSize},
    } = useTable(
        {
            columns,
            data,
            defaultColumn: {
                Filter: DefaultColumnFilter,
            },
            filterTypes,
// This is the one you want.
            autoResetPage,
                hiddenColumns: columns.filter((col: any) => col.show === false).map((col) => col.id || col.accessor),
                pageIndex: 0,
                pageSize: 20,
            },
        },
        ...hooks
    );