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

Question

My react table shows data based on 2 or 3 different filters the user picks. Every time the search filters are changed and the table's data is updated, the table begins by displaying the page number that was last looked at. How can I make sure the table always starts at page 1 every time the search filters are changed?

React table code:

<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

As per the docs you can add the autoResetPage prop to your table options object like this,

<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
    );